Get Our Free Ebook
Beginners Guide to HTML

  Tutorials Photoshop Drawing Techniques Custom Animated Emoticon

Custom Animated Emoticon

Step 1

Make a new file and make it 50 by 50 pixels, RGB Colour and transparent background. Name the first layer "Outline".

Choose the colour #565656 (Make sure you have this gray colour or you won't be able to change the colour well).

Zoom in 1600% and with the Pencil Tool ( B ), choose the 1 pixel brush (should be the very first brush on your list) and make a line that's 5 pixels horizontally. Drop down and over a pixel, make a line two pixels wide, drop down and over again and make one pixel.

This is the corner; do the same vertically. Use the image below to help.

image 1

Step 2

Make a new layer, call it "Fill."

We're going to start colouring in the middle now. Choose the colour #A1A1A1 and colour the top two pixels like the image below.

image 2
Click to enlarge

Change selected colour to #AEAEAE and shade like the image below.

image 3

Next colour, #C2C2C2. Shade like below.

image 4

Next colour, #D2D2D2. Shade like below.

image 5

Next colour, #D8D8D8. Shade like below.

image 6

Next colour, #DEDEDE. Shade like below.

image 7

Next colour, #E7E7E7. Shade like below.

image 8

Next colour, #F0F0F0. Shade like below.

image 9

Step 3

Make a new layer, call it "Left hand"

Choose colour #565656 and draw a 2 pixel line horizontally. drop down and over to the right by one pixel, draw two pixels down. Continue this pattern like the image below.

image 10
Click to enlarge

On the same layer, choose colour #E7E7E7 and colour the top left corner.

Then colour #D2D2D2 for the top right and bottom left corners, and #AEAEAE for the bottom right corner.

image 11

Step 4

Duplicate the layer "Left hand" and rename it "Right hand." Use the Move Tool ( V ) and move it over to the right side.

image 12
Click to enlarge

Link layers "Fill" and "Outline" and merge, Layer > Merge Linked (Ctrl, E), the two layers. Call the newly merged layer "Body."

image 13

Step 5

Make a new folder layer and call it "Expressions."

There two important expressions you've got to have: one with eyes just open and one closed for blinking.

Make a layer in the "Expressions" folder called "Open Eyes" and with the colour #565656, make two lines for eyes like below. Three pixels tall, and two pixels in between each eye.

image 14
Click to enlarge

Make another layer in the folder can call it "Closed Eyes." Hide layer "Open Eyes" and draw a line 6 pixels wide, with the colour #565656, where the eyes were.

image 15
Click to enlarge

You can make more expressions if you want.

Step 6

If you want to change the colour, what you do it go Layer > New Adjustment Layer > Hue/Saturation (Ctrl, U).

Tick the "Colorize" box and change the Hue and Saturation (but not the Lightness) to what ever colour you want, don't click "OK" yet!

Once you have your settings, click "Save" and save it. It doesn't matter what you save the name as.

Here's what I did:

image 16
Click to enlarge

Then you go to the other layers and go Layer > New Adjustment Layer > Hue/Saturation (Ctrl, U) and click load. Load your settings and click "OK"

image 17

Make sure you do all the layers.

Part Two: Animation to the Smiley

Step 7

Jump into Adobe Image Ready (Ctrl, Shift, M).

Step 8

When you want a smooth, normal movement, you move let's say for example, a hand, simply one pixel at at time to it's destination.

image 18

The same goes for everything else; eyes, body, etc

If you want things to go faster you just move more than one pixel at a time. The more pixels you move it, the faster it will move.

The "tween" button is also good for moving things.

Step 9

Make sure you make the smiley blink. Make him blink every once and a while by hiding the layer with his eyes open and make the layer with his eyes closed visible. Only have his eyes closed though for only one frame with "No Delay" for blinking.

image 19

Step 10

To make the entire smiley move or walk over somewhere, don't just make him slide over there. It doesn't look very good.

Make him move up one pixel and over one pixel in one frame and the next frame move him over one frame and back down one frame.

Continue this pattern until he reaches his destination.

image 20

Step 11

Once you understand the basics you can try making your own emotion. You can give him props and different expressions.

Here's my result just using the basic materials:

image 21

Other examples:

image 22 image 23 image 24 Custom Animated Emoticon

subscribe to newsletter