Design Custom Smiley’s for your Site
In this simple tutorial I’m going to show you how to design your own smiley’s that you can use on a forum or your blog/website. This is a pretty basic tutorial, so all users, beginner or intermediate should be able to follow this tutorial! These are the smiley faces I came up for this tutorial:
1. New Document, Background Creation
Well, you’ll need to create a new document to design your smiley faces in. I usually like to work in a larger document so I can see what I’m designing better, but you can just create a small document if you want.
If you choose to create a document just the size of the smiley, you’ll want to use something like 12 x 12-20 x 20 pixels for your document size, or if you’re like me you can use a document size around 400 x 120 px.
Now, this is a really optional part. I like to add in a nice, simple background to all of my documents, so you might want to as well. Start by filling your background with a really light grey, then apply Filter > Render > Lighting Effects to the background. Finish off by applying Filter > Noise > Add Noise with a very low setting.
2. Creating the Smiley Face Shapes
Time to create the shape of the smiley face – for this we’ll use the Elliptical Marquee Tool, you’ll find it in the top left of your Photoshop toolbar menu.
Now, do you know if you want the edges of your smiley face anti-aliased, or not really? Anti-aliased has nice and smooth edges, whilst the other has very sharp edges… you can see an example below.
I’ll be using the sharp-edged circle for this tutorial, since it’s the most efficient when using it on websites (unless you use a transparent png).
Set the selection ’style’ for the elliptical marquee tool to fixed size and 15 px in each of the boxes, width and height.
After you’ve got all your settings done, click on your canvas and fill your selection with black, or a very dark grey. Remember, this is just the border for your smiley face.
After filling your selection with a color, create another new layer then make a smaller selection inside of your first shape. This time you can make your selection anti-aliased if you want. The size of my smaller selection was 13 x 13 pixels. After you made your selection, fill it with a color of your choice, but we’ll be applying a Gradient Overlay layer style afterwards so it will change the color used anyway.
After filling your new selection with a color, you can go into the Blending Options and apply some layer styles to give it some really nice effects. You can mess around with a couple of different ones of your own (remember to use Gradient Overlay) but here are the ones I used anyway:
Now your smiley face should look pretty much like this:
Looks pretty cool to me! Now you just need to add some facial features, that’s the really easy part!
3. Adding Facial Features, etc.
All you need to do in this step is added the facial features (eyes, mouth, effects if needed) to the smiley. Start by making a new layer, then find and get out the Pencil Tool. Now draw the eyes. Sometimes smiley face eyes are just 2px blocks of white/black, sometimes they’re straight lines, sometimes they even resemble real eyes, but in this case I’m just going with the 3px vertical line!
If when drawing with the pencil tool you get really thick lines, make sure the brush size setting is down to one pixel, or you can press the “[” key a few times to size the brush down.
After drawing your eyes, draw the mouth, which is pretty easy, just make it in the shape of a C or a D if you’re not sure!
Looking good, now you can add some effects if you want, for example, if the smiley is blushing, you’ll want to add some red brushing to the corners, but this one isn’t, so…
Merge your facial layers together then hide them, then get to work making lots of different variations! A good idea is to also change the gradient colors each time you make a different one, this is what I came up with:
Not bad, huh? Well, that’s all for this tutorial, I hope you enjoyed it! If you would like to, you can download the PSD file from this tutorial for free from here: Download Smiley Faces PSD, and I’ve also made a small animated smiley’s pack which you can downloads from here: Free Animated Smiley Pack, please take note though that my animation skills are a little minimal 
Take it easy everyone!
You must be logged in to post a comment.
14 responses
How do I add the facial features. What tools should I use?
Sorry I didn’t say, you’re meant to add in the facial features with the pencil tool. With a 1 px point.
Sorry
Nice work Eli, could make some dollars if you made some unique cool sets
I would like to say thank you for posting this wonderful tutorial. It is what got me making smilies and I love you for that.
That’s a smilie that I made. If it won’t show on the site, just copy and paste the url into the url box in your browser to view it.
Amazing, Amazing Tutorial! Never knew it was this easy, lol. It will help me loads when making skins. Thank You for sharing the tutorial
hey i was wonderin wat version of photoshop u used????
I don’t know nothing about PS.But I can create the smiley.Thank u.
Can u tell me how to write the smilies?
Thx, a very good tut, my outcome:
[IMG]http://img255.imageshack.us/img255/6480/pack1rp0.png[/IMG]
http://img255.imageshack.us/img255/6480/pack1rp0.png
Thank you!!
Do you know how I can use my smilies in AIM?
-Piekid
It won’t let me make a 15×15px Elliptical Marquee on a 400×120px document. It says:
“Warning: No pixels are more than 50% selected. The selection edges will not be visible.”
Awesome sets
awesome tut 
AWESOME SITE 