Digitally Distinct: BBCoding Tutorial/Help Thread

Having trouble formatting your forum topic or signature? Buy or sell custom code here

World Wide page counter

So yes you caught me. 700 or so unique visits, that's incredible! I am curious about where you guys are from too! Because of this I got a flag counter here.
92
28%
Image
231
72%
 
Total votes : 323

Re: Digitally Distinct: Thread Etiquette

Postby Goostarion » Mon Jan 18, 2016 3:53 pm

Image
A general do's and don't's so the thread is smooth sailing.

    Helper Do's
    • Do encourage the user to read the thread, but also answer the question to the best of your knowledge because it could help us shape the answer in regards to what we have already as an answer.
    • Explain in as much detail as you can when you answer, this includes adding links to posts which have explanations already written and images / screenshots to help explain what you mean.
    • Be patient and polite, not everyone will pick up BBC and image manipulation with ease and some need more help than others.
    • Encourage the user to have a go first whenever possible. Tasks such as Image manipulation are covered in a tutorial at the front of the thread with easy to go through instructions.

    Helper Don'ts
    • Don't be rude. This includes referring to a user being knowledgeable in the field of BBC, treating them negatively and enforcing you are superior because you know more. If this happens, you will be asked to no longer help on the thread.
    • Don't answer if you don't know the answer. It's spam, please wait till someone who can answer jumps in.
    • Don't post if someone else has unless you have something to add to the reply. Only staff can do this if they have to over-ride someone's advice to ensure that the right advice / help is given.

    User Do's
    • Do read the front page and FAQ to the best of your ability. It is a lot to take in and we don't expect you to learn how to BBC immediately, but we do expect you to be able to use the forum search functions to find what it is you are looking for.
    • Explain in as much detail as you can when you need help, this includes adding links to posts are what you are inquiring for, images / screenshots to help explain what you mean. Using terminology from here helps as well.
    • Be patient and polite, Helpers are not online 24/7 and sometimes your code might take forever to decipher.
    • If you want Image manipulation done, try it yourself first! While this is a help thread, we are here to help those who have already tried things and it hasn't turned out all peachy.

    User Don'ts
    • Don't be rude. We take time out of our day to help you.
    • Don't answer if you don't know the answer. It's spam, please wait till someone who can answer jumps in.
    • Don't ask a question that is already answered when you use the Control / Command + F feature at the front of the thread, you will be redirected to the front and it is a waste of everyone's time.
Last edited by Goostarion on Fri Feb 10, 2017 1:51 pm, edited 4 times in total.
Goostarion
 
Posts: 7985
Joined: Tue Sep 27, 2011 3:49 pm
My pets
My items
My wishlist
My gallery
My scenes
My dressups
Trade with me

Re: Digitally Distinct: Signature Tutorial Thread V2

Postby Goostarion » Mon Jan 18, 2016 4:29 pm

Stupid crap
Where I have no idea where these go but hey, we can have fun here too.

