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

[cookekat]

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.
• Click here if you want a visual representation of this set of DOs and DON'Ts.

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:

You'll need an image host every time you finish editing an image.
After uploading your image to a host, it will hold the picture forever so that it always has a url.
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 any of these resizers, click here.

• JPG Resizer http://create-avatar-online.com
  
• PNG Resizer http://images.my-addr.com/resize_png_on ... or_web.php
• GIF Resizer http://ezgif.com/resize

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.

Can I use my own server to host my sig pictures?

[keiikue]

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.
• Click here if you want a visual representation of this set of DOs and DON'Ts.

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:

You'll need an image host every time you finish editing an image.
After uploading your image to a host, it will hold the picture forever so that it always has a url.
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 any of these resizers, click here.

• JPG Resizer http://create-avatar-online.com
  
• PNG Resizer http://images.my-addr.com/resize_png_on ... or_web.php
• GIF Resizer http://ezgif.com/resize

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.

Can I use my own server to host my sig pictures?

Probably, yeah.

[kristenn11]

Even though I've read this backward ad forwards, I am still having problems setting up a signature. What should I do? I really want to make cool signatures (Like the person who made mine.) I just don't know what to do...could someone please help me?

I'd love to help you out with this problem. First, I usually pick out a theme for the signature. The theme can be a character from a show or movie, for example. Make sure you can get pictures of this theme! Sometimes in my signature shop people give me unspecific themes like weather and songs which can be very hard to do. Next, go to pixlr.com to set up/create the signature. Make the dimensions 700 x 400 as the most and then make the background transparent. With pixlr, you can paste all your pictures (besides the gifs), add bars and symbols, and even your quote if you decide to use one. When you have all the space filled, just save the image, and crop all the pieces into their own pictures. After that, you just have to put them back together on ChickenSmoothie.

This might of seemed super confusing. If is was, just message me and I can make a gif tutorial or go into more detail. Also, if you want a gif in your signature, just leave a space for it on pixlr and add it in on CS.

[nimuulap]

Even though I've read this backward ad forwards, I am still having problems setting up a signature. What should I do? I really want to make cool signatures (Like the person who made mine.) I just don't know what to do...could someone please help me?

I'm honestly that good at creating complicated signatures but I can give a few suggestions:

1. (like Kristen mentioned) Pick a theme
In order to make a signature that makes sense, start off with something you're passionate about... Perhaps for you, swimming! (omagurd the first gif in your signature is from free *0* Love that anime) Then, you have the choice of making your own images or looking for images. However, remember to credit where the image is from and if you're using fanart, remember to credit the artist and ask for their permission ^-^

2. Pick a good colour palette
Although it might not seem that important, I personally find signatures with a colour palette look better than those who don't. There are many colours that look good together and you can find some here. Then, you can find images that share those same colours. If you can't find any, I sometimes use black and white pictures (you can change the colour to black and white here). Your borders should be along that colour as well.

3. Make a Plan
What helps me at times is to sketch out where I want the text to be and where the images will be. For example, in my current signature, I wanted the main image to be on the left and for the text to be on the right. Then, I did all the fancy image manipulation stuff to the images and uploaded it on an image hosting website. For the text, it's just a matter of coding and using text that fits your theme. Your signature should match the theme you thought of.

Lastly, it's just a matter of creativity ^-^ If you know how to manipulate images and text, then it's just a matter of ideas and inspiration

It's mainly why I enjoy coding; it's a bit like drawing. As long as you know the basics, you can add your own creativity to it and you learn through time.

[king.]

so, i am making a new sig, and i was wondering:




Code: Select all

[left][img]http://oi59.tinypic.com/33wku2r.jpg[/img][/left][img]http://flont.veer.com/flontpng.aspx?text=SIVAN&size=64&maxWidth=540&fontId=30561&lineheight=58&backcolor=01FFFFFF&color=FF000000&wrap=false&tracking=0[/img][right][img]http://oi62.tinypic.com/ea4owj.jpg[/img][/right]




how would i get texts boxes under the font at the top?

[chrome]

@sivan.

Code: Select all

[left][img]http://oi59.tinypic.com/33wku2r.jpg[/img][/left][right][img]http://oi62.tinypic.com/ea4owj.jpg[/img][/right][center][img]http://flont.veer.com/flontpng.aspx?text=SIVAN&size=64&maxWidth=540&fontId=30561&lineheight=58&backcolor=01FFFFFF&color=FF000000&wrap=false&tracking=0[/img]
text box goes here[/center]

you didn't have the font in brackets, so i put it in brackets for you

[king.]

@chrome, thank you so much!!

[synastry]

So, I've been using OIE for most of the things in my signatures, but after awhile, they don't show up, and I'm getting a lot of unhappy customers because of it. Any advice or help?

[sataire]

@mycatisawesome

i, personally, only use oie when dealing with gifs
however, pixlr is a very good free site to use that i feel is very effective
there is also a guide as to how to use it
there are also other image manipulation sites listed here under the tile "Enhancing Pictures"

[atticus,]

you are probably using the link oie provides. after awhile while using the links, it just disappears. i would suggest saving the image then uploading it on imgur.