I always found animated emoticons hilarious. Even funnier are animated emoticons of yourself or emoticons of your friends! In this lengthy tutorial I’ll show you how to create such emoticons and add them to your favourite messenger, if it supports gif files.

Here’s what we’ll be creating:

Step 1

The emoticon was created from a sequence of two images. In order for some images to be good for emoticons creation, the images must look similar, with little changes happening in the photo. Take for example the two images that I’ll be using in this tutorial.

You can use more than two images, but for the sake of simplicity, I’ll be creating an emoticon from only two simple photos.

Ok, now you open up Adobe Photoshop (whichever version, it doesn’t matter) and you paste the images inside by dragging them in.

Step 2

Next up you go to one of the photos and you select the whole image with ctrl+a (Select>All), then copy it with ctrl+c (Edit>Copy) and then you go to your second photo and paste the previous photo with ctrl+v (Edit>Paste). This procedure should be repeated if you have more than two photos. What we are doing is basically just gathering all the photos in one Photoshop Document.

Step 3

Now we have to align the photos to make them more realistic. We go to the layers window (Window>Layers) and we reduce the opacity of one of the photos to 50%. Then we move the layer so that it matches the background photo. Look for stability points such as the nose, eyes, etc.

Step 4

We copy the background image by dragging it down to the icon shown in the photo below and we crop the image (Image>Crop), so that there won’t be any blank spaces separating the two images.

Step 5

Now we have to colorize the image and correct the exposure. We add a new adjustment layer, color balance (Layer>New Adjustment Layer>Color Balance) and enter the numbers below. Note that the values depend on the photo itself, so you should make appropriate changes to the values.

Step 6

Now we add another adjustment layer, curves (Layer>New Adjustment Layer>Curves) and we basically drag the curve up to lighten the image a bit. Again, the values depend on the image you have.

Step 7

Because the photos are very crappy, taken under low light and noisy, I decided to go with a cartoonish look. I added a new layer, beneath the adjustment layers, and filled it in with the #088db7 colour. See the image below.

Step 8

Now for the magic; you change the blending mode of the colour layer to “Exclusion” and the opacity to 80%. Instant cartoon look!

Tip: Experiment with different colours to get a different look!

Step 9

Now we add the text. Duplicate the coloured layer and place it beneath the photos. With a white colour and the font of your choice, write up whatever you want. See the image below.

Step 10

After you’ve finished with the text, go to Window>Animation for the animation window to appear at the bottom of your screen. After that we have to display the frames of the animation. To do that, click on the far right button of the animation window. See the image below for reference.

Step 11

To create a new animation frame you click on the icon shown in the image below. The idea is to hide/show the layers while creating animation frames. See the next step for analysis.

Step 12

So, the concept is that you only show the layer you want to appear in the animation, at that particular frame. After you’re done with that frame, you click on the icon to create a new frame (see above) and then you hide your layer (by clicking the “eye” on the left of each layer in the layer’s window) and show the next layer that you want to appear in your next frame. This may seem tricky at first, but after you’ve grasped the concept, you can create wonders with this technique!

Step 13

Ok, now that we’ve finished with the frames, we have to make some timing adjustments. Select all the animation frames (by holding Shift and clicking them) and click on the black arrow. Select your desired timing for all the frames. Note that you can further customize each frame’s timing individually!

Step 14

Next we determine the number of loops that our animation will effectuate. I like selecting the “forever” option!

Step 15

We’re done here. The last thing remaining is to save it as a .gif file. The ordinary method, File>Save or File>Save As won’t animate your work. You have to go to File>Save for Web & Devices.

Step 16

A window will appear. Make sure you have “gif” selected and then click “Save”.

Step 17

Now, if you want to make it an emoticon for the messenger (we’ll be covering for the MSN Messenger in this tutorial) we have to make some further changes. We first have to make our emoticon perfectly square. To do so, grab the Rectangular Marquee Tool (type “m”) and by holding the Shift key drag across the image. Make sure you have the action in the centre of the selection. Then go to Image>Crop to crop the image.

Step 18

We now have to resize the document. Go to Image>Image Size and type in 50×50 pixels. Then click “Ok”.

Step 19

Now we can save it as a gif file. Remember the ordinary method, File>Save or File>Save As won’t animate your work. You have to go to File>Save for Web & Devices.

Step 20

Go to MSN messenger, open up a conversation window and click the icon to select an emoticon. Then go to “show all”, then click the “Create” button and after that the “Find Image” button. Browse to your emoticon and select it. Then you have to assign it a keyboard shortcut. Make sure it’s unique! Note that your version may vary from mine; I’m using MSN Messenger 8.5.

Step 21

Congratulations on creating your first emoticon! Now you can start making fun of your friends! Here, I’m chatting with my best friend, SmarterChild (smarterchild@hotmail.com) a super awesome bot, showing him my latest emoticon!

I hope you enjoyed the tutorial! Make sure you subscribe to this tutorial-blog and you’ll receive each tutorial right the moment it’s posted! You can also subscribe by email!

Download the source file used in this tutorial: DOWNLOAD SOURCE FILES