Ｄｉｇｉｔａｌｌｙ Ｄｉｓｔｉｎｃｔ: Signature Tutorial Thread

[Falls]

NEW TOPIC HERE

.

Forum Signature Tutorial Thread
created by Falls

Staff: ZeyDaan, chrome, Bev
Special thanks to our contributors!

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

General:

• Do not ask coding questions that are answered on the front page.
  Look around or visit the Table of Contents instead.
• If you want your tutorial to be considered for a spot on the front page, PM ZeyDaan.
  
  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.
  
  For sig opinions, find "Signature Respect" or "Rate the Signature" here, or join the 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!

[Falls]

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

• Basics of BBCode
• Text Manipulation
• Image Manipulation
• Making Multiple Columns
  xl○ Introduction
  xl○ Centering Text in a Column
  xl○ Moving Columns to the Left
• Supplementary Tutorials
• Apply Your Knowledge

FAQ

• Sig Size? 700 x 400 pixels.
• GIF Troubles? Click here.
• I'm not sure if [fill in the blank] is in your tutorial yet.
  Type ctrl + F and enter a keyword to search for that thing on this page.
• I'm not sure if anyone has posted about [fill in the blank] before.
  Use the search bar to see if any keywords about that topic have been posted before.

Borders

• Border Weaving ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ Use the weaving tutorials.
• Line Borders ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ Use methods taught in the weaving tutorials.
• Regular Borders ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ Use OIE.
• Text Borders ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ Use text symbols.

Images

• Crop/Resize/Flip/Edit ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ Here, under "Enhancing Pictures".
• GIF Overlays ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ Use the overlay tutorials.
• Putting Images Online ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ Here, under "Image Hosting".
• Round Corners ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ OIE, RoundPic, Quick Pic, or 2 corner GIF tutorial.
• Reshape Images ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ Use OIE or the complex shapes tutorials.
• Transparent Backgrounds ▪ ▪ ▪ ▪ ▪ ▪ Use the transparency tutorials.

Stamps

• How to Make ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ Use image overlay to combine border with image.
• Templates/Outlines ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ Click Here

Text

• Picture Text ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ Here, under "Fonts - Image Fonts"
• Text Fonts ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ Here, under "Fonts".
• Text in Image ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ Use OIE or Pixlr

[Falls]

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 ]this[/b] creates this

i: Italicizes your words

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

u: Underlines your words

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

Quote: Puts your words into a quote box

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

this

Code: Makes your code visible

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

Code: Select all

[i]this[/i]

instead of this

**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]this[/url] creates this

Drop-down list: Changes text size

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

Font colour: Changes font colour

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

center: Centers text

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

this

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 ]this[/right] creates (look way over to the right to see this one.)

this

strike: Strikes a line through your text

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

And that's it!

Whew! You've muscled your way through the basics! High-fives all around!
Remember, if these instructions weren't clear, you can always take a look at the mods' BBCode tutorial.

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?

[Falls]

Here we will learn Of The Fall's tricks regarding text colors, fonts and symbols.

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!

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.
  (Special thanks to contributor Levi Ackerman for showing us this resource.)
  
• Color Palette Generator
  Generate any image with a url into a color palette with color codes that you can use on CS.
  (Special thanks to contributor Angelic Nymphia for showing us this resource.)
• Colors from Image
  Upload a picture and click anywhere to get the specific color code from that area.

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.


• 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
  Ａ Ｂ Ｃ Ｄ Ｅ Ｆ Ｇ Ｈ Ｉ Ｊ Ｋ Ｌ Ｍ Ｎ Ｏ Ｐ Ｑ Ｒ Ｓ Ｔ Ｕ Ｖ Ｗ Ｘ Ｙ Ｚ
  ａ ｂ ｃ ｄ ｅ ｆ ｇ ｈ ｉ ｊ ｋ ｌ ｍ ｎ ｏ ｐ ｑ ｒ ｓ ｔ ｕ ｖ ｗ ｘ ｙ ｚ
Text Font Websites

• 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
  (Special thanks to contibutor ~ Ghastly Chaos ~ for showing us this resource.)
• FontSpace: http://www.fontspace.com/search/?q=url
  (Special thanks to contributor Splint for showing us this resource.)
