The Photoshop Portion – Preparing Your Image(s)

Step one requires that you use your decision making skills to figure out what image you want to use. For this example, I have selected a character which I found in this wonderful Vectortuts+ tutorial.

Next we're going to want to drop it in to Photoshop for some basic preparation. We're are going to end up with three images, in order to understand what role each will play, please check out the helpful diagram below.

If any of the following confuses you in any way, take a look at the images I have included in the downloadable files, it

If you use Skype I am sure that you noticed that animated button for adding more people to a chat. When you click on it the icon on the left "jumps" for a few times. I love that animation. And that's why I'm going to show you how to create the same button using jQuery and some simple CSS.

If you are not sure what button am I talking about, image below might help you.

Ok, the task here is quite simple - I want the icon to jump for a few times when I hover the button. (In Skype window this icon jumps when you click on it, but I think it would be much better to have it jump on hover)

The button itself consist of an image and text placed inside of a link.

<a class="button" href="#">
    <img src="button.p