Ｄｉｇｉｔａｌｌｙ Ｄｉｓｔｉｎｃｔ: BBCoding Tutorial/Help Thread

[Zetirian]

Hello everyone! If you don't know me, I'm Undyne. A while back Zetirian said that they were leaving CS and needed someone new to take over Digitally Distinct, and that somone who offered was me! I would now like to tell you all that Version three has finally arrived, you're welcome to mark and ask questions right away. I made it with lots of TLC, Time, Love, and Code!

Please note, the only links fully up-to-date are the ones in the table of contents. Some posts on the thread do have links to other posts, but they either link back to this thread or version one, so please give me time to fix those! Until then feel free to mark and ask any questions regarding code and BBC.

NEW THREAD

Read this notice please.
http://www.chickensmoothie.com/Forum/viewtopic.php?f=102&t=2943236&start=2340#p102004476

▪ ▪ ▪ ▪ ▪ ▪[ＣＯＤＩＮＧ ＆ ＳＩＧＮＡＴＵＲＥ ＴＵＴＯＲＩＡＬ ＴＨＲＥＡＤ]▪ ▪

xxxxx

created, loved and cherished by Falls
Previous: Version 1

Staff: ZeyDaan, gods (Godtier contributor), Bev, ärtemis
Special thanks to our contributors!

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



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



Concerning the thread

• Do not ask coding 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.
  
• Please have a go at things yourself first! Try the tutorials out and see how you go before asking for help. This way everyone learns how to do things themselves!
• 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 spam, please.

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

For sig opinions, find "Signature Respect", "Signature Criticism" "or "Rate the Signature" here, or join the signature fanclub.

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

Sig Shop Owners:

• If you are getting paid to make a sig 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 signature is for your shop or for yourself. We check.


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


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




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

[Zetirian]

Already know what you're looking for?
Hit ctrl+F and type in a keyword OR type it into the search bar up top.

Posts on Page 1

• Basics of BBCode
• Text Manipulation
• Symbols [With links to other posts]
• Image Manipulation
  Making Multiple Columns
  
  • Introduction into making Multiple Columns and Centering Columns
  • Moving columns to the left
  • Creating columns within columns
• Supplementary Tutorials

Posts on Page 2

• FAQ
  Gifs
  
  • Gif Problems
  • Gif Quality
• Terminology definitions
• Culture based Unicode
  Borders and Frames
  
  • Borders and Frames
  • Border and Frames Explaination
  Templates
  
  • Avatar Templates
  • Signature Templates
  • Miscellaneous Templates

Posts on Page 3

• Thread Etiquette
• Coding I am to work out a tutorial for.
• Copyright on CS
• CS Coding Rules
• Squidally Distsquid
• Code Colour Collection
• Visual Hierarchy
• Update post
• Contributors

[Zetirian]

A guide to BBCode has also been posted by the moderators here.

.
Let's start by taking a look at the tools you're given. The following buttons can be found if you click the "POST REPLY" button on the bottom left or top left of the page:



We'll work our way from left to right, briefly going over each button and what it can do for you.

In order to make the code visible, I will be putting an extra space in it.
(Example: [b ][/b] ) Take that space out to make it work.

B: Bolds your words

Code: [b ][/b]
Example: [b ]Hello[/b] creates Hello

i: Italicizes your words

Code: [i ][/i]
Example: [i ]Hello[/i] creates Hello

u: Underlines your words

Code: [u ][/u]
Example: [u ]Hello[/u] creates Hello

Quote: Puts your words into a quote box

Code: [quote ][/quote]
Example: [ quote="NAME"]Hello[/quote] creates ↓↓↓

Hello

