Bouncing Emoticon


In this tutorial you will be learning how to make the bouncing emoticon below:
bounce.gif
Step 1:

Open up Image Ready and create a 50×50 transparent image. Open your basic emoticon and make sure you only have the basic shape, like this: see zoomed below.

base.gif

Step 2:

Now we’ll create the face. You can make a different face then the one I’m using. I’ll be making this face:

face.gif

And this is how it looks on the emote:

full.gif

Step 3:

Now we’ll make the “landing” pose. We have two poses for this, one touching the ground and one ‘bumping’, make the first like this: land1.gif

land1big.gif

And the second like this: land2.gif

land2big.gif

Step 4:

Alright, now we’ll animate it. Below you will see how to position it and what the frame rate should be.

table.gif

Go to File -> Save Optimized as… and your final image will be:

bounce.gif
Now you’re done! You’ve created a bouncing emoticon! Enjoy.

2 Comment(s)

  1. Daniel | Aug 15, 2007 | Reply

    I couldn’t understand some parts of this article rTuts - Free Designer Tutorials, but I guess I just need to check some more resources regarding this, because it sounds interesting.

  2. sketch | Mar 14, 2008 | Reply

    my photoshop doesnt have the Save Optimized as option…. i have CS3… do you need professional to do this?

1 Trackback(s)

  1. Jul 25, 2007: DesignerTuts - Free Designer Tutorials

Post a Comment