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:

1. Inner Shadow
2. Bevel and Emboss
3. Bevel and Emboss — Contour
4. Gradient Overlay

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!
Take it easy everyone!