Make custom emoticon for msn messenger.

In this tutorial I am going to show you the process I use to create a kiss emoticon for msn using a character called Qoobee Agapi. You also need to have basic knowledge of adobe flash in order to follow through this tutorial. Consider this a flash tutorial for beginners.

I do some research on the body postures and the movements every time before I start working on a new animated emoticon. What I will do is to look at myself in the mirror and do the fly kiss action to get a feel of what the post and timing is like. Then I will break it down into single key poses and do some rough sketches in flash.

The above pictures are the basic key frames of the emoticon. It is only to get an overall look and feel of it and I am not considering the timing and secondary motion for the animation yet. I will refine the shape until I am happy before starting on the cleaning up the key frames. And this is what I get at this stage.

Once I have the key frames finalized, I will then add in the secondary motion frames. While I am doing it, I will keep on referring back to my own actions in the mirror so that I don’t lose the feel of the actions. The frames in grey are the secondary motion frames. In the main time, I will also adjust the timing of the animation so that there are adequate pauses in between each key poses. These steps are aimed at making the animation livelier and the actions more readable by the audience.

Then I will clean up the secondary motion frames for this animated emoticon to make it more complete.

I will add in a heart flying out of the screen on another layer in order to make the kiss action more cute and romantic.

This is the final version of the flying kiss emotion with color. I have purposely increased the line thickness so that the shape is more visible when we export the smaller version for msn in the following step.

In order to install this cute emoticon in your msn, we have to export it to an animated gif in 50x50px resolution. We go to File>Export>Export Movie or Ctrl+Shift+Alt+S and choose the following settings.

Then we open up msn and go to tools>emoticons. And click “create” button on the top right corner to launch the “Add a Custom Emoticon” window.

In the first column we click on “Find Image” button and choose the animated gif that we have just exported. Then we type in a keyboard short cut in the second column and a name in the last column. And the cute emoticons for msn is ready to be passed on to your friends and lovers at a touch of your fingers, Have Fun!

Other Design Articles You May Find Interesting

12 Comments | Write a Comment

  1. Tanjil islam says:

    Very nice animation . I will try that. I am beginner in Flash 🙂

  2. David says:

    Yep, that’s pretty much my level with Flash Aaron – novice 😉

    Nice easy to follow Tute,


  3. Swamykant says:

    Nice post. Thanks for share.

  4. nextgenjob says:

    Great and perfect step by step tutorial to create an emoticon,which I get helpful.

  5. Sami John says:

    Nice animation, especially when the heart is flying towards you.

  6. AK says:

    Cute 🙂

  7. zohaib says:

    well explained and useful

  8. uttam says:

    Its really cool to see a flying heart coming towards you. Love to read

  9. Stefi Watson says:

    So cute.I always loved and appriciated these Emoticon.I use them a lot while taking to my friend so here i find it interesting post.

  10. ToFast says:

    Wow it wonderfull i like learn it, thanks!

17-09-2014 | Comments Off on Top 50 sport wordPress themes
18-06-2013 | Comments Off on 20 sets of free grunge photoshop brushes
21-01-2013 | Comments Off on Free futuristic fonts from
06-01-2013 | (2) Comments
24-11-2012 | Comments Off on Make your own business card for free
08-02-2012 | (1) Comment
  • Free Brushes
  • FudgeGraphics
  • CrazyLeaf Design Blog
  • Fuel Your Creativity
  • Photoshop Tutorials and Design Resources
  • touch up photo retouching services
  • Small House Design
Follow My Twitter Subcribe Full RSS