Digitally Distinct: BBCoding Tutorial/Help Thread

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

Announcement~

The discord server is here!
43
54%
Click here to read the announcement about it!
36
46%
 
Total votes : 79

Digitally Distinct: BBCoding Tutorial/Help Thread

Postby antique skies » Tue Jul 18, 2017 12:01 am

Image
▪ ▪ ▪ ▪ ▪ ▪[CODING & SIGNATURE TUTORIAL THREAD]▪ ▪
Image





xxxxx
created, loved and cherished by Falls V2 loved by: Zetirian
Previous: Version 1, Version 2




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

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

    Image
      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.

    Image
      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.

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

      Image Image Image
      Image Image Image
      Image Image
      ♥ Special thanks to abberence., bambi boo and ~Anastasia~ for taking the time to make these!
Last edited by antique skies on Mon May 21, 2018 9:27 am, edited 13 times in total.
User avatar
antique skies
 
Posts: 11208
Joined: Wed Aug 20, 2014 8:16 am
My pets
My items
My wishlist
My gallery
My scenes
My dressups
Trade with me


Digitally Distinct: Basics of BBCode

Postby antique skies » Mon Jul 24, 2017 2:41 am

Image
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:

    Image

    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 ↓↓↓
    NAME wrote: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
    Image
    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?
Last edited by antique skies on Mon Jul 24, 2017 2:46 am, edited 1 time in total.
User avatar
antique skies
 
Posts: 11208
Joined: Wed Aug 20, 2014 8:16 am
My pets
My items
My wishlist
My gallery
My scenes
My dressups
Trade with me

Digitally Distinct: Text Manipulation

Postby antique skies » Mon Jul 24, 2017 2:45 am

Image
    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
      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
    • 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
    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.

User avatar
antique skies
 
Posts: 11208
Joined: Wed Aug 20, 2014 8:16 am
My pets
My items
My wishlist
My gallery
My scenes
My dressups
Trade with me

Digitally Distinct: Symbols

Postby antique skies » Mon Jul 24, 2017 2:52 am

Image
    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.
User avatar
antique skies
 
Posts: 11208
Joined: Wed Aug 20, 2014 8:16 am
My pets
My items
My wishlist
My gallery
My scenes
My dressups
Trade with me

Digitally Distinct: Image manipulation

Postby antique skies » Mon Jul 24, 2017 2:58 am

Image
    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:
Enhancing Pictures:
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.
    Image
    "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.


    Gif Based
    Crown [By gods]
    Image

    Hearts [By gods]
    Image Image Image Image

    Music gifs are found here. [By Yukoki]
    Image Image Image Image Image

    Random Star Gif [By Zetirian]
    Image

    Non-Gif Based

    Bows [By gods]
    Image Image Image Image Image Image Image

    Wings [By gods]
    Image Image Image Image Image Image Image Image Image Image

    Crowns [By gods]
    Image
Last edited by antique skies on Mon Sep 04, 2017 2:57 am, edited 1 time in total.
User avatar
antique skies
 
Posts: 11208
Joined: Wed Aug 20, 2014 8:16 am
My pets
My items
My wishlist
My gallery
My scenes
My dressups
Trade with me

Digitally Distinct: Making Multiple Columns + Centering Text

Postby antique skies » Fri Aug 04, 2017 12:30 pm

Image
    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]

Image
Image
Image


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:

Image
Image
Image


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
Image
greengreengreengreengreengreengreengreengreengreengreen
PURPLE
Image
purplepurplepurplepurplepurplepurplepurplepurplepurplepurplepurple
BLUE
Image
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
Image
greengreengreengreen
greengreengreengreen
greengreengreen
PURPLE
Image
purplepurplepurple
purplepurplepurple
purplepurplepurple
purplepurple
BLUE
Image
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
Image
greengreengreengreen
greengreengreengreen
greengreengreen


PURPLE
Image
purplepurplepurple
purplepurplepurple
purplepurplepurple
purplepurple


BLUE
Image
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]


Image
    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
Image
greengreengreengreen
greengreengreengreen
greengreengreen
PURPLE
Image
purplepurplepurple
purplepurplepurple
purplepurple
BLUE
Image
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]
User avatar
antique skies
 
Posts: 11208
Joined: Wed Aug 20, 2014 8:16 am
My pets
My items
My wishlist
My gallery
My scenes
My dressups
Trade with me

Digitally Distinct: Moving All Columns to Hug the Left Side

Postby antique skies » Fri Aug 04, 2017 12:39 pm

Image
    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
Image
greengreengreen
greengreengreen
greengreengreen
BLUE
Image
blueblueblue
blueblueblueblue
PURPLE
Image
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
Image
greengreengreengreen
greengreengreengreen
greengreengreen
BLUE
Image
blueblueblue
blueblueblueblue
PURPLE
Image
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
Image
greengreengreen
greengreengreen
greengreengreen


BLUE
Image
blueblueblueblue
blueblueblueblue
blueblueblueblue


PURPLE
Image
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]
User avatar
antique skies
 
Posts: 11208
Joined: Wed Aug 20, 2014 8:16 am
My pets
My items
My wishlist
My gallery
My scenes
My dressups
Trade with me

Digitally Distinct: Creating a Column within a Column

Postby antique skies » Fri Aug 04, 2017 12:42 pm

Image
    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
Image







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
ImageImageImage








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.

ImageImageImage
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!

ImageImageImage
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!
User avatar
antique skies
 
Posts: 11208
Joined: Wed Aug 20, 2014 8:16 am
My pets
My items
My wishlist
My gallery
My scenes
My dressups
Trade with me

Digitally Distinct: Supplementary Tutorials

Postby antique skies » Fri Aug 04, 2017 12:45 pm

Image
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

Borders
White border avatar
(By sekiuchi)
Image









Weave Borders Through Images:





















xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

Gifs
Make your own gifs without photoshop!

Textual Gif writing
    By Zetirian
    Image

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

    Online Image Editor
    (and some Pixlr)

    (by chrome)
    Image
    Photoshop

    (by Zetirian)
    Image
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

Round Only 2 Corners of a GIF:xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
Greyscaling a gif
(By Ahsoka)
Image

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

Cutting a Gifxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

Still image
Silhouettes:
    Make an image one solid color.

    Pixlr
    (by kaoru.)
    Image
    GIMP
    (by gods)
    Image
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

Cut Images into Complex Shapes:xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

Remove Image Backgrounds:
    Make any image have a transparent background.

    OIE or Pixlr
    (by Of The Falls)
    Image
    GIMP
    (by gods)
    Image
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

Make an image high quality:
    Remove any lossiness in an image

    waifu2x
    (by kazuichi)
    Image
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

Forum Based
    Creating a rotating image
    (by Zetirian)
    Image


Removing a gap from inbetween a cut image.


Removing name from CS pets
(By 100 minus 1)
Image

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
Last edited by antique skies on Sat Aug 19, 2017 5:01 am, edited 1 time in total.
User avatar
antique skies
 
Posts: 11208
Joined: Wed Aug 20, 2014 8:16 am
My pets
My items
My wishlist
My gallery
My scenes
My dressups
Trade with me

Who is online

Users browsing this forum: Google [Bot] and 1 guest