Get Our Free Ebook
Beginners Guide to HTML

  Tutorials Photoshop ImageReady Animation How to Make an Animated Smiley or Emoticon

How to Make an Animated Smiley or Emoticon

Have you ever wondered how you can create your own custom emoticons for your messenger? It is quite simple, and you will be taught how to do just that by reading this tutorial. We will create a practical, emoticon which you can configure with your messenger.

You will be making use of Adobe Photoshop exclusively by creating a layered '.psd' file and then animating your file for export as '.gif'. Easy to follow steps will be provided and at the end of this tutorial, we will show you how to configure your messenger to use your custom created and animated emoticons.

Purpose & Result:

Happy smiley face sitting and smiling. Then all of a sudden huge 'LOL' letter will fall down to crush this smiley face.

Tools used throughout this tutorial:

Type Tool:

image 1

The 'Type Tool' is a very useful and powerful tool which allows you to create text on your designs, and then formatting your text according to specific colors, fonts and sizes. This tool can be found on the 'Tools' panel *or you can press 'T' at any time during your design to actively select this tool.

Marquee Tool:

image 2

The 'Marquee Tool' consists of both an elliptical – and rectangular marquee tool. We will mainly be using the 'Elliptical Marquee Tool' throughout this tutorial. This tool allows you to create oval shapes or perfect circles. In order to create a perfect circle, you have to hold down the 'Shift' key while dragging the shape on your design window. The 'Elliptical Marquee Tool' can be found on the 'Tools' panel *or you can press 'M' at any time to actively select this tool.

Gradient Tool:

image 3

This is most definitely one of the most useful and versatile tools in Photoshop, which allows you to create color flow on certain areas of your design. This tool can easily be used in conjunction with the 'Marquee Tool' to isolate certain areas of a design for the application of shading or highlighting. You can find this tool on the 'Tools' panel *or you could press 'G' at any time during your design to select this tool. Remember that you have to preset both your primary and secondary colors before applying any gradient effects.

Color Box:

image 4

This color panel consists of two colors. The top/front box is the primary color which will be used mostly, and then the back/bottom box is the secondary color which can be used as a reserve, or even used in conjunction with the primary color with certain tools such as the 'Gradient Tool'. When you click on one of these boxes, you will notice a 'Color Picker' appearing on the workspace, which allows you to define the specific shade and color to be assigned to the box.

Creation & Implementation:

Once you have opened your Adobe Photoshop application, you need to create a new '.psd'. You can do this by going to 'File > New…' *or by pressing 'Ctrl' + 'N' as a keyboard shortcut. You will now notice a prompting 'New Document' dialog opening on the workspace. View Figure 1 as an exact illustration to this dialog and the values you need to input into the fields.

image 5
Figure 1

Name your new document according to your personal preferences. Both the width and the height of this document will be 50px, resulting in a perfect square. The 'Resolution' field determines the amount of dots/pixels that you document will contain per inch. So the higher this value, the more pixels your design will contain per inch, which will then again result in finer detail and a higher quality design. You may now press 'Ok' to create the document, and notice a new, blank design window opening on the workspace.