• Veer Fonts: http://www.veer.com/products/fonts/finder
  (Special thanks to Queen Of The Kings for showing us this resource.)
• Live Typing:
  

Symbols:

More symbols can be found at Copy Paste Character (thank you, Erised), Graphemica, and fsymbols.

Borders and Frames
Special thanks to Sernana. for giving me the code for the following frame:

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

║
║
║
║
║
║
║
INSERT TEXT HERE
║
║
║
║
║
║
║
╚═════════════╝

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


Code: Select all

[left][size=200]╔═════════════╗[/size]
[right][size=200]║
║
║
║
║
║
║[/size][/right][right]INSERT TEXT HERE[/right][size=200]║
║
║
║
║
║
║[/size]
[size=200]╚═════════════╝[/size][/left]

SECRET MESSAGE TAH DAH

......................................................................................................
Credit for the remainder of the "Borders and Frames" section goes to Ｃａｎｄｉｅｄ Ｓｎｏｗ.


❛xxxxxxxxxxx❜


Code: Select all

❛[color=transparent]xxxxxxxxxxx[/color]❜


❝xxxxxxxxxxx❞


Code: Select all

❝[color=transparent]xxxxxxxxxxx[/color]❞


◤xxxxxxxxxxx◥
◣xxxxxxxxxxx◢


Code: Select all

◤[color=transparent]xxxxxxxxxxx[/color]◥
◣[color=transparent]xxxxxxxxxxx[/color]◢


╔xxxxxxxxxxx╗
╚xxxxxxxxxxx╝


Code: Select all

╔[color=transparent]xxxxxxxxxxx[/color]╗
╚[color=transparent]xxxxxxxxxxx[/color]╝


┏xxxxxxxxxxx┓
┖xxxxxxxxxxx┚


Code: Select all

┏[color=transparent]xxxxxxxxxxx[/color]┓
┖[color=transparent]xxxxxxxxxxx[/color]┚


╭xxxxxxxxxxx╮
╰xxxxxxxxxxx╯


Code: Select all

╭[color=transparent]xxxxxxxxxxx[/color]╮
╰[color=transparent]xxxxxxxxxxx[/color]╯

【】 〖〗 『』

▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄
╔══════════════╗

╚══════════════╝
▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪
▬▬▬▬▬▬▬▬▬▬▬▬▬
▰ ▰ ▰ ▰ ▰ ▰ ▰ ▰ ▰ ▰ ▰
▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀
▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁
▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂
▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃
▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄
▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅
▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆
▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇
▊▊▊▊▊▊▊▊▊▊▊▊▊▊▊▊▊▊▊▊
████████████████████
▏▏▏▏▏▏▏▏▏▏▏▏▏▏
░░░░░░░░░░░░░░░░░░░░
▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓

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


Yes
☑ ✓ ✔ √

No
☐ ☒⊠ ✇ ✖ ✗ ✘ ✕ ☓

Arabic [x]
ـأ‎ ب‎‎ ﺙ‎ ﺝ‎ ـجـ‎ ﺡ‎‎ حـ‎‎‎ خـ‎‎ ﺩ‎‎ ﺭ‎‎ ﺱ‎ شـ‎ ص‎ صـ‎ ط‎ ظ‎ ع‎ ـع‎ ـعـ‎ عـ‎ ك‎‎ كـ‎ م‎ ـمـ‎ ه‎ ـه‎ ـهـ‎ هـ‎ و‎ ة‎ ى‎ ٭ ۝‎ ۞‎ ۩‎ ﴾ ﴿

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

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

Cards
♤ ♧ ♡ ♢ ♠ ♣ ♥ ♦

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

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