Code: Makes your code visible (I didn't use this for these tutorials because it takes up a lot of space)

Code: [code ][/code]
Example: [code ][i ]Hello[/i][/code] creates

Code: Select all

[i]Hello[/i]

instead of Hello

**Quick tip: to copy/paste from a code box without getting all of those spaces added to the left side of each line, highlight and copy everything but the last symbol of the code. Then just add in the last symbol yourself after pasting.

List: Unordered list (bullet points)

Code: [list ][ /list]
Example:
[ list]
[ *]Entry 1
[ *]Entry 2
[ *]Entry 3
[ /list]

creates

• Entry 1
• Entry 2
• Entry 3

List=: Ordered list (letters or numbers)

Code: [ list=][ /list]
Example:
[ list=1]
[ *]Entry 1
[ *]Entry 2
[ *]Entry 3
[ /list]

creates

1. Entry 1
2. Entry 2
3. Entry 3

Example 2:
[ list=a]
[ *]Entry 1
[ *]Entry 2
[ *]Entry 3
[ /list]

creates

1. Entry 1
2. Entry 2
3. Entry 3

[*]: Marks an entry in a list

Code: [* ]
Example: (see the "List" and "List=" entries above)

Img: Makes an image visible

Code: [img ][/img]
Example: [img ]http://i.imgur.com/P8qWnbB.png[/img] creates

For more information on manipulating images, see Image Manipulation

URL: Creates a hyperlink

Code: [url ][/url]
Example: [ url=www.google.com]CLICK[/url] creates CLICK

Drop-down list: Changes text size

Code: [size= ][/size]
Example: [size=85 ]Hello[/size] creates Hello

Font colour: Changes font colour

Code: [color= ][/color]
Example: [color=#FF0000 ]Hello[/color] OR [color=red ]Hello[/color] creates Hello
For more information on manipulating text color, see Text Manipulation

center: Centers text

Code: [center ][/center]
Example: [center ]Hello[/center] creates

Hello

left: Aligns text to the left

Code: [left ][/left]
Example: Well, this text is already aligned to the left.
To see why on earth we would still need this code, see lessons 1, 2 and 3 on columns.

right: Aligns text to the right

Code: [right ][/right]
Example: [right ]Hello[/right] creates (look way over to the right to see this one.)

Hello

strike: Strikes a line through your text

Code: [strike ][/strike]
Example: [strike ]Hello[/strike] creates Hello

And that's it!

Whew! You've muscled your way through the basics! High-fives all around!
Don't forget, if my instructions weren't clear you can always take a look at the mods' BBCode tutorial here or send me a PM.

Understanding the basics of BBCode is like learning how to hold the brush before you start the painting.
Now that we made it this far, we can really start making things look cool. Ready to get into the fun stuff?

[Zetirian]

Here we will learn all of the tricks regarding text colors and fonts.

Note: Maximum signature width and height should be 700 x 400 pixels.
Yes, it varies from browser to browser, but this measurement is most common. Always try to make sure that your signature works for most browsers, that way everyone on CS sees the same signature that you see.

Color:

Color Theory
Before we begin, it's important to take color theory into account. Don't make your colors clash in your signature! You don't want to blind your viewers! :lol:

Your Basic Color Wheel
Here is a picture of a color wheel with some examples of some color schemes you could use. The more spread apart your colors are from each other on the wheel, the more likely it is that they will clash.
For example, the secondary and complimentary schemes in that picture would definitely take a skilled eye to make them work without clashing. The easiest color schemes to work with are analogous, intermediate, and split complimentary.

Color Palette Tools

• Color Wheel
  Click and drag the circles to create a harmonious color palette matched to your tastes.
  
• Colour wheel 2
  Another click and drag of circles to create harmonious colour palettes.
• Color Palette Generator
  Generate any image with a url into a color palette with color codes that you can use on CS.
• Colors from Image
  Upload a picture and click anywhere to get the specific color code from that area.
• Online Colour Picker
  An interactive online colour picker, good for getting specific hex codes for specific colours.

Hyperlinks
To color your hyperlinks, put the color code in between the url code like this:
[ url=link][ color=#####]TITLE OF HYPERLINK[ /color][ /url]

Did you know?
[color=green ]This Code[/color] and [color=#008000 ]This Code[/color], will give you the same color!
Here is a whole list of fantastical color names that work for BBCode. "Transparent" is a color too! Try it out!

Gradient Text
Color gradients can look really cool! But don't try to do that by hand, use Text Color Fader by Patorjk instead!

TIPS:
• Don't forget to set "Output Code" to Standard Forum Code or else the generator won't give you BBCode.
• PLEASE don't spam this resource with Color Presets. You are not the only one trying to use this website.

Fonts:

My favorite fonts
NOTE: The following fonts do not always show up on a mobile device.


• Main text: (Serif / Sans Serif + Italic / Bold)
  𝐀𝐁𝐂𝐃𝐄𝐅𝐆𝐇𝐈𝐉𝐊𝐋𝐌𝐍𝐎𝐏𝐐𝐑𝐒𝐓𝐔𝐕𝐖𝐘𝐙
  𝐚𝐛𝐜𝐝𝐞𝐟𝐠𝐡𝐢𝐣𝐤𝐥𝐦𝐧𝐨𝐩𝐪𝐫𝐬𝐭𝐮𝐯𝐰𝐱𝐲𝐳
  𝐴𝐵𝐶𝐷𝐸𝐹𝐺𝐻𝐼𝐽𝐾𝐿𝑀𝑁𝑂𝑃𝑄𝑅𝑆𝑇𝑈𝑉𝑊𝑋𝑌𝑍
  𝑎𝑏𝑐𝑑𝑒𝑓𝑔𝑖𝑗𝑘𝑙𝑚𝑛𝑜𝑝𝑞𝑟𝑠𝑡𝑢𝑣𝑤𝑥𝑦𝑧
  𝑨𝑩𝑪𝑫𝑬𝑭𝑮𝑯𝑰𝑱𝑲𝑳𝑴𝑵𝑶𝑷𝑸𝑹𝑺𝑻𝑼𝑽𝑾𝑿𝒀𝒁
  𝒂𝒃𝒄𝒅𝒆𝒇𝒈𝒉𝒊𝒋𝒌𝒍𝒎𝒏𝒐𝒑𝒒𝒓𝒔𝒕𝒗𝒘𝒙𝒚𝒛
  𝖠𝖡𝖢𝖣𝖤𝖥𝖦𝖧𝖨𝖩𝖪𝖫𝖬𝖭𝖮𝖯𝖰𝖱𝖲𝖳𝖴𝖵𝖶𝖷𝖸𝖹
  𝖺𝖻𝖼𝖽𝖾𝖿𝗀𝗁𝗂𝗃𝗄𝗅𝗆𝗇𝗈𝗉𝗊𝗋𝗌𝗍𝗎𝗏𝗐𝗑𝗒𝗓
  𝗔𝗕𝗖𝗗𝗘𝗙𝗚𝗛𝗜𝗝𝗞𝗟𝗠𝗡𝗢𝗣𝗤𝗥𝗦𝗧𝗨𝗩𝗪𝗫𝗬𝗭
  𝗮𝗯𝗰𝗱𝗲𝗳𝗴𝗵𝗶𝗷𝗸𝗹𝗺𝗻𝗼𝗽𝗾𝗿𝘀𝘁𝘂𝘃𝘄𝘅𝘆𝘇
  𝘈𝘉𝘊𝘋𝘌𝘍𝘎𝘏𝘐𝘑𝘒𝘓𝘔𝘕𝘖𝘗𝘘𝘙𝘚𝘛𝘜𝘝𝘞𝘟𝘠𝘡
  𝙰𝙱𝙲𝙳𝙴𝙵𝙶𝙷𝙸𝙹𝙺𝙻𝙼𝙽𝙾𝙿𝚀𝚁𝚂𝚄𝚅𝚆𝚇𝚈𝚉
  𝚊𝚋𝚌𝚍𝚎𝚏𝚐𝚑𝚒𝚓𝚔𝚕𝚖𝚗𝚘𝚙𝚚𝚛𝚜𝚝𝚞𝚟𝚠𝚡𝚢𝚣
  𝟶𝟷𝟸𝟹𝟺𝟻𝟼𝟽𝟾𝟿
  𝘢𝘣𝘤𝘥𝘦𝘧𝘨𝘩𝘪𝘫𝘬𝘭𝘮𝘯𝘰𝘱𝘲𝘳𝘴𝘵𝘶𝘷𝘸𝘹𝘺𝘻
  𝘼𝘽𝘾𝘿𝙀𝙁𝙂𝙃𝙄𝙅𝙆𝙇𝙈𝙉𝙊𝙋𝙌𝙍𝙎𝙏𝙐𝙑𝙒𝙓𝙔𝙕
  𝙖𝙗𝙘𝙙𝙚𝙛𝙜𝙝𝙞𝙟𝙠𝙡𝙢𝙣𝙤𝙥𝙦𝙧𝙨𝙩𝙪𝙫𝙬𝙭𝙮𝙯
  𝟬𝟣𝟤𝟥𝟦𝟧𝟨𝟩𝟪𝟫
  𝟬𝟭𝟮𝟯𝟰𝟱𝟲𝟳𝟴𝟵
  
• Cryptic: http://www.glitter-graphics.com/generators/scramble.php
  Δ β Ɔ Ɖ Є Ғ Ǥ Ħ Ɩ Ĵ Ƙ ˩ Ѧ И Ѳ Ƥ Ǫ Я Ƨ Ƭ Ʋ Ѵ Ɯ χ Ƴ Ƶ
  α в c ∂ ɛ ғ ɢ н ι ʝ κ ℓ м и σ ρ զ я ƨ т ʋ ʌ ω ϰ ʏ ʓ
• Reversed: http://www.glitter-graphics.com/generators/reverse.php
  z ʎ x ʍ ʌ n ʇ s ɹ b d o u ɯ ן ʞ ɾ ı ɥ ƃ ɟ ǝ p ɔ q ɐ
  Z ⅄ X M ᴧ ∩ ⊥ S ᴚ Ό Ԁ O ᴎ Ɯ ⅂ ⋊ ſ I H ⅁ Ⅎ Ǝ ◖ Ↄ B ∀
• Smallcaps: http://fsymbols.com/generators/smallcaps
  A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
  ᴀ ʙ ᴄ ᴅ ᴇ ғ ɢ ʜ ɪ ᴊ ᴋ ʟ ᴍ ɴ ᴏ ᴘ ǫ ʀ s ᴛ ᴜ ᴠ ᴡ x ʏ ᴢ
• Wide: http://fsymbols.com/generators/wide
  Ａ Ｂ Ｃ Ｄ Ｅ Ｆ Ｇ Ｈ Ｉ Ｊ Ｋ Ｌ Ｍ Ｎ Ｏ Ｐ Ｑ Ｒ Ｓ Ｔ Ｕ Ｖ Ｗ Ｘ Ｙ Ｚ
  ａ ｂ ｃ ｄ ｅ ｆ ｇ ｈ ｉ ｊ ｋ ｌ ｍ ｎ ｏ ｐ ｑ ｒ ｓ ｔ ｕ ｖ ｗ ｘ ｙ ｚ
• Lined: https://lingojam.com/FancyLetters
  𝕒 𝕓 𝕔 𝕕 𝕖 𝕗 𝕘 𝕙 𝕚 𝕛 𝕜 𝕝 𝕞 𝕟 𝕠 𝕡 𝕢 𝕣 𝕤 𝕥 𝕦 𝕧 𝕨 𝕩 𝕪 𝕫
  𝔸 𝔹 ℂ 𝔻 𝔼 𝔽 𝔾 ℍ 𝕀 𝕁 𝕂 𝕃 𝕄 ℕ 𝕆 ℙ ℚ ℝ 𝕊 𝕋 𝕌 𝕍 𝕎 𝕏 𝕐 ℤ
• Calligraphy Bold: https://lingojam.com/FancyLetters
  𝓪 𝓫 𝓬 𝓭 𝓮 𝓯 𝓰 𝓱 𝓲 𝓳 𝓴 𝓵 𝓶 𝓷 𝓸 𝓹 𝓺 𝓻 𝓼 𝓽 𝓾 𝓿 𝔀 𝔁 𝔂 𝔃
  𝓐 𝓑 𝓒 𝓓 𝓔 𝓕 𝓖 𝓗 𝓘 𝓙 𝓚 𝓛 𝓜 𝓝 𝓞 𝓟 𝓠 𝓡 𝓢 𝓣 𝓤 𝓥 𝓦 𝓧 𝓨 𝓩
• Calligraphy: https://lingojam.com/FancyLetters
  𝒶 𝒷 𝒸 𝒹 𝑒 𝒻 𝑔 𝒽 𝒾 𝒿 𝓀 𝓁 𝓂 𝓃 𝑜 𝓅 𝓆 𝓇 𝓈 𝓉 𝓊 𝓋 𝓌 𝓍 𝓎 𝓏
  𝒜 𝐵 𝒞 𝒟 𝐸 𝐹 𝒢 𝐻 𝐼 𝒥 𝒦 𝐿 𝑀 𝒩 𝒪 𝒫 𝒬 𝑅 𝒮 𝒯 𝒰 𝒱 𝒲 𝒳 𝒴 𝒵
• Old English: https://lingojam.com/FancyLetters
  𝔞 𝔟 𝔠 𝔡 𝔢 𝔣 𝔤 𝔥 𝔦 𝔧 𝔨 𝔩 𝔪 𝔫 𝔬 𝔭 𝔮 𝔯 𝔰 𝔱 𝔲 𝔳 𝔴 𝔵 𝔶 𝔷
  𝔄 𝔅 ℭ 𝔇 𝔈 𝔉 𝔊 ℌ ℑ 𝔍 𝔎 𝔏 𝔐 𝔑 𝔒 𝔓 𝔔 ℜ 𝔖 𝔗 𝔘 𝔙 𝔚 𝔛 𝔜 ℨ
• Old English Bold https://lingojam.com/FancyLetters
  𝖆 𝖇 𝖈 𝖉 𝖊 𝖋 𝖌 𝖍 𝖎 𝖏 𝖐 𝖑 𝖒 𝖓 𝖔 𝖕 𝖖 𝖗 𝖘 𝖙 𝖚 𝖛 𝖜 𝖝 𝖞 𝖟
  𝕬 𝕭 𝕮 𝕯 𝕰 𝕱 𝕲 𝕳 𝕴 𝕵 𝕶 𝕷 𝕸 𝕹 𝕺 𝕻 𝕼 𝕽 𝕾 𝕿 𝖀 𝖁 𝖂 𝖃 𝖄 𝖅
• Boxed: https://lingojam.com/FancyLetters
  🅰 🅱 🅲 🅳 🅴 🅵 🅶 🅷 🅸 🅹 🅺 🅻 🅼 🅽 🅾 🅿 🆀 🆁 🆂 🆃 🆄 🆅 🆆 🆇 🆈 🆉
• Intruding Box: https://lingojam.com/FancyLetters
  a⃞    b⃞    c⃞    d⃞    e⃞    f⃞    g⃞    h⃞    i⃞    j⃞    k⃞    l⃞    m⃞    n⃞    o⃞    p⃞    q⃞    r⃞    s⃞    t⃞    u⃞    v⃞    w⃞    x⃞    y⃞    z⃞
  A⃞    B⃞    C⃞    D⃞    E⃞    F⃞    G⃞    H⃞    I⃞    J⃞    K⃞    L⃞    M⃞    N⃞    O⃞    P⃞    Q⃞    R⃞    S⃞    T⃞    U⃞    V⃞    W⃞    X⃞    Y⃞    Z⃞
• Unsourced: -Insert Website here-
  α в c ם/∂/δ є ғ ɢ н ι נ к ℓ м и σ ρ q я s т υ v ω x ץ/ч z
Text Font Websites

• Tell WT... Yeah you get it. A pretty damn good site. You'll see what I mean.
• fsymbols: This magical website has so many cool fonts and it's loaded with text symbols as well!
• Glitter Graphics: "Your #1 community for graphics, layouts, glitter text, animated backgrounds and more."
• Messletters: "Create cool fancy letters"
• Webestools: "Stylish Text Generator"
TIPS:
• Don't forget to keep your signature easy to read! Sometimes you might have to substitute a few letters of fancy font for a few letters of normal font to make it legible (especially for Cryptic Text).
• Remember, not all of these fonts will show up on a mobile device.

Image Fonts
These can be added to your signature in image form, which allows for much more font variety and creativity. ALL images created with these tools must be uploaded to an image hosting website before you use them.
For detailed instructions on how to use any of these websites, click here.


• 1001 Fonts: http://www.1001fonts.com
• Dafont: http://www.dafont.com/
• FontSpace: http://www.fontspace.com/search/?q=url
• Veer Fonts: http://www.veer.com/products/fonts/finder
• Live Typing:
  

[Zetirian]

More symbols can be found at Copy Paste Character, Graphemica, and fsymbols.



Disclaimer:
Most of these symbols do not work on mobile or older machines. Please take note of this when using them, esp for trade rules and other forums which may require a user to read things.


All Border and frame unicode is now here

Click here for all cultural based script!



Yes
☑ ✓ ✔ √

No
☐ ☒⊠ ✇ ✖ ✗ ✘ ✕ ☓

Arrows
➟ ➡ ➢ ➣ ➤ ➥ ➦ ➧ ➨ ➚ ➘ ➙ ➛ ➜ ➝ ➞ ➸ ♐ ➲ ➳ ➳ ➴ ➵ ➶ ➷ ➸ ➹ ➺ ➻ ➼ ➽ ← ↑ → ↓ ↔ ↕ ↖ ↗ ↘ ↙ ↚ ↛ ↜ ↝ ↞ ↟ ↠ ↡ ↢ ↣ ↤ ↥ ↦ ↧ ↨ ➫ ➬ ➩ ➪ ➭ ➮ ➯ ➱ ↩ ↪ ↫ ↬ ↭ ↮ ↯ ↰ ↱ ↲ ↳ ↴ ↵ ↶ ↷ ↸ ↹ ↺ ↻ ↼ ↽ ↾ ↿ ⇀ ⇁ ⇂ ⇃ ⇄ ⇅ ⇆ ⇇ ⇈ ⇉ ⇊ ⇋ ⇌ ⇍ ⇎ ⇏ ⇐ ⇑ ⇒ ⇓ ⇔ ⇕ ⇖ ⇗ ⇘ ⇙ ⇚ ⇛ ⇜ ⇝ ⇞ ⇟ ⇠ ⇡ ⇢ ⇣ ⇤ ⇥ ⇦ ⇧ ⇨ ⇩ ⇪ ⌦ ⌧ ⌫ ⤶ ⤹ ⤷ ⤴︎

Boxes
❏ ❐ ❑ ❒ ▀ ▁ ▂ ▃ ▄ ▅ ▆ ▇ ▉ ▊ ▋ █ ▌ ▍ ▎║ ▏▐ ░ ▒ ▓ ▔ ▕ ▙ ▚ ▛ ▜ ▝ ▞ ▟ ■ □ ▢ ▣ ▤ ▥ ▦ ▧ ▨ ▩ ▪ ▫ ▬ ▭ ▮ ▯ ☰ ☲ ☱ ☴ ☵ ☶ ☳ ☷  ═ ⊞ ⊟ ⊡ ▪ ▫ ▬ ▭ ▮ ▯ ▰ ▱

Cards
♤ ♧ ♡ ♢ ♠ ♣ ♥ ♦

Chess
♔ ♕ ♖ ♗ ♘ ♙ ♚ ♛ ♜ ♝ ♞ ♟

Circled
➀ ➁ ➂ ➃ ➄ ➅ ➆ ➇ ➈ ➉ ➊ ➋ ➌ ➍ ➎ ➏ ➐ ➑ ➒ ➓ Ⓐ Ⓑ Ⓒ Ⓓ Ⓔ Ⓕ Ⓖ Ⓗ Ⓘ Ⓙ Ⓚ Ⓛ Ⓜ Ⓝ Ⓞ Ⓟ Ⓠ Ⓡ Ⓢ Ⓣ Ⓤ Ⓥ Ⓦ Ⓧ Ⓨ Ⓩ ⓐ ⓑ ⓒ ⓓ ⓔ ⓕ ⓖ ⓗ ⓘ ⓙ ⓚ ⓛ ⓜ ⓝ ⓞ ⓟ ⓠ ⓡ ⓢ ⓣ ⓤ ⓥ ⓦ ⓧ ⓨ ⓩ

Compare
≂ ≃ ≄ ≅ ≆ ≇ ≈ ≉ ≊ ≋ ≌ ≍ ≎ ≏ ≐ ≑ ≒ ≓ ≔ ≕ ≖ ≗ ≘ ≙ ≚ ≛ ≜ ≝ ≞ ≟ ≠ ≡ ≢ ≣ ≤ ≥ ≦ ≧ ≨ ≩ ⊰ ⊱ ⋛ ⋚ ≪ ≫ ≭ ≮ ≯ ≰ ≱ ≲ ≳ ≴ ≵ ≶ ≷ ≸ ≹ ≺ ≻ ≼ ≽ ≾ ≿ ⊀ ⊁ ⊂ ⊃ ⊄ ⊅ ⊆ ⊇ ⊈ ⊉ ⊊ ⊋ ⊏ ⊐ ⊑ ⊒ ⋖ ⋗ ⋘ ⋙ ⋜ ⋝ ⋞ ⋟ ⋠ ⋡ ⋢ ⋣ ⋤ ⋥ ⋦ ⋧ ⋨ ⋩ ⋪ ⋫ ⋬ ⋭ ︻ ︼ ︽ ︾ 〈 〉 ︿ ﹀ ∩ ∪ ﹁ ﹂ ﹃ ﹄﹝ ﹞ ＜ ＞ ≦ ≧ ﹤ ﹥ 「 」 ︵ ︶ ︷ ︸ ︹ ︺〔 〕 【 】《 》 （ ） ｛ ｝ ﹙ ﹚ 『 』 ﹛ ﹜╳ ＋ － ﹢ × ÷ ＝ ≠ ≒ ∞ ˇ ± √ ⊥ ∠ ∟ ⊿ ㏒


Copyrights
™ ℠ © ® ℗

Cross
☩ ☨ ☦ ✞ ✛ ✜ ✝ ✙ ✠ ✚ † ‡

Emoji Faces
ಠ_ಠ | ◕ ◡ ◕ | °__° | ಥ__ಥ | (-`ω´- ) | (●ゝω)ノヽ(∀＜●) | ⊙▂⊙ | ⊙o⊙ | ⊙︿⊙ | ⊙ω⊙ | ⊙△⊙ | ⊙▽⊙ | (◡_◡) | (◕-◕) | (◕o◕) | (∩_∩)

Flower
✽ ✾ ✿ ❁ ❃ ❋ ❀

Functional
␛ ␡ ␚ ␟ ␘ ␠ ␤ ␋ ␌ ␍ ␎ ␏ ␐ ␑ ␒ ␓ ␔ ␕ ␖ ␗ ␙ ␜ ␝ ␞

Gender
⚢ ⚣ ⚤ ⚥ ⚦ ⚧ ⚨ ⚩

Hand
☜ ☞☝ ☚ ☛ ☟ ✍ ✌

Love
❤ ❥ ❦ ❧ ☙ ♥ ۵ 웃 유 ღ ♡

Marriage (And Death)
⚬ ⚭ ⚮ ⚯ ⚰ ⚱

Mathematic based
≡ ≢ ≣ ≤ ≥ ≦ ≧ ≨ ≩ ≪ ≫ ≭ ≮ ≯ ≰ ≱ ≲ ≳ ≴ ≵ ≶ ≷ ≸ ≹ ≺ ≻ ≼ ≽ ≾ ≿ ⋖ ⋗ ⋘ ⋙ ⋚ ⋛ ⋜ ⋝ ⋞ ⋟ ⋠ ⋡ ⋢ ⋣ ⋤ ⋥ ⋦ ⋧ ⋨ ⋩ ⋪ ⋫ ⋬ ⋭ ︻ ︼ ︽ ︾ 〈 〉 ︿ ﹀ ∩ ∪ ﹁ ﹂ ﹃ ﹄﹝ ﹞ ＜ ＞ ≦ ≧ ﹤ ﹥ 「 」 ︵ ︶ ︷ ︸ ︹ ︺〔 〕 【 】《 》 （ ） ｛ ｝ ﹙ ﹚ 『 』 ﹛ ﹜╳ ＋ － ﹢ × ÷ ＝ ≠ ≒ ∞ ˇ ± √ ⊥ ∠ ∟ ⊿ ㏒

Miscellaneous
┄ ┅ ┆ ┇ ┈ ┉ ┊ ┋ ⋮ ⋯ ⋰ ⋱
─ ━ │ ┃┌ ┐ ┍ ┑ ┎ ┒ ┏ ┓ └ ┘ ┕ ┙ ┖ ┚ ┗ ┛
┞ ┟ ┢ ┡ ┦ ┧ ┩ ┪
┣ ┫┝ ┥┠ ┨├ ┤
┬ ┭ ┮ ┯ ┰ ┱ ┲ ┳ ┴ ┵ ┶ ┷ ┸ ┹ ┺ ┻ ┼ ┽ ┾ ┿
╀ ╁ ╂ ╃ ╄ ╅ ╆ ╇ ╈ ╉ ╊ ╋ ╌ ╍ ╎ ╏
═ ║ ╒ ╓ ╔ ╕ ╖ ╗ ╘ ╙ ╚ ╛ ╜ ╝ ╞ ╟
╠ ╡ ╢ ╣ ╤ ╥ ╦ ╧ ╨ ╩ ╪ ╫ ╬
╭ ╮ ╯ ╰ ╱ ╲ ╳ ╴ ╵ ╶ ╷ ╸ ╹ ╺ ╻
⊢ ⊣ ⊤ ⊥ ⊦ ⊧ ⊨ ⊩ ⊪ ⊫ ⊬ ⊭ ⊮ ⊯
⊶ ⊷ ⊸ ⊹ ⊺ ⊻ ⊼ ⊽ ⊾ ⊿
⋀ ⋁ ⋂ ⋃ ⋄ ⋅ ⋆ ⋇ ⋈ ⋉ ⋊ ⋋ ⋌ ⋍
⋎ ⋏ ⋐ ⋑ ⋒ ⋓ ⋔ ☊ ☋ ☌ ☍

Money
€ £ Ұ ₴ $ ₰ ¢ ₤ ¥ ₳ ₲ ₪ ₵ 元 ₣ ₱ ฿ ¤ ₡ ₮ ₭ ₩ ރ 円 ₢ ₥ ₫ ₦ z ł ﷼ ₠ ₧ ₯ ₨ K č र

Music
∮ - ∭ - ∯ - ∰ - ∱ - ∲ - ∳
♪ ♫ ♩ ♬ ♭ ♮ ♯ ° ø

Phone
✆ ✉ ☎ ☏

Planets:
☉ Sun, ☽ ☾ ● ◯ Moon, ☿ Mercury, ♀ Venus, ⊕ ♁ Earth, ♂ Mars, ♃ Jupiter, ♄ Saturn, ♅ Uranus, ♆ Neptune, ♇ Pluto, ☄ Comet

Question
❢ ❣ ⁇ ‼ ‽ ⁈ ¿ ¡ ⁉ ؟ ? Ɂ ɂ ʡ ʢ ʔ ʕ ʖ ˀ ˁ

Quotes
❝ ❞ « » ‟ ‹ › ⟨ ⟩ „ ′ ‵ ‘ ’ ‚ ‛ “ ” ‷ ‴ ‶ ″

Ratios
⅟ ½ ⅓ ⅕ ⅙ ⅛ ⅔ ⅖ ⅚ ⅜ ¾ ⅗ ⅝ ⅞ ⅘

Recycling
♲ ♳ ♴ ♵ ♶ ♷ ♸ ♹ ♺ ♻ ♼ ♽

Religion/Politics
☥ ☦ ☯ ☧ ☬ ☫ ☸ ✡ ♁ ✙ ♆ ☭ ☪ ☮ ✌ ☠ ☣ ☤

Roman Numerals
Ⅰ Ⅱ Ⅲ Ⅳ Ⅴ Ⅵ Ⅶ Ⅷ Ⅸ Ⅹ Ⅺ Ⅻ Ⅼ Ⅽ Ⅾ Ⅿ ⅰ ⅱ ⅲ ⅳ ⅴ ⅵ ⅶ ⅷ ⅸ ⅹ ⅺ ⅻ ⅼ ⅽ ⅾ ⅿ

Round
◉ ○ ◌ ◍ ◎ ● ◐ ◑ ◒ ◓ ◔ ◕ ◖ ◗ ❂ ☢ ⊗ ⊙ ◘ ◙ ◍ Θ ๑ ㊝ • ⊖ ⊘ ⊛ ⊜ ⊝ ◜ ◝ ◞ ◟֍ ֎

Scissors
✁ ✂ ✃ ✄

Smileys
☹ ☺ ☻ ت ヅ ツ ッ シ Ü ϡ ﭢ

Sport
⚾︎ ⚽︎

Stars
⋆ ✢ ✣ ✤ ✥❖ ❋ ◇ ◆ ✦ ✧ ✩ ☆ ✪ ✫ ✬ ✭ ✮ ✯ ✰ ✡ ★ ✱ ✲ ✳ ✴ ❂ ✵ ✶ ✷ ✸ ✹ ✺ ✻ ✼ ❄ ❅ ❆ ❇ ❈ ❉ ❊ ۞ ＊
⌘ ⌖ ⭐︎ ❊ ✮ ❉ ✱ ✲ ✾ ❃

Triangles
▲ ▼ ◄ ► ▶ ◀ ◣ ◢ ◥ ▼ ◤ ◥ ▴ ▾ ◂ ▸ △ ▽ ◁ ▷ ⊿ ▻ ◅ ▵ ▹ ◃ ▿ ⊲ ⊳ ⊴ ⊵

Typesetting
＃ ＠ ＆￥ ۰ ｡ ﾟʒ ɻ

Utilities
☘ ♾ ♿ ⚒ ⚓ ⚔ ⚕ ⚖ ⚗ ⚘ ⚙ ⚚ ⚛ ⚜ ✈︎ ⚓︎ ✄

Writing
✐ ✎ ✏ ✑ ✒ ✍ ✉ ⌨ 🃟

Weather
☼ ☀ ☁ ☂ ☃ ☄ ☾ ☽ ☇ ☈ ☉ ℃ ℉ ° ❅❄❆ ✺ ϟ ☡ ♨

Winged Symbols
༺༒༻ Ƹ̵̡Ӝ̵̨̄Ʒ

Zodiac
♈ ♉ ♊ ♋ ♌ ♍ ♎ ♏ ♐ ♑ ♒ ♓ ⛎
♈︎ ♊︎ ♋︎ ♌︎ ♍︎ ♎︎ ♏︎ ♐︎ ♑︎ ♒︎ ♓︎
Note: Missing Taurus and Sepentarius. Will get those soon.



Credit for the vast majority of the "unicode" section goes to Electric Forest.

[Zetirian]

Of The Falls does not have Photoshop or Photobucket [While Zey does but that is beside the point], and you don't have to have them either.
Here's how to get by with the bare minimum and still look like a pro.

Table of Contents Within This Post:
In a rush? Look through the following titles and scroll to the one that best suits your needs.

• Image URLs
• Art Theft
• Image Hosting
• Enhancing Pictures
  x⋄ Image Editors
  x⋄ Photoshop Replicas
  x⋄ Extra Tools
  x⋄ GIF Editors
• Google Search by Image
• Image Symbols [Free to use!]
  
  • Button Based
  • Text Based
  • Gif Based
  • Non-Gif based

Image URLs:

Every image on the internet has a URL. This is what you'll have to put between the [img ][/img] code.

Obtaining an Image's URL:
1. right click the image
2. click "copy image location"
3. paste the URL between the [img ][/img] code in your post
(If you're trying to do this on an Apple product, I'm afraid I can't help you. Sorry!
Your best bet is to find a way to "view image" and then copy the URL that appears up top.)

• DO NOT grab the URL from a file on your computer.
• If it looks anything like "C:\Users\Smith\Desktop\Diana\Pictures" then it will not work.
• DO upload your image from your computer to an image hosting website.
• For more info on good image hosting websites, scroll down in this post.

Obtaining the URL while on Google images: (or any other image search engine)
• DO NOT grab the URL off of the actual Google Images site. That will give you the wrong URL.
• DO click "go to website" or "view image" and grab the URL from there.

Art theft

Chicken Smoothie has a strict art theft policy and for good reason. Grabbing an image off of Google could be considered art theft on Chicken Smoothie!
Here are the official CS rules regarding art theft.
Here and here are guides that tell you how to use images without accidentally committing art theft.
Please note that there is a few stipulation which come with image usage!
Permission and credit is a huge part of CS rules, if what you use doesn't belong to you, please credit!

Image Hosting:

Once you've edited an image, you need to put it on an image
host so that you can get a working url that will last you forever.
For detailed instructions on how to use any of these hosts, click here.

• Imgur http://imgur.com
  
• TinyPic http://tinypic.com
• Postimage.org http://postimage.org Read this link for more info.
• Image Shack https://imageshack.com/signup
• Gfycat (for GIFs only) http://www.gfycat.com
  You can also use the "Fetch a URL" option to turn YouTube videos into GIFs!

Enhancing Pictures:

Thinking of buying Photoshop? Don't. Here are some resources that will help you get the same effects.
For a guide on how to download Adobe's free Photoshop, go here.
**For all of these methods, you will have to save the finished product to an image hosting website.

Image Editors:

Basic Resizers:

For detailed instructions on how to use the first two resizers, click here.

• PNG Resizer http://images.my-addr.com/resize_png_on ... or_web.php
  
• GIF Resizer http://ezgif.com/resize
• GIF/PNG/JPEG, resize/crop/rotate http://resizeimage.net (thank you, contributor Bev)

Multipurpose Editors:

The following resources all have the following basic functions:
crop, resize, rotate, recolor, add text/glitter text, add stickers


• Befunky http://www.befunky.com/create
  Preview: 1 | 2 | 3 | 4 | 5 | 6 | 7
  .
• FotoFlexer http://fotoflexer.com/app
  Preview: Home Page | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8
  .
• LunaPic http://www180.lunapic.com/editor
  Check out LunaPic's animation effects!
  .
• Online Image Editor (OIE) Compatible with GIFs! http://www.online-image-editor.com
  Preview: Home Page | 1 | 2 | 3
  .
• PicMonkey http://www.picmonkey.com
  Especially good for photo edits.

Photoshop Replicas:
You will need basic Photoshop knowledge to use these resources. The following editors do not support gifs.

• Pixlr Photo Editor https://pixlr.com/editor
  Related Tutorials: The Pixlr Project
• Sumo Paint http://www.sumoware.com/home

Extra Tools:

• Clipping Magic https://clippingmagic.com
  Great tool designed especially for removing image backgrounds.[/size]
  .
• Grumpy Sig Bumpers http://sig.grumpybumpers.com
  A rotating random image is an image that changes every time you hit "refresh" (F5). Create one here!
  .
• Quick Picture Tools - Rounded Corners http://www.quickpicturetools.com/en/rounded_corners
  Round one or more corners of a JPG/PNG image.
  .
• RoundPic http://www.roundpic.com
  Round one or more corners of a JPG/PNG image.
  .
• Microsoft Word 2010 (and all subsequent updates)
  Great for those times when your internet is too choppy to access any online methods.
  Some computers (besides Macs) come already equipped with this program.
  The circled areas in this image contain all of the basic things one might need to modify a picture's general appearance.

Gif Editors:

• BlogGif http://en.bloggif.com
  Resize, remake, add effects, create and more!
  .
• EZGif http://ezgif.com
  Crop, resize, optimize, recolor, speed up, slow down, and more.
  .
• GifGear http://gifgear.com
  Create or edit your gif here.
  .
• GIFMaker http://gifmaker.me
  Create your own gif here.
  .
• LooGix http://www.loogix.com
  Create gifs or add effects to your current gifs.

Google "Search by image":

I use this every single time I make a signature, without fail.

This tool can help you find the perfect images for your forum signature.
Enter in an image's URL or upload one straight from your computer to find visually similar images on the web.

"Search by image" options can also be found here. To me, this second method is most convenient.

Image Symbols:
Here is a list of all resourced image symbols that are free to use. The button based group below requires for the button to link back to the thread where you got it from. Please give credit where credit is due.

Button Based
*Disclaimer: Buttons on show on this thread are ones I connect to the most and am using these ones for display purposes only.*
Want to create your own button, use this site!


Christmas Icons [By Gods]





Various icons [Source and credit to original source here]

This site hosts various icons. These include the following:


There are also animated ones. Click the link above to find more!

Various Buttons [Thread to the full list is here]
[zodiacs, alignment, mtbi personality types, fandoms, countries, religions, homestuck stuff, holidays & stuff, music]


Human culture [Thread to the full list is here]
[Tv Shows, Books/Musicals, Instruments, Music, Video Games, Various CS links/pms, Hobbies, Miscellaneous]


Youtubers [A thread dedicated to this here]


LGBTIQ+ Buttons [The thread dedicated to this is here]



Text Based
A full list of these can be found here: Link

Nymphette font [By Lauren Thompson]
Full size image of all text based symbols from this font

Bergamon Ornaments font [By Emily Lime Design]
Full size image of all text based symbols from this font

Laurus Nobilis font [By Woodcutter]
Full size image of all text based symbols from this font

Vintage Decorative Signs font [By Sughayer Foundry]
Full size image of all text based symbols from this font

Gif Based
Crown [By gods]


Hearts [By gods]


Music gifs are found here. [By Yukoki]


Random Star Gif [By Me]


Non-Gif Based

Bows [By gods]


Wings [By gods]


Crowns [By gods]

[Zetirian]

This has the potential to be a very confusing lesson. I will try my best to keep it as simple as possible.
Be sure to keep an eye on the code boxes that I provide.

If you want to make a signature with more than 3 columns, try using this method instead.

As explained in Basics of BBCode, the left, right, and center buttons will align your text to the left, right, and center.

✔ DO write the code as "left column, right column, center column" with NO SPACES in between.
Simplified example: [left ]GREEN[/left][right ]PURPLE[/right][center ]BLUE[/center]

Code: Select all

[left][img]http://i.imgur.com/gBM2DNe.jpg[/img][/left][right][img]http://i.imgur.com/PuzwdBK.jpg[/img][/right][center][img]http://i.imgur.com/3ALGez6.jpg[/img][/center]

✘ DON'T Write it as "left column, center column, right column", or else this happens:

Code: Select all

[left][img]http://i.imgur.com/gBM2DNe.jpg[/img][/left][center][img]http://i.imgur.com/3ALGez6.jpg[/img][/center][right][img]http://i.imgur.com/PuzwdBK.jpg[/img][/right]

So you can't put those last two columns in the order that you'll see them. Don't ask me why. That's just how it works. *shrug*

✘ DON'T forget to fit the text to the column, or else this happens.
Ew, what a mess. The left column was too wide, so it pushed the center column over and pushed the right column out of line.

GREEN

greengreengreengreengreengreengreengreengreengreengreen

PURPLE

purplepurplepurplepurplepurplepurplepurplepurplepurplepurplepurple

BLUE

blueblueblueblueblueblueblue

Code: Select all

[left]GREEN
[img]http://i.imgur.com/gBM2DNe.jpg[/img]
greengreengreengreengreengreengreengreengreengreengreen[/left][right]PURPLE
[img]http://i.imgur.com/PuzwdBK.jpg[/img]
purplepurplepurplepurplepurplepurplepurplepurplepurplepurplepurple[/right][center]BLUE
[img]http://i.imgur.com/3ALGez6.jpg[/img]
blueblueblueblueblueblueblue[/center]

✔ DO take care to fit the text into the column. Tah dah!

GREEN

greengreengreengreen
greengreengreengreen
greengreengreen

PURPLE

purplepurplepurple
purplepurplepurple
purplepurplepurple
purplepurple

BLUE

blueblueblue
blueblueblueblue

Code: Select all

[left]GREEN
[img]http://i.imgur.com/gBM2DNe.jpg[/img]
greengreengreengreen
greengreengreengreen
greengreengreen[/left][right]PURPLE
[img]http://i.imgur.com/PuzwdBK.jpg[/img]
purplepurplepurple
purplepurplepurple
purplepurplepurple
purplepurple[/right][center]BLUE
[img]http://i.imgur.com/3ALGez6.jpg[/img]
blueblueblue
blueblueblueblue[/center]

✘ DON'T Put spaces or extra lines between your column codes or it will push your columns down.

Simplified example of what you should do:
[left ]GREEN[/left][right ]PURPLE[/right][center ]BLUE[/center]

Simplified example of what NOT to do:
[left ]GREEN[/left]
[right ]PURPLE[/right]
[center ]BLUE[/center]

If you add spaces/lines between columns, it turns out like this:

GREEN

greengreengreengreen
greengreengreengreen
greengreengreen

PURPLE

purplepurplepurple
purplepurplepurple
purplepurplepurple
purplepurple

BLUE

blueblueblue
blueblueblueblue

Code: Select all

[left]GREEN
[img]http://i.imgur.com/gBM2DNe.jpg[/img]
greengreengreengreen
greengreengreengreen
greengreengreen[/left]

[right]PURPLE
[img]http://i.imgur.com/PuzwdBK.jpg[/img]
purplepurplepurple
purplepurplepurple
purplepurplepurple
purplepurple[/right]

[center]BLUE
[img]http://i.imgur.com/3ALGez6.jpg[/img]
blueblueblue
blueblueblueblue[/center]

Even if something is in the left or right column, you can still center the text and pictures within that column.

Recall how [left ]GREEN[/left][right ]PURPLE[/right][center ]BLUE[/center] made our columns.
Now, putting a "center" code within the existing column code will center it.
Simplified example: [left ][center ]GREEN[/center][/left][right ][center ]PURPLE[/center][/right][center ]BLUE[/center]

GREEN

greengreengreengreen
greengreengreengreen
greengreengreen

PURPLE

purplepurplepurple
purplepurplepurple
purplepurple

BLUE

blueblueblue
blueblueblueblue

Code: Select all

[left][center]GREEN
[img]http://i.imgur.com/gBM2DNe.jpg[/img]
greengreengreengreen
greengreengreengreen
greengreengreen[/center][/left][right][center]PURPLE
[img]http://i.imgur.com/PuzwdBK.jpg[/img]
purplepurplepurple
purplepurplepurple
purplepurple[/center][/right][center]BLUE
[img]http://i.imgur.com/3ALGez6.jpg[/img]
blueblueblue
blueblueblueblue[/center]

[Zetirian]

Your columns don't have to stay all spread out like that. Here's how to make them cozy up next to each other.

To make all columns hug the left side, simply put them in order and place the [left ][/left] codes around each of them.
Simplified Example: [left ]GREEN[/left][left ]BLUE[/left][left ]PURPLE[/left]
Tah dah!

GREEN

greengreengreen
greengreengreen
greengreengreen

BLUE

blueblueblue
blueblueblueblue

PURPLE

purplepurplepurple
purplepurplepurple
purplepurplepurple

......................................................................................................................................

Code: Select all

[left]GREEN
[img]http://i.imgur.com/gBM2DNe.jpg[/img]
greengreengreengreen
greengreengreengreen
greengreengreen[/left][left]BLUE
[img]http://i.imgur.com/3ALGez6.jpg[/img]
blueblueblue
blueblueblueblue[/left][left]PURPLE
[img]http://i.imgur.com/PuzwdBK.jpg[/img]
purplepurplepurple
purplepurplepurple
purplepurplepurple[/left]

Take note of this method's quirks. I placed an unfortunate sentence below our GreenBluePurple signature code. Because of all the extra space this technique frees up, the unfortunate sentence gets moved up next to the signature to fill the space.

✔ Pros: You now have a fourth column to fill with more stuff!
✘ Cons: If you don't want this to happen, you have to put a long line of something underneath to act as
a wall between the signature and everything else. Can you spot where my "wall" is? I made it out of dots.
You can make this wall invisible using the [color=transparent ][ /color] color code if you don't want it to be seen.

GREEN

greengreengreengreen
greengreengreengreen
greengreengreen

BLUE

blueblueblue
blueblueblueblue

PURPLE

purplepurplepurple
purplepurplepurple
purplepurplepurple

Help me, I'm stuck!

......................................................................................................................................

Code: Select all

[left]GREEN
[img]http://i.imgur.com/gBM2DNe.jpg[/img]
greengreengreengreen
greengreengreengreen
greengreengreen[/left][left]BLUE
[img]http://i.imgur.com/3ALGez6.jpg[/img]
blueblueblue
blueblueblueblue[/left][left]PURPLE
[img]http://i.imgur.com/PuzwdBK.jpg[/img]
purplepurplepurple
purplepurplepurple
purplepurplepurple[/left]

Help me, I'm stuck!

Special thanks to contributor Lya for showing me a simpler way to do this column method.

✘ DON'T Put spaces or extra lines between your column codes or it will push your columns down.

Simplified example of what you should do:
[left ]GREEN[/left][left ]BLUE[/left][left ]PURPLE[/left]

Simplified example of what NOT to do:
[left ]GREEN[/left]
[left ]BLUE[/left]
[left ]PURPLE[/left]

If you add spaces/lines between columns, it turns out like this:

GREEN

greengreengreen
greengreengreen
greengreengreen

BLUE

blueblueblueblue
blueblueblueblue
blueblueblueblue

PURPLE

purplepurplepurple
purplepurplepurple
purplepurplepurple

......................................................................................................................................

Code: Select all

[left]GREEN
[img]http://i.imgur.com/gBM2DNe.jpg[/img]
greengreengreengreen
greengreengreengreen
greengreengreen[/left]

[left]BLUE
[img]http://i.imgur.com/3ALGez6.jpg[/img]
blueblueblueblue
blueblueblueblue
blueblueblueblue[/left]

[left]PURPLE
[img]http://i.imgur.com/PuzwdBK.jpg[/img]
purplepurplepurple
purplepurplepurple
purplepurplepurple[/left]

[Zetirian]

In order to make a column fit in the column, this requires some skill with the techniques above.

✔ DO use the Moving all columns to hug the left side technique above as set up.
Simplified example: [left ]GREEN[/left][left ]BLUE[/left][left ]PURPLE[/left]

GREEN

Code: Select all

[left]GREEN
[img]http://i.imgur.com/gBM2DNe.jpg[/img][/left]

✘ DON'T use the Making multiple columns with left right and center commands as this tutorial does not follow this method.

This technique is more effective by make the columns wide enough so the double columns can be seen. I am going to be adding the double columns within the green column below. To do this, I repeated the green image 3 times close to each other. Chances are if you do this, then you will have an image to fit the whole length.

GREEN

Code: Select all

[left]GREEN
[img]http://i.imgur.com/gBM2DNe.jpg[/img][img]http://i.imgur.com/gBM2DNe.jpg[/img][img]http://i.imgur.com/gBM2DNe.jpg[/img][/left]

Now to make the columns!

✔ DO use right alignment commands within a left command in order to ensure that the columns within the columns are made.
Simplified example: [left ][ right]Green[/right ][right ]Blue[/ right][right ]Purple[/ right][/ left]

*Note, the image is there in the code to show that it is a column within a column.

Green
x
x

Blue
x
x

Purple
x
x

Code: Select all

[left][img]http://i.imgur.com/gBM2DNe.jpg[/img][img]http://i.imgur.com/gBM2DNe.jpg[/img][img]http://i.imgur.com/gBM2DNe.jpg[/img]
[color=green][right]Green
x
x[/right][/color][color=blue][right]Blue
x
x[/right][/color][color=purple][right]Purple
x
x[/right][/color][/left]

And there you have it, you have your columns within a columns! Remember to close off all of the alignment commands to ensure the coding works!

As you can see, even though the green column was put first, it was the last column from left to right. When you are working with Right alignments, remember that the first right command will always be the first one to the right!

Green
Part 1
Part 1

Blue
Part 2
Part 2

Purple
Part 3
Part 3

Code: Select all

[left][img]http://i.imgur.com/gBM2DNe.jpg[/img][img]http://i.imgur.com/gBM2DNe.jpg[/img][img]http://i.imgur.com/gBM2DNe.jpg[/img]
[color=green][right]Green
Part 1
Part 1[/right][/color][color=blue][right]Blue
Part 2
Part 2[/right][/color][color=purple][right]Purple
Part 3
Part 3[/right][/color][/left]

And there you have it!

[Zetirian]

Click the pictures to be taken to the corresponding tutorial.
Thank you to all of the contributors who have offered up these fantastic pieces! Keep 'em coming!

Tutorials currently present/ Table of contents for this post.
A list of tutorials currently here. There have been many created in the past, however have not been linked here. If you want it linked here, please PM me

Borders:

• White border around avatar
  
• Weave borders through images [Pixlr / Photoshop]
• Stamp creation
Gifs:

• How to make your own gif (without PTS)
• How to do textual Gif Writing
• Gif Overlays [OIE / Photoshop]
• Round Only 2 Corners of a GIF [OIE]
• Cutting a Gif [Gimp/OIE]
Still Image:

• Silhouettes [Pixlr / Gimp]
• Cutting Images into Complex Shapes [Pixlr / OIE]
• Removing Image Background [OIE / Pixlr / Gimp]
• How to make an image more clear / less lossy [waifu2x]
Forum based

• Creating a rotating image
• Removing a gap between images
• CS Pet name tag removal
Coding based

• Doing a Drop Cap on the forums

Pixlr Tools

• Eraser by Enuri
• Lasso by Tadashi Hamada
• Layer Styles by cherrystarluv
• Text by Katsuko

Borders

White border avatar
(By Insomnia)

Weave Borders Through Images:

Come see what Of The Falls and Zetirian have to say about the
differences between making a bad border weave and a good border weave.

Pixlr
(by rosalynd)

Photoshop
(by Zetirian)

x

Stamp creation

(By oliver,)

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

Gifs
Make your own gifs without photoshop!

By Default

Textual Gif writing

By Zetirian

GIF Overlays:

Layer gifs in a single image.
Experiencing technical difficulties with your overlay? Click here!


Online Image Editor
(and some Pixlr)
(by chrome)

Photoshop

(by Zetirian)

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

Round Only 2 Corners of a GIF:

Online Image Editor
(by Katsuko)

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
Greyscaling a gif

(By Ahsoka)

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

Cutting a Gif

Gimp
(by gods)

OIE
(by jyushimatsu.)

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

Still image
Silhouettes:

Make an image one solid color.


Pixlr
(by kaoru.)

GIMP
(by gods)

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

Cut Images into Complex Shapes:

★ For basic shapes, try the "Cut Shapes" tool in Online Image Editor.


Pixlr
(by cherrystarluv)


OIE and Pixlr
(by default)

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

Remove Image Backgrounds:

Make any image have a transparent background.


OIE or Pixlr
(by Of The Falls)

GIMP
(by gods)

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

Make an image high quality:

Remove any lossiness in an image


waifu2x
(by kazuichi)

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

Forum Based

Creating a rotating image
(by Zetirian)

Removing a gap from inbetween a cut image.

CS Forums
(by Zetirian)

Removing name from CS pets
(By 100 minus 1)

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

Coding based
Doing a drop cap on the forums.
CS Forums
(by Zetirian)

▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬(ＨＡＳ ＴＥＥＴＨ)▬▬▬▬▬

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

Code Boxes Explained.

(by iinsomnia)

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


Code: Select all

codecodecodecodecodecodecodecode
codecodecodecodecodecodecodecode
codecodecodecodecodecodecodecode