Helping You Rock Out Your Site Like A Rockstar!

Making your own emoticons (smilies) involves using your creativity. However, in this lesson, you are going to be give a zip file filled with the basic smilies that I use for mine which I like to say are considered cute anime smiley templates. They are only the eyes and mouth and whatever comes with it, like for the idea emoticon, there is a lightbulb, and the kiss one, the eyes are hearts.

Your smilies when finished will have to be saved in GIF format. If you have a animation program and want to animate some in your own way, you can do so.

I am using Paint Shop Pro for this tutorial, but the same concepts can be applied in Photoshop as well as other graphic editor programs too.

Download Emotion Bases (for the smiley faces I use) – Emoticon Bases (566)

Step 1. First off, you have to decide what size you want your smilies to be. You do not want them too large and sometimes if they are too small, you are limiting what you can do with the image.

For a decent size, we will go with the 21 (wide) x 17(tall) pixel smilies that I use as a base for the creative cute smilies I have like the alien, bunny, panda, and bear sets. So, first, we work with a blank template of 21 x 17 that has a background color of #FFC0FF.

Step 2. Pick a color and with your pen tool, you adjust it to be 1 pixel (or in Paint Shop Pro, Size 1. Make sure your image is large as you will be able to see your small pixels as you make them. I used 4000% when making mine. Using the blank template above, you outline what you want your emoticon shape to be. In the case of this tutorial, the smiley I am making will be an ellipse.

Make the shape as smooth as possible. It may be hard to tell when you have the image zoomed in, so you can play around and zoom out to work with your image.

Step 3. Part A. Fill the inside of your emoticon with a lighter color. If you do not want any style, you can simply fill it with one color. If you want an effect to make it seem like it has depth, you with have to use more than one color. To have just one color, you can make it like this:

As you can tell, there are no effects and the image seems flat. For depth, try Part B.

Step 3. Part B. To make more depth in your smiley, you will have to apply a vector-like technique. A vector is a shape and and in make a graphic, we apply the different shapes and colors to make the depth of the object appear.

Of course, when working with the emoticons, especially this one, we want the colors to be somewhat similar, but as they are applied, next layer on top is smaller and also a lighter color than the previous.

Step 4. Now that the main base is filled, we will be making the simple smile emoticon. As provided, the smile base I use is in the zip file with the other bases. Of course, if you would like your smile to be a bit different, you can make your own. The templates are for anyone’s use.

Make sure your background is the same as the template background of #FFC0FF. Copy the smile and paste as a transparent layer onto the main emoticon template that you just completed.

Step 5. Make your image transparent. With your background still set at #FFC0FF, in your graphic editor you should be able to make your image transparent. In Paint Shop Pro, usually, you can press the keys Ctrl+Shift+V . You will get a few windows that will direct you through this. Once you have clicked OK, you can press the keys Ctrl+V to view your transparent image and then save it. You can right click on the following to make sure you are selecting the right fields in the command prompts of the graphic editor. Screenshot 1 , Screenshot 2

Your image should be finished. Of course, as mentioned, you can make your emoticons any shape, color or size, so have fun!

Have you tried this tutorial? Do you make your own smilies?