Compare
≂ ≃ ≄ ≅ ≆ ≇ ≈ ≉ ≊ ≋ ≌ ≍ ≎ ≏ ≐ ≑ ≒ ≓ ≔ ≕ ≖ ≗ ≘ ≙ ≚ ≛ ≜ ≝ ≞ ≟ ≠ ≡ ≢ ≣ ≤ ≥ ≦ ≧ ≨ ≩ ⊰ ⊱ ⋛ ⋚ ≪ ≫ ≭ ≮ ≯ ≰ ≱ ≲ ≳ ≴ ≵ ≶ ≷ ≸ ≹ ≺ ≻ ≼ ≽ ≾ ≿
⊀ ⊁ ⊂ ⊃ ⊄ ⊅ ⊆ ⊇ ⊈ ⊉ ⊊ ⊋ ⊏ ⊐ ⊑ ⊒ ⋖ ⋗ ⋘ ⋙ ⋜ ⋝ ⋞ ⋟
⋠ ⋡ ⋢ ⋣ ⋤ ⋥ ⋦ ⋧ ⋨ ⋩ ⋪ ⋫ ⋬ ⋭

Copyrights
™ ℠ © ® ℗

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

Flower
✽ ✾ ✿ ❁ ❃ ❋ ❀

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

Hand
☜ ☞☝ ☚ ☛ ☟ ✍ ✌

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

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

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

Music
♪ ♫ ♩ ♬ ♭ ♮ ♯ ° ø

Phone
✆ ✉ ☎ ☏

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

Question
❢ ❣ ⁇ ‼ ‽ ⁈ ¿ ¡ ⁉ ؟

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

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

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

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

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

Scissors
✁ ✂ ✃ ✄

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

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

Tamil [x]
அ ஆ இ ஈ உ ஊ எ ஏ ஜ ஐ ஒ ஓ ஔ க் ங் ச் ஞ் ட் ண் த் ந் ப் ம் ய் ர் ல் வ் ழ் ள் ற் ன்

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

Typesetting
＃ ＠ ＆￥ ۰ ｡ ﾟʒ ɻ

Writing
✐ ✎ ✏ ✑ ✒ ✍ ✉ ⌨

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

Zodiac
♈ ♉ ♊ ♋ ♌ ♍ ♎ ♏ ♐ ♑ ♒ ♓

[Falls]

Of The Falls does not have Photoshop or Photobucket, 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
• Did You Know?
• Image Hosting
• Enhancing Pictures
  x⋄ Image Editors
  x⋄ Photoshop Replicas
  x⋄ Extra Tools
  x⋄ GIF Editors
• Google Search by Image

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.

Did you know?

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.
..↳(Special thanks to contributor Lya for showing me this resource.)

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
• Image Shack https://imageshack.com/signup
• (Special thanks to contributor Splint for showing me this resource.)
• Gfycat (for GIFs only) http://www.gfycat.com
  You can also use the "Fetch a URL" option to turn YouTube videos into GIFs!
  (Special thanks to contributor AJEarthSquared for showing me this resource.)

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
  (Special thanks to contributor Tʎ tђє ŦigΣr ｡･｀ω´･｡ for showing me this resource.)
  .
• FotoFlexer http://fotoflexer.com/app
  Preview: Home Page | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8
  (Special thanks to contributor mental racat for showing me this resource.)
  .
• LunaPic http://www180.lunapic.com/editor
  Check out LunaPic's animation effects!
  (Special thanks to contributor Maria Beilschmidt. for showing me this resource.)
  .
• Online Image Editor (OIE) Compatible with GIFs! http://www.online-image-editor.com
  Preview: Home Page | 1 | 2 | 3
  (Special thanks to contributor ~ Ghastly Chaos ~ for showing me this resource.)
  .
• PicMonkey http://www.picmonkey.com
  Especially good for photo edits.
  (Special thanks to contributor AislingNyht for showing me this resource.)

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
  (Special thanks to contributor akü for showing me this resource.)

Extra Tools:

• Clipping Magic https://clippingmagic.com
  Great tool designed especially for removing image backgrounds.
  (Special thanks to contributor Jojen for showing me this resource.)
  .
• 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!
  (Special thanks to contributor E v e r y t h i n g for showing me this resource.)
  .
• Quick Picture Tools - Rounded Corners http://www.quickpicturetools.com/en/rounded_corners
  Round one or more corners of a JPG/PNG image.
  (Special thanks to contributor Tadashi Hamada for showing me this resource.)
  .
• RoundPic http://www.roundpic.com
  Round one or more corners of a JPG/PNG image.
  (Special thanks to contributor Fortunea for showing me this resource.)
  .
• 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.
  (Special thanks to contributor default for showing me this resource.)
  .