As you look at the 'Layers' panel, you should notice one layer named 'Layer1'. You should now double-click directly on the name/caption of this layer and then rename it as 'background'. Select the 'Brush Tool' from the 'Tools' panel and change the primary color to white (#FFFFFF). With the 'background' layer selected, you will now fill the complete design window with white.

Now create a new layer on the 'Layers' panel and rename it as 'smiley'. Actively select the 'Elliptical Marquee Tool' from the 'Tools' panel. The aim of the next step is to create an oval/circle shape which we will transform to create the smiley face. Click and drag on the design window to create a circle with a dashed outline. Now set the primary color in the 'Color Box' to a bright yellow, preferably #fffc00. Now press 'Shift' + 'F5' to fill the active area with this primary color. See Figure 2 as a result to this step.

image 6
Figure 2

You have created the basis to work from, and all you need to do now is to apply a few effects and small drawings to create your smiley face. Create a new layer in the 'Layers' panel and rename this new layer as 'shading'. Select the 'Gradient Tool' from the 'Tools' panel *or press 'G' to select it. Before you apply a gradient flow to your design, there are two things you need to check first. Ensure that you have the desired colors in both the primary and secondary color boxes. My primary is set to #FFFFFF and my secondary is set to #515151. The second thing is to ensure that you have the desired area isolated for applying the gradient. You should notice that even though you have the 'shading' layer actively selected, that the area of the 'smiley' layer is isolated for application of effects, gradients and other features. In case all is good, you are ready to continue with the design.

Click on the top-right edge of the yellow area, and drag down with the 'Gradient Tool' to the bottom-left edge of the circle. You should notice that the design has changed. The blending mode of the 'shading' layer has to be on 'multiply' and the opacity has to be decreased from 100% to 60%. See Figure 3 as an illustration to how your design should look at this moment in time.

image 7
Figure 3

Create another new layer and rename this layer as 'highlighting'. Ensure that you still have the 'Gradient Tool' actively selected with the same colors used as with the 'shading' layer. Now do the same as you have done with the 'shading' layer, except this time you will only drag from the edge to the middle of the circle area. The blending mode of the 'highlighting' layer should be set to 'screen' and the opacity should be on 60%.

We will now create a shadow under the smiley. This can easily be done with the use of the 'Elliptical Marquee Tool' to isolate a specific area and then applying a gradient flow with the use of the 'Gradient Tool'. Create a new layer in the 'Layers' panel and rename this layer as 'shadow'. Actively select the 'Elliptical Marquee Tool' *or press 'M' as a keyboard shortcut. Click and drag below the yellow circle to create an oval shape which will serve as a shadow. Once you have created the appropriate oval shape, and you have repositioned the shape, you will now select the 'Gradient Tool'. Change the setting of the 'Gradient Tool' to radial gradient. Now press 'X' to swap your primary and secondary color, making the dark-grey/charcoal color the primary color. Click in the middle of the isolated area you have just created, and drag to the left, until the cursor touches the edge of the isolated area. View Figure 4 as a result to the creation of the shadow layer.

image 8
Figure 4

Since we are going to animate this file in frames, you now need to create two or more faces for the smiley. You can use your own intuition to do this, and then view Figure 5 and 6 as an illustration to what I have created. Ensure that these two faces are created on two separate layers, and name them 'face1' and 'face2' individually. See the two faces I have created by viewing Figure 5 and 6.

image 9
Figure 5

image 10
Figure 6

We now have two smiley faces, one (Figure6) which seems very happy, and the other (Figure5) which is conscious or aware of something. Picture the rest of this animation to yourself. The face shown in Figure6 will show for a few seconds, then it will change to the face shown in Figure 5, and then we will have big 'LOL' letters slamming down, crushing the face.

In order to do this, you need to create one text layer, with the text 'LOL' which you can format according to your preferences. Make the letters appealing and attractive by adding good looking effects. You will need another layer with special effects, as an example, blood lying below the letters. Now create these two layers so that we can move over to the animation of this tutorial. The text layer will be renamed as 'text1' and the effects layer will be named as 'blood'.

Be creative and create something which you would like to see in your animation. When you are done, you can view Figure 7 as an illustration to the 'Layers' panel.

image 10
Figure 7

Go to 'Window > Animation' to make the 'Animations' panel visible. When you look at the 'Animations' panel, you will notice one frame. Everything you change or apply in the 'Animations' panel won't physically affect the layers of your design. So you can choose frame one, and make only the following layers visible in the 'Layers' panel:

  • Background
  • Shadow
  • Smiley
  • Shading
  • Highlighting
  • Face2

You can then create a new frame and make the 'face2' layer invisible and at the same time make the 'face1' layer visible. Continue to follow this procedure until your animation is done. You can make a layer half-transparent on one frame and fully visible on another. A layer can also be moved to be in one position on a certain frame and then in a different position on another frame. 'Motion Tweens' can also be used to create flow from one frame to another.

A very important factor to adjust when creating '.gif' animations is the timing of the frames. Have a look at the frames. You should see a value measured in seconds below each frame. This value determines the delay on each frame.

Your animation is now complete and you are ready to export the file as a '.gif' for use with your messenger. To save the file as a '.gif' go to 'File > Save for web...' and then save the file as a '.gif'. *You can press 'Shift' + 'Ctrl' + 'Alt' + 'S' as a keyboard shortcut to quickly saving files in an optimized manner.

Open MSN messenger. Go to 'Tools > My emoticons...'. You can now browse to the file you have saved as a '.gif' and assign the '.gif' animation to the word 'lol'. In other words, every time you type 'lol', the word will be replaced with the emoticon animation.

How to Make an Animated Smiley or Emoticon

subscribe to newsletter