Train Template (By ZeyDaan) [It's pink bc pink rocks]
Code: Select all
[left][size=200][color=#e62d4c]◢█████████████████◣[/color][/size]
    [right][color=#e62d4c][size=200]█
    █

    █[/size][/color][/right][right][center]x.
x
x
x
x
x[/center][/right][right][center][size=200][color=#e62d4c]█


█[/color][/size][/center][/right][right][center]x
x
x
x
x
x[/center][/right][size=200][color=#e62d4c]█
    █

    █[/color][/size]
    [size=200][color=#e62d4c]◥█████████████████◤[/color]
[color=transparent]xx[/color][color=#e62d4c]◕◕[/color][color=transparent]xxxxxxxxxxxxxx[/color][color=#e62d4c]◕◕[/color][/size][/left][left][size=200][color=transparent]y
y
y
y
y[/color]
[color=#e62d4c]▃[/color][/size][/left][left][size=200][color=#e62d4c]████████[/color][/size]
[right][size=200][color=#e62d4c]█[/color][/size][/right][right]Noot Noot[/right][right][size=200][color=#e62d4c]█[/color][/size][/right]
[size=200][color=#e62d4c]████████
████████
████████
████████[/color]
[color=transparent]x[/color][color=#e62d4c]◕◕[/color][/size][/left][left][size=200][color=transparent]xxxxx[/color][color=#e62d4c]███[/color]
[color=transparent]xxxxx[/color][color=#e62d4c]███[/color]
[color=#e62d4c]████████◣
█████████
█████████
████████◤[/color]
[color=transparent]xxxxx[/color][color=#e62d4c]◕◕[/color][/size][/left]

◢█████████████████◣



x.
x
x
x
x
x



x
x
x
x
x
x




◥█████████████████◤
xx◕◕xxxxxxxxxxxxxx◕◕
x
x
x
x
x

████████
Noot Noot

████████
████████
████████
████████

x◕◕
xxxxx███
xxxxx███
████████◣
█████████
█████████
████████◤

xxxxx◕◕


Holy crap Art, your coding game is surreal.

Image
Image
Image
Image
Image
ImageImage
ImageImage
ImageImage
ImageImage
ImageImage
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
Image
yyyyyy
yyyyyy
yyyyyy
zzzzzz
zzzzzz
zzzzzz
xxxxxxxxxxxx
xxxxxxxxxxxx
───────────────────────────────────
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx


ImageImage
┌────────────────────┐
xxx
x
x
x
└────────────────────┘
Image
Last edited by Goostarion on Fri Feb 10, 2017 1:51 pm, edited 9 times in total.
Goostarion
 
Posts: 7985
Joined: Tue Sep 27, 2011 3:49 pm
My pets
My items
My wishlist
My gallery
My scenes
My dressups
Trade with me

Re: Digitally Distinct: Signature Tutorial Thread V2

Postby Goostarion » Mon Jan 18, 2016 4:30 pm

Copyright in regards to coding on CS.
Because fights happen and this needs to be made clear.

Copyright protects the following:
• Drawings, logos, photographs and visual images are generally protected by copyright.
• Copyright does not protect ideas, styles or techniques.
• Ownership of copyright varies according to the circumstances in which the work was made.

Signatures
Resource located here x
    What you can call under copyright:
      - Images you used if you have permission to use them (Aka the official stuff from x fandom / images you own copyright to). If those images are not from an official source still belong to the artist whom created them and you must have permission from the artist to use them.

      - Images you created for that signature, that includes gif overlays, image boarders and otherwise.
    What you cannot call under copyright:
      - A specific layout or coding style. If someone wants to make a signature that is 306 x 700 and has a similar layout to my signatures, I can’t tell them to quit that out because they have the right to have that layout if they so choose to. If anything, I will applaud them for their creation and help them along with figuring out little issues and design enhancing advice.

      - The use of a specific pattern of code digits. If they want to use specific codes to make a boarder, they can. It’s there for that persons resource and it is really no secret where people can get these from.
    Please do not be the person who is copyrighting a layout. It’s like copyrighting lines for a colour in adoptable that you do not own. You own the colour style and the story and everything else you wish to add in referral to the adoptable, but you do not own the lineart. You don’t own code or layout of the signature, but you own the images that you used to create the signature.

    If you have any problems in regards to signatures and the overall signature community, please PM me about it. I will answer you the best I can and hope to clear things up.

    If you do report this to the mods, all they will do is close the report and ignore it. Please be aware of this.

Roleplay boards
Resource located here x

Tess wrote:We sometimes get reports complaining that someone has stolen their layout or "form". Unfortunately you cannot copyright your particular layout of bb code and font colors. We encourage everyone to design their own roleplay layouts, but there's nothing we can do if someone else's font color, alignment, size and placement of images looks suspiciously similar to the formatting of your own posts. It's quite possible that the same design may have been thought of independently and it's not worth getting upset about it.

We also sometimes get reports about character "theft" if someone else starts using the same reference image that you use, or the same character name. If you own exclusive rights to the image then you should report anyone else who uses it, but if it's just something random you found online then you don't own it and you can't stop anyone else from using it. If your character name is particularly unique then you can report the person who you believe stole it and give us any information to explain why you think they stole it. However, if your character is just named something like John or Taylor then there's nothing unique about that and anyone can use that name.


What this means:
    - Reporting layout copying is pointless since you can't copyright layouts and BB coding / font colours.
    - Using images you didn't make =/= theft if someone else uses the same image. If you didn't make it, you have no copyright in regards to it and everyone can use it.

Image permission / copyright
Resource located here x

    Commissioned art
      - If you did not commission any art, you must get art permission from the artist who drew that art before you use it. (If it is not official or owned by you or stated to be free to use otherwise. This would include a lot of Tumblr Gifs for instance.)
      - However, if you did get commissioned art, you don't need permission for it's manipulation usage since technically you own the rights to it and it's usage. A credit link is fine.

    Crediting
      - If you don't own a piece of art, credit is necessary. There is no exceptions to art theft.
      - There is an exception to the crediting however. If you need to give art credit to a user but they have a non CS appropriate image in close radius to the link you need to show for credit, you must send a help ticket and let the mods know that you cannot link the artist as there is inappropriate stuff on that page. They will then inform you that you can just use that artist's name instead. Why I say let the mods know is because then it will be on record that you did chase it up and therefore if someone reports you for incorrectly giving art credit, you have evidence to show that yes; you did inquire on giving art credit, but not being able to due to these circumstances.
Last edited by Goostarion on Thu Sep 29, 2016 10:44 pm, edited 5 times in total.
Goostarion
 
Posts: 7985
Joined: Tue Sep 27, 2011 3:49 pm
My pets
My items
My wishlist
My gallery
My scenes
My dressups
Trade with me

Digitally Distinct: General Rules about coding.

Postby Goostarion » Mon Jan 18, 2016 4:31 pm

Image
Just a collection on things you can and can't do on CS with coding.

Post based
  • Do not attach post images which have no meaning to the top and bottom of your post to make it look pretty.
      Tess: Given that these images add nothing useful to the message, they are just decorative spam. We already allow massive signatures on CS for you to express yourself in, we simply don't have room for you to put images into every post as well.
  • Is the usage of symbols classed as spam in regards to the above link? Answer is here
      Example:
      The new Butterfly wolves are so pretty! ♥


      Seems okay to me since the heart is there to add emphasis that they like the pet.

      Example:
      Oh man I missed the new dog outcome! (╯°□°)╯︵ ┻━┻


      Same as above, the emote is added as emphasis, so it is okay in my eyes.

      Example:
      °º¤ø,¸¸,ø¤º°`°º¤ø,¸,ø¤°º¤ø,¸¸,ø¤º°`°º¤ø,¸
      I think the new horses are pretty!
      °º¤ø,¸¸,ø¤º°`°º¤ø,¸,ø¤°º¤ø,¸¸,ø¤º°`°º¤ø,¸


      The lines have nothing to do with the post or topic, thus it is spam in my eyes.

Signature based
  • CS No longer allows the use of "anti" messages in signatures or on the site as a whole.
      Tess: We allowed "anti" signature messages up until this point in the interest of being "fair" to everyone's beliefs. However, the fact is these "anti" messages in signatures bring nothing but negativity to the site, and are the cause of many arguments and problems. These messages often leave certain groups of people feeling attacked, discriminated against or bullied; when CS should be a safe place for people to come and be free of judgement/discrimination. We feel that there are more positive ways for people to express their beliefs, for example using a "pro-atheism" stamp instead of an "anti-religion" stamp.

Roleplay Based
Last edited by Goostarion on Fri Feb 10, 2017 1:51 pm, edited 7 times in total.
Goostarion
 
Posts: 7985
Joined: Tue Sep 27, 2011 3:49 pm
My pets
My items
My wishlist
My gallery
My scenes
My dressups
Trade with me

Re: Digitally Distinct: Signature Tutorial Thread V2

Postby Goostarion » Mon Jan 18, 2016 4:31 pm

    Image
    Image
    ▪ ▪[SQUIDDING & SQUIDATURE TUTORIAL THREAD]▪


xxxxx
created, loved and cherished by Squid Queen
Previous: Version 1
Staff: Squid 1, Squid 2 (Godtier squid), Squid 3, Squid 4
Special thanks to our squids!


Image
Image
Code: Select all
[img]http://i.imgur.com/CBJJstB.png[/img]
in celebration of our squid overlords, digitally distinct has temporarily become squidically distinct. pick up your limited edition stamp now!

    Image
      This thread was created in response to various requests for squidding help. Feel free to browse!

    Image
      Looking for the Table of Contents? Scroll down or click here

    Image
      Concerning the thread
      • Do not ask squidding questions that are answered on the front page.
        Look around or visit the Table of Contents or FAQ instead.
      • If you want your tutorial to be considered for a spot on the front page, PM myself.
      • READ THE THREAD ETIQUETTE POST LOCATED HERE FOR A QUICK DO AND DON'T ON HOW AND WHAT TO POST. (FOR HELPERS AND HELPEES)

      No canned squid meat, please.
      • Do not double post.
      • Only mark the thread once.
      • Do not ask for screen shots here.
      • Do not ask for squidature ratings here.
      • If you are not giving or asking for squidding/squidature help, please do not post here.
      • Only requote your post on a new page. Requoting on the same page is spam.

      For squid opinions, find "Squidature Respect", "Squidature Criticism" "or "Rate the Squidature" here, or join the squidature fanclub.

      Want to make a comment about your squidature? That's fine but do it here: Squidature fanclub

      Squid Shop Owners:
      • If you are getting paid to make a squid and you had one of us recode a part of the order, pay your helper.
      • If you are getting paid but no one here touched your code to help, you do not need to pay us at all.
        We will know if your squidature is for your shop or for yourself. We check.

    Image
      Spread the word! Share this tutorial with your friends! Link this thread in your squidature!
      We want this tutorial to help as many BBCode beginners as possible.

Image
    These are up for grabs for your own use in your squidature!
    Click here to grab the code for any of the following stamps.

    Image
    Image Image Image
    Image Image Image
    Image Image Image
    ♥ Special thanks to abberence., bambi boo and ~Anastasia~ for taking the time to make these!

    Squidding = Coding
    Squidature = Signature
    Squid = Staff/Code/Contributors

Squid Art
Various squid art from the celebrations
Image
By Rowza

Image
Last edited by Goostarion on Mon Jan 23, 2017 12:04 pm, edited 2 times in total.
Goostarion
 
Posts: 7985
Joined: Tue Sep 27, 2011 3:49 pm
My pets
My items
My wishlist
My gallery
My scenes
My dressups
Trade with me

Re: Digitally Distinct: Colour selection

Postby Goostarion » Mon Jan 18, 2016 4:32 pm

Image
    Here is a list of various colour hex codes and their names. This list was originally created by Electric Forest
╔════════════════════════════════╗






Image
#000000 |✖| Black #150517 |✖| Gray0 #250517 |✖| Gray18 #2B1B17 |✖| Gray21
#302217 |✖| Gray23 #342826 |✖| Gray25 #34282C |✖| Gray26 #382D2C |✖| Gray27
#3b3131 |✖| Gray28 #3E3535 |✖| Gray29 #413839 |✖| Gray30 #41383C |✖| Gray31
#463E3F |✖| Gray32 #4A4344 |✖|Gray34 #4C4646 |✖| Gray35#4E4848 |✖| Gray36
#504A4B |✖| Gray37 #544E4F |✖| Gray38 #565051 |✖| Gray39 #595454 |✖| Gray40
#5C5858 |✖| Gray41#5F5A59 |✖| Gray42#625D5D |✖| Gray43#646060 |✖| Gray44
#666362 |✖| Gray45#696565 |✖| Gray46#6D6968 |✖| Gray47#6E6A6B |✖| Gray48
#726E6D |✖| Gray49#747170 |✖| Gray50 #736F6E |✖| Gray







╚════════════════════════════════╝

╔════════════════════════════════╗




Image
#616D7E |✖| Slate Gray4 #657383 |✖| Slate Gray#646D7E |✖| Light Steel Blue4
#6D7B8D |✖| Light Slate Gray#4C787E |✖| Cadet Blue4#4C7D7E |✖| Dark Slate Gray4
#806D7E |✖| Thistle4#5E5A80 |✖| Medium Slate Blue#4E387E |✖| Medium Purple4
#151B54 |✖| Midnight Blue#2B3856 |✖| Dark Slate Blue#25383C |✖| Dark Slate Gray
#463E41 |✖| Dim Gray





╚════════════════════════════════╝

╔════════════════════════════════╗







Image
#151B8D |✖| Cornflower Blue#15317E |✖| Royal Blue4#342D7E |✖| Slate Blue4
#2B60DE |✖| Royal Blue#306EFF |✖| Royal Blue1#2B65EC |✖| Royal Blue2
#2554C7 |✖| Royal Blue3#3BB9FF |✖| Deep Sky Blue#38ACEC |✖| Deep Sky Blue2
#357EC7 |✖| Slate Blue#3090C7 |✖| Deep Sky Blue3#25587E |✖| Deep Sky Blue4
#1589FF |✖| Dodger Blue#157DEC |✖| Dodger Blue2#1569C7 |✖| Dodger Blue3
#153E7E |✖| Dodger Blue4#2B547E |✖| Steel Blue4#4863A0 |✖| Steel Blue
#6960EC |✖| Slate Blue2#8D38C9 |✖| Violet#7A5DC7 |✖| Medium Purple3
#8467D7 |✖| Medium Purple#9172EC |✖| Medium Purple2#9E7BFF |✖| Medium Purple1
#728FCE |✖| Light Steel Blue#488AC7 |✖| Steel Blue3#56A5EC |✖| Steel Blue2
#5CB3FF |✖| Steel Blue1 #659EC7 |✖| Sky Blue3#41627E |✖| Sky Blue4
#737CA1 |✖| Slate Blue#737CA1 |✖| Slate Blue#98AFC7 |✖| Slate Gray3








╚════════════════════════════════╝

╔════════════════════════════════╗





Image
#F6358A |✖| Violet Red#F6358A |✖| Violet Red1#E4317F |✖| Violet Red2
#F52887 |✖| Deep Pink#E4287C |✖| Deep Pink2#C12267 |✖| Deep Pink3
#7D053F |✖| Deep Pink4#CA226B ✖ Medium Violet Red#C12869 ✖ Violet Red3
#800517 ✖ Firebrick#7D0541 ✖ Violet Red4#7D0552 ✖ Maroon4
#810541 ✖ Maroon#C12283 ✖ Maroon3#E3319D ✖ Maroon2
#F535AA ✖ Maroon1#FF00FF ✖ Magenta#F433FF ✖ Magenta1
#E238EC ✖ Magenta2#C031C7 ✖ Magenta3






╚════════════════════════════════╝

╔════════════════════════════════╗







Image
#B048B5 ✖ Medium Orchid #D462FF ✖ Medium Orchid1#C45AEC ✖ Medium Orchid2
#A74AC7 ✖ Medium Orchid3#6A287E ✖ Medium Orchid4#8E35EF || Purple
#893BFF ✖ Purple1#7F38EC ✖ Purple2#6C2DC7 ✖ Purple3
#461B7E ✖ Purple4#571B7e ✖ Dark Orchid4#7D1B7E ✖ Dark Orchid
#842DCE ✖ Dark Violet#8B31C7 ✖ Dark Orchid3#A23BEC ✖ Dark Orchid2
#B041FF ✖ Dark Orchid1#7E587E ✖ Plum4#D16587 ✖ Pale Violet Red
#F778A1 ✖ Pale Violet Red1#E56E94 ✖ Pale Violet Red2#C25A7C ✖ Pale Violet Red3
#7E354D ✖ Pale Violet Red4#B93B8F ✖ Plum#F9B7FF ✖ Plum1
#E6A9EC ✖ Plum2#C38EC7 ✖ Plum3#D2B9D3 ✖ Thistle
#C6AEC7 ✖ Thistle4#EBDDE2 ✖ Lavender Blush2#C8BBBE ✖ Lavender Blush3
#E9CFEC ✖ Thistle2 #FCDFFF ✖ Thistle1








╚════════════════════════════════╝

╔════════════════════════════════╗









Image
#E3E4FA ✖ Lavender#FDEEF4 ✖ Lavender Blush#C6DEFF ✖ Light Steel Blue1
#ADDFFF ✖ Light Blue#BDEDFF ✖ Light Blue1#E0FFFF ✖ Light Cyan
#C2DFFF ✖ Slate Gray1#B4CFEC ✖ Slate Gray2#B7CEEC ✖ Light Steel Blue2
#52F3FF ✖ Turquoise1#00FFFF ✖ Cyan#57FEFF ✖ Cyan1
#50EBEC ✖ Cyan2#4EE2EC ✖ Turquoise2#48CCCD ✖ Medium Turquoise
#43C6DB ✖ Turquoise#9AFEFF ✖ Dark Slate Gray1#8EEBEC ✖ Dark Slate Gray2
#78c7c7 ✖ Dark Slate Gray3#46C7C7 ✖ Cyan3#43BFC7 ✖ Turquoise3
#77BFC7 ✖ Cadet Blue3#92C7C7 ✖ Pale Turquoise3#AFDCEC ✖ Light Blue2
#3B9C9C ✖ Dark Turquoise#307D7E ✖ Cyan4#3EA99F ✖ Light Sea Green
#82CAFA ✖ Light Sky Blue#A0CFEC ✖ Light Sky Blue2 #87AFC7 ✖ Light Sky Blue3
#82CAFF ✖ Sky Blue#79BAEC ✖ Sky Blue2#566D7E ✖ Light Sky Blue4
#6698FF ✖ Sky Blue4#736AFF ✖ Light Slate Blue#CFECEC ✖ Light Cyan2
#AFC7C7 ✖ Light Cyan3#717D7D ✖ Light Cyan4#95B9C7 ✖ Light Blue3
#5E767E ✖ Light Blue4#5E7D7E ✖ Pale Turquoise4










╚════════════════════════════════╝

╔════════════════════════════════╗









Image
#617C58 ✖ Dark Sea Green#348781 ✖ Medium Aquamarine#306754 ✖ Med Sea Green
#4E8975 ✖ Sea Green#254117 ✖ Dark Green#387C44 ✖ Sea Green4
#4E9258 ✖ Forest Green#347235 ✖ Medium Forest Green#347C2C ✖ Spring Green4
#667C26 ✖ Dark Olive Green4#437C17 ✖ Chartreuse4#347C17 ✖ Green4
#348017 ✖ Medium Spring Green#4AA02C ✖ Spring Green#41A317 ✖ Lime Green
#4AA02C ✖ Spring Green#8BB381 ✖ Dark Sea Green#99C68E ✖ Dark Sea Green2
#4CC417 ✖ Green3#6CC417 ✖ Chartreuse3#52D017 ✖ Yellow Green
#4CC552 ✖ Spring Green3#54C571 ✖ Sea Green3#57E964 ✖ Spring Green2
#5EFB6E ✖ Spring Green1#64E986 ✖ Sea Green2#6AFB92 ✖ Sea Green1
#B5EAAA ✖ Dark Sea Green2#C3FDB8 ✖ Dark Sea Green1#00FF00 ✖ Lime
#87F717 ✖ Lawn Green#5FFB17 ✖ Green1#59E817 ✖ Green2
#7FE817 ✖ Chartreuse2#8AFB17 ✖ Chartreuse#B1FB17 ✖ Green Yellow
#CCFB5D ✖ Dk Olive Green1#BCE954 ✖ Dk Olive Green2#A0C544 ✖ Dk Olive Green3










╚════════════════════════════════╝

╔════════════════════════════════╗






Image
#FFFF00 ✖ Yellow#FFFC17 ✖ Yellow1 #FFF380 ✖ Khaki1
#EDE275 ✖ Khaki2#EDDA74 ✖ Goldenrod#FBB917 ✖ Goldenrod1
#E9AB17 ✖ Goldenrod2#FDD017 ✖ Gold1#EAC117 ✖ Gold2
#D4A017 ✖ Gold#C7A317 ✖ Gold3#C68E17 ✖ Goldenrod3
#AF7817 ✖ Dark Goldenrod#ADA96E ✖ Khaki#C9BE62 ✖ Khaki3
#827839 ✖ Khaki4#FBB117 ✖ Dark Goldenrod1#E8A317 ✖ Dark Goldenrod2
#C58917 ✖ Dark Goldenrod3#F87431 ✖ Sienna1#E66C2C ✖ Sienna2
#F88017 ✖ Dark Orange#F87217 ✖ Dark Orange1#E56717 ✖ Dark Orange2
#C35617 ✖ Dark Orange3







╚════════════════════════════════╝

╔════════════════════════════════╗





Image
#C35817 ✖ Sienna3#8A4117 ✖ Sienna#7E3517 ✖ Indian Red4
#7E2217 ✖ Dark Orange3#7E3117 ✖ Salmon4#7E3817 ✖ Dark Goldenrod4
#7F5217 ✖ Gold4#806517 ✖ Goldenrod4#805817 ✖ Light Salmon4
#7F462C ✖ Light Salmon4#C85A17 ✖ Chocolate#C34A2C ✖ Coral3
#E55B3C ✖ Coral2#F76541 ✖ Coral #E18B6B ✖ Dark Salmonxxxxxxxxxxxxxx
#F88158 ✖ Pale Turquoise4 #E67451✖ Salmon2 #C36241✖ Salmon3
#C47451 ✖ Light Salmon3 #E78A61✖ Light Salmon2#F9966B ✖ Light Salmon
#EE9A4D ✖ Sandy Brown






╚════════════════════════════════╝

╔════════════════════════════════╗





Image
#F660AB ✖ Hot Pink#F665AB ✖ Hot Pink1#E45E9D ✖ Hot Pink2
#C25283 ✖ Hot Pink3#7D2252 ✖ Hot Pink4

#E77471 ✖ Light Coral #F75D59 ✖ Indian Red1#E55451 ✖ Indian Red2xxxxxxxxxxxxxx
#C24641 ✖ Indian Red3

#FF0000 ✖ Red#F62217 ✖ Red1#E41B17 ✖ Red2
#F62817 ✖ Firebrick1#E42217 ✖ Firebrick2#C11B17 ✖ Firebrick3






╚════════════════════════════════╝

╔════════════════════════════════╗






Image
#C11B17 ✖ Pink#FAAFBE ✖ Rosy Brown1#FBBBB9 ✖ Rosy Brown2
#E8ADAA ✖ Pink2#E7A1B0 ✖ Light Pink#FAAFBA ✖ Light Pink1
#F9A7B0 ✖ Light Pink2#E799A3 ✖ Pink3#C48793 ✖ Rosy Brown3
#C5908E ✖ Rosy Brown#B38481 ✖ Pink3#C48189 ✖ Light Pink3
#7F5A58 ✖ Rosy Brown4#7F4E52 ✖ Light Pink4#7F525D ✖ Pink4
#817679 ✖| Lavendar Blush4#817339 ✖ Light Goldenrod4#827B60 ✖ Lemon Chiffon4
#C9C299 ✖ Lemon Chiffon3#C8B560 ✖ Light Goldenrod3#ECD672 ✖ Light Golden2
#ECD872 ✖ Light Goldenrod#FFE87C ✖ Light Goldenrod1#ECE5B6 ✖ Lemon Chiffon2
#FFF8C6 ✖ Lemon Chiffon#FAF8CC ✖ Light Goldenrod Yellow







╚════════════════════════════════╝
Last edited by Goostarion on Fri Feb 10, 2017 1:51 pm, edited 2 times in total.
Goostarion
 
Posts: 7985
Joined: Tue Sep 27, 2011 3:49 pm
My pets
My items
My wishlist
My gallery
My scenes
My dressups
Trade with me

Visual Hierarchy

Postby Goostarion » Mon Jan 18, 2016 4:37 pm

Image
Originally sourced from here: viewtopic.php?f=23&t=2167035&p=82194564&hilit=tutorial#p82194564

      Visual imagery is perhaps hands down the most important element, from my eyes, when it comes to the overall design and appeal of a Graphic piece, whether that be a signature, or a news article or anything along those lines. With that said, I am going to bring to light a little piece of information I would like to call hierarchy and how this can impact on the outcome of your signature in so many ways, or your graphic works for that matter.

      This is going to be, without a shadow of a doubt a multi-part explanation as to explain why specific things are like so in the Graphic Design world to my knowledge. If there is anything you tend to disagree with here, then please feel free to PM me about it, and let's keep it off the thread as that would most likely contribute as spam.

      As the title suggest, this section is about the Visual Hierarchy of Typography. You may be wondering what the hell that all means, I know some people have. So let's go back to distinguishing what Visual Hierarchy is.

      Visual Hierarchy is the point of what a person visually sees first and what a person visually see's last in a piece of work.

      Image

      For the example above, the first part of the signature you would visually see is the gif on the left hand side. This gif would attract your attention first since it stands out against all of the rest of the signature, and it feels lopsided; but then at the same time it feels somewhat harmonious, wait how is that possible? It is crowded and clustered but then it is one winged graphically detailed and the other side isn't? Help I am confused?

      Simple. Because it is the balance of imagery and typography which keeps the balance in check. You see this many times within magazines and other kinds of paper-digital advertisements. For a product, the image of said product and the typography (Font as otherwise known as) must work harmoniously together in order for this to be achieved.

      Image

      This is just an example above, but it shows how text and image can work together without being directly associated with each other.

      So, for this part of the tutorial, I will do the second part in another post all-together; I am going to explain as best as I can Typographic Visual Hierarchy and the basic do's and don't's of the Graphic Design world. As mentioned above.

    Pᴀʀᴛ 1: Sᴇʀɪғ ᴀɴᴅ Sᴀɴs Sᴇʀɪғ

      Because there are an endless supply of fonts, most fonts are organized to be one group or another for easy identification. These terms that the fonts are distinguished as are Serif's and Sans Serif's.

      Image
      Img Credit

      So, a lengthier explanation than the information provides is needed here.
      Serifs are semi-structural details or small decorative flourishes on the ends of some of the strokes that make up letters and symbols (Known as tails or flicks). An example would be the Times New Roman or Garamond font. Sans serif does not have these details or flourishes. An example would be the Helvetica or the dreaded Comic Sans font.
      It is said that serif fonts are usually easier to read in larger text areas like in books, magazines, in body content on websites. And sans serif fonts are used regularly because of how clean they tend to look in those main text areas. - reference


      So, with this out of the way, it is a good time to mention something of a rule that is often used in visual hierarchy. NEVER MIX SERIFS WITH SAN SERIFS. This is because it often looks unprofessional and the theme of the typeface giving off it's own individual character is ruined by mixing and matching. (Please note that some fonts tease this line and while it is frown upon to mix these fonts, it can sometimes work depending on execution.)

      I shall give you a visual demonstration why this makes a visual image look lopsided.
      (Oh, you guys are going to shoot me for this one:)

      Image
      This is the quote here, a sans serif font called Walkway. It is a very lovely font and I recommend people use it more, it needs more love.
      I digress, this is the quote that is going to demonstrate why serifs and sans serif fonts do not mix and match well.
      I am going to change the part of this quote I want to emphasize in the quote. I will change that to the serif font.

      Image
      I bolded the walkway font here and changed the emphasis words to a Serif font called Sylfaen.
      It doesn't look harmonious at all, if anything it looks broken.
      So, I tried to change the typeface of the original sans serif font to try and accommodate the serif font.

      Image
      It looks a lot better yes, but it is still not harmonious enough to be emphasis on one font from the other. You would have been better doing this:

      Image
      Than using the sans serif font. (The other font used here is Times New Roman.)
      Of course, that was all with one colour scheme. But it is a general rule to not mix Serifs and San Serifs, it's like reading a book and suddenly it goes from one font to another, it is a poor art choice, and in Graphic design, it is regarded as lazy.

      So, that is all you need to know about serifs and san serifs. What they are and don't mix them.

    Pᴀʀᴛ 2: Cᴏʟᴏᴜʀ ʙᴀʟᴀɴᴄᴇ ɪɴ ᴛᴇxᴛ
      Colour balance is one of the most important things that is necessary when creating any load of text to go with your image, whether that would be coded text or graphically created text, it is crucial that you are able to recognize the depths of the colour world and be able to use it to your advantage.

      Going back to our previous example above, with both being Serifs:
      Image

      This one, it looks visually structured, but it is really boring. Really really boring. We need to give it a splash of life to bring it back to life.

      So you would have your appropriate colour scheme going, if you do a commission, it is best to ask the client for a colour scheme. If you are working for yourself it is best to make a colour scheme. Here is one of the best websites to do it: Kuler or Colour Wheel Curse Adobe for changing names.
      For my example, I am going to have this colour scheme going.

      Image
      This is a monochromatic colour scheme. This colour scheme is called monochromatic because it is a set colour scheme of the colour red, but at various hues. (So light and dark red.)
      As general knowledge:

      Dark colours bring a word forward, because it is easily seen from afar and therefore colour emphasized.
      Light colours send a word back because light colours are not as easily seen, so you may need to lean forward to see the words.

      Note: Only exception to this are pure colours, like #FF0000 Red and #0000FF Blue. They are more seen if emphasized. This of course depends on your colour scheme.

      With this said, let's look back at out image.

      Image
      And let's give emphasis to the "Give you up" and "Let you down" Part, so I am going to use the colour to colour them with the darker colours being used on the quoted phrases.

      Image
      You can't see it now, but it will make a hell of a difference at a later.

    Pᴀʀᴛ 3: Lᴀʏᴏᴜᴛ
      Colour is all and good, but when it comes to the overall look, the image looks like... a default; unoriginal and unedited. It doesn't look appealing at all and there are way to many things that look off. The layout of your typographic font is one of the best things to consider when you are creating your type image.

      What do I mean by layout? I mean where you put your letters so they flow together.

      Edit: A good way to develop your knowledge of layout is to organize your alignments.
      What is an aligment? It is where text follows a certain boarder/ rule to make sure it stays neat and tidy.
      The most common alignments are the following:

      Image
      "Funfact wrote:
      The proper terms instead of alignment are Flush 'x'. So they would be Flush left and Flush right. Center alignment does not share this however, it is called "Centered" Instead. [x]



      These three are often referred to as alignments/ Flush to a certain side:
      • Flush Left: Meaning that the text of a paragraph is aligned on the left-hand side with the right-hand side ragged
      • Flush Right: Meaning that the text of a paragraph is aligned on the right-hand side with the left-hand sided ragged.
      • Centered: Meaning that the text of a Paragraph is ragged on both sides and the text is situated to be more central.

      Facts about Alignment: [x]
      Flush Left:
      - This alignment was created for English and most European languages where words are read left-to-right, so that reading the words would be easier.
      - Because of it's popularity, it has been classed as the default layout text alignment of the world.


      Flush Right:
      - This alignment was created for Hebrew and Arabic languages where the words are read from right to left. The alignment of this makes the words easily read.
      - It is used as a special text in the English language and is only seen in Magazines and Newspapers on odd occasion.
      - It is also used in data and tables when recording text in Excel Spreadsheets.


      Centered:
      - This alignment is often used for the title of a work, headlines, and for poems and songs.
      - As with Flush Right, it can also be used in data and tables.
      - It is considered less readable for a body of text made up of multiple lines because the ragged starting edges make it difficult for the reader to track from one line to the next.



      And that is really all you need to know about alignments.
      There is Justified alignment, which makes the centered alignment look flushed on both sides; but that alignment is scrappy for many reasons. The Wikipedia links show you why if you are interested to read more into it.

      With all of that in mind, let's take our current image for instance here:

      The colour scheme looks interesting, but not as awesome as it could be.
      For this, I am going to choose a primarily Flush left alignment.
      And as mentioned above, you will see the colours enhance the emphasis on the words more once we change around the layout.

      Image
      If you are like me and typed all of the quote in one box, you will need to separate it all up, on individual layers. Trust me, you will be relieved later.

      Image
      I divided it up so that each colour was on each individual layer. As you can see, the text is no longer in it's default position. This is a good thing, using center text is generally a no-no for some reason in Graphic Design. (I use it anyway a lot of the time, but this is essentially your choice to use center text or not.)

      There are several aspects that may affect layout, this is the size of the font. For emphasis, the darker text tends to be larger than the lighter text, since the lighter text is not the most important part of the image you are looking at.

      Eg.

      You will read this.
      Before this

      Before this

      Before this


      So, we are going to achieve this. For me, I will do this:

      Image
      1. Sketch out your layout on a separate layer. This is so you visually want to guess where the text you want should be approximately.
      Remember: You do not need to use the whole image, the space there is just so you have room to work.

      Image
      2. Use this sketch as a guideline. Using the corners / transformation tool, make the sizes of the text smaller / bigger or however you need for it to be to match the sketch.

      Image
      3. Arrange the layout with little adjustments to your liking. For me, I am happy with this layout.

      Image
      And this is what I ended up with
      That is it for layout! It is really up to you if you are looking for emphasis for which words you want to show emphasis on.
      (Note, if the font is pixelated, that is because I have zoomed in to make the image look bigger.)
Last edited by Goostarion on Thu Jun 01, 2017 4:46 pm, edited 4 times in total.
Goostarion
 
Posts: 7985
Joined: Tue Sep 27, 2011 3:49 pm
My pets
My items
My wishlist
My gallery
My scenes
My dressups
Trade with me

Re: Digitally Distinct: Current Updates

Postby Goostarion » Mon Jan 18, 2016 4:39 pm

These are the adventures of the ZeyDaan as they travel through the galaxy to update the code thread as much as they can.

    Added the following:
      - Update notice board for where all the general updates happen
      - Added Gif related advice over to this thread so it all stays in one place.
      - Added Column within a Column since it is a popular design style to be used and a lot of people do not know how to use it.
      - Added Layout Templates for people to use.
      - Updating all links
      - Complete contributors list.
      - Added tutorial on how to do a Drop letter
      - Added 'Image Symbols' section in 'Text manipulation'
      - Completed the Colour code list below
      - Added dinglebats to the front page.
      - Added community guidelines layout to the front of the page, first post
      - Reconfigured the text manipulation section of the forum. (Completed entirely)
      - Rearranged tutorials under categories.
      - Added templates (Misc + Avatars)


    Currently updated:
    18/01/16
      - Added several new symbols to the front of the thread.
      - Updated rules (Credit to Falls)
      - New Thread!


    19/01/16
      - Moved Centering Text within a column under Intro to Making Multiple Columns here
      - Moved all columns to hug the left side to where Centering Text within a column used to be here
      - Added Creating a column within a column where All columns to hug the left side here

    28/01/16
      - Redid the contributors link here (Credit: Falls)
      - Redid the links here
      - Created copyright policy over thread content here
      - Wrote up tutorial on how to do a Drop letter/cap here


    12/02/16
      - Added Image Symbols to front of thread.


    05/03/16
      - Done first template for the Template Layouts
      - Updated the Colour codes below.


    12/03/16


    27/05/16


    31/05/16
      - Created the 'Rotating image' tutorial located here: [x]
      - Front page touch ups [Linked a few things to the updated thread, updated art theft section under 'Image Manipulation'
      - Added a TOC to supplementary tutorials located at the top of the post Here
      - Rearranged front of the thread, removing the 'Apply you knowledge' section of the thread and adding a post dedicated to symbols
      - Moved Image symbols to under Image Manipulation
      - Requested for a separate thread for 'How to make a successful signature shop' with making it pinned to the top of the coding and signature design shop forum section [Link to proof]


    27/06/16
      - Various touch ups.
      - Added more definitions in definitions area.


    09/07/16


    01/08/16
      Made templates for Avatar Template post. Also Added Misc templates and Added Greyscaling gif to front page under tutorials


    01/11/16


    10/02/17


    17/04/17
      Added some more symbols and added a helpful site with a questionable name. This one


    1/06/17
      Added a ton of other resources from the old thread including Visual Hierarchy, tutorials which went un-noticed by Falls and myself and other valuable information such as gif problem information.


    Coming soon:
      - How to do the drop letter - Suggested by jyushimatsu. Done
      - Terminology Definitions Done?
      - Gimp tutorials (help from gods)
      - Layout templates (help from gods) Done, thank you to all who contributed! Still accepting submissions.
      - Announcement [x] About Thread movement on Signing off 18/02/16
      - Really really need to do the community guidelines.
      - Update TOC to a more modern appearance. Done
      - Removing Apply your knowledge and moving all posts down one post up to Text manipulation to add a new post specifically dedicated to symbols. Done
      - Update supplementary tutorials with a toc Done
      - Updating the art theft section of the Image Manipulation post Done
      - Add additional information to the Gif problems board.
      - Add additional information to the Terminology board.
      - Update general definitions
      - Rearrange and reconfigure the Signature layouts post to have signature difficulty and rearrange the signatures themselves, this way people know what level they are on.
Last edited by Goostarion on Thu Jun 01, 2017 4:50 pm, edited 7 times in total.
Goostarion
 
Posts: 7985
Joined: Tue Sep 27, 2011 3:49 pm
My pets
My items
My wishlist
My gallery
My scenes
My dressups
Trade with me

Re: Digitally Distinct: Contributors

Postby Goostarion » Mon Jan 18, 2016 4:54 pm

Last edited by Goostarion on Mon Apr 17, 2017 2:05 pm, edited 7 times in total.
Goostarion
 
Posts: 7985
Joined: Tue Sep 27, 2011 3:49 pm
My pets
My items
My wishlist
My gallery
My scenes
My dressups
Trade with me

Re: Digitally Distinct: Signature Tutorial Thread V2

Postby Falls » Mon Jan 18, 2016 5:10 pm

New thread, yay! *throws confetti*
And not a moment too soon. Tomorrow Digitally Distinct turns two!

Thank you to ZeyDaan for taking on this responsibility.
I wish you all the best of luck in your coding endeavors!
xxxxxxxxxxxxxxxxxxxxxxxxx
Image
﴾ Ғαℓℓs ﴿

CS Status:
semi-inactive

Coding Help:
click here

Sig Requests:
closed

Emergency?
Image

xxxxxxxxxxxxxxxxxxxxxxxxxI'llxalwaysxacceptxPMsxandxhelpxrequestsxfromxfriendsxandxoldxacquaintances.
User avatar
Falls
 
Posts: 11399
Joined: Wed Aug 04, 2010 1:24 pm
My pets
My items
My wishlist
My gallery
My scenes
My dressups
Trade with me

Who is online

Users browsing this forum: No registered users and 2 guests