• GIFMaker http://gifmaker.me
  Create your own gif here.
  (Special thanks to contributor ~ Ghastly Chaos ~ for showing me this resource.)
  .
• LooGix http://www.loogix.com
  Create gifs or add effects to your current gifs.
  (Special thanks to contributor ~ Ghastly Chaos ~ for showing me this resource.)

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.

[Falls]

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]

[Falls]

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]

[Falls]

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
greengreengreengreen

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]

[Falls]

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!

Pixlr Tools

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

Weave Borders Through Images:

Pixlr
(by rosalynd)

Photoshop
(by ZeyDaan)





x





Come see what Of The Falls

and ZeyDaan

have to say about the

differences between making

a bad border weave and a

good border weave.

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

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 ZeyDaan)

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

Silhouettes:

Make an image one solid color.


Pixlr
(by kaoru.)

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)

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

Round Only 2 Corners of a GIF:

Online Image Editor
(by Katsuko)

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

[Falls]

Ａｐｐｌｙ Ｙｏｕｒ Ｋｎｏｗｌｅｄｇｅ:

The purpose of this post is to show you how to apply the knowledge listed in the posts above.
Here, I will show you my own personal sig-making process.

Step 1: Text
Keep your text short and easy to read.

I always build my signature around my text so that I know my text will fit.

To find my text, I will use Google. You can use song lyrics or look up "inspirational piranha quotes" or whatever you want.
Keep your quote short so that it's easy to read, otherwise people will ignore the text entirely!

For this example sig, I searched up "dog-lover quotes":
Happiness is a warm puppy. - Charles M. Schulz
It's nice and short, so I can make the text whatever size and font that I want. I also want to leave room for three links, so I'll keep that in mind as I go.

Next, I format my text, plugging it into a font generator to make it stand out.


"Ｈａｐｐｉｎｅｓｓ ｉｓ ａ ｗａｒｍ ｐｕｐｐｙ."
― Charles M. Schulz.............................

Link • Link • Link


Step 2: Images
Make sure your images fit into the same color scheme.

Again, we turn to Google. Always make sure that you keep color theory in mind. If the colors clash in your sig, no amount of coding will make your sig reach its full potential.

To go along with the theme of my quote, I Googled "cute puppies" and scrolled until I got a good idea of the color scheme I wanted. I decided to go for softer, natural colors. Once I had one good picture, I plugged it into Google Search by Image and found some others that also had a grassy background.

Step 3: Layout

The best way to fit different-sized images around your text is to put big stuff on the left and small, detailed stuff on the right. This will draw the viewer's eyes from left to right so that they feel naturally drawn to look over the entire signature.




"Ｈａｐｐｉｎｅｓｓ ｉｓ ａ ｗａｒｍ ｐｕｐｐｙ."
― Charles M. Schulz.............................

Link • Link • Link

.........................................................................................................................
Step 4: Final Touches
Don't make your sig look too busy!

Of course, that signature would look rather bland if I stopped there, so I spent some time browsing through the symbols list until I found some good filler material. Be sure to not use too many types of symbols or else you will ruin that previously mentioned ability to smoothly draw the viewer's eyes over the entire piece.


.

▂▂▂▂▂▂▂▂▂▂▂▂▂ ❤ ▂▂▂▂▂▂▂▂▂▂▂▂▂
♡ ♡ ♡ ♡ ♡ ♡ ♡ ♡ ♡ ♡ ♡ ♡ ♡ ♡ ♡ ♡ ♡ ♡ ♡ ♡ ♡ ♡ ♡ ♡ ♡

♡ ♡ ♡ ♡ ♡ ♡ ♡ ♡ ♡ ♡ ♡ ♡ ♡ ♡ ♡ ♡ ♡ ♡ ♡ ♡ ♡ ♡ ♡ ♡ ♡

"Ｈａｐｐｉｎｅｓｓ ｉｓ ａ ｗａｒｍ ｐｕｐｐｙ."
― Charles M. Schulz.............................

link • link • link



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

'Tis the End.
And that, my dear pupil, is all that this community's collective mind can muster about making signatures with BBCode. Congratulations! You made it all the way to the end! Please accept a complimentary virtual cookie before you go. May the code be with you!