Make Money with Photoshop

Join our mailing list to receive the ShowAndTell-Graphics Newsletter. You will get an email whenever a new tutorial is added, or when new Myspace layouts are created.

At ShowAndTell-Graphics we value your privacy. Please view our privacy policy.

Come join me on Myspace! Click here to view my page. Drop me a note and say "Hey!"

Search Query
Do you want to know how it's done? Learn how to use Photoshop the easy way!

Animated Bobble Head
with Video Tutorial
Photoshop Training

I thought I would do a tutorial that was a bit fun and light hearted. I created a bobble head image for a friend of mine, and we couldn't stop laughing. There are so many different ways you can go with this, so make sure and use your imagination. The man in this picture is so serious looking. It seemed like a perfect candidate for this. It is easiest to use a picture with a white background. The reason is that, when you start moving the head around, you can see through to the background. So unless you want to recreate the background, remove it from your subject. You can always drop it onto a different background later. Check out the Bobble Head Video Tutorial.

Here is the picture I will start with.

The first thing you will want to do is make sure that your picture is not labeled as a background in the layers palette. If it is, double click on the layer, rename it bobblehead, and click OK. Right click on the layer and select "Duplicate Layer". Create a new layer by selecting Layer/New/Layer. Call this layer "White" and drag it down so it is on the bottom of the stack. Click Edit/Fill and choose white. Your layers palette should look something like this.

Now highlight the Bobble Head layer. We need to select and remove the head from this layer. I am going to use the Pen Tool to make this selection.

Click all the way around the head. You may need to zoom in a bit to make sure you get a good selection.

After you complete the path, we will need to change the path into a selection. Do this by clicking on the paths tab in the layers palette, and selecting the "Load Path as a Selection" button.

Now you can just hit delete to remove the head from that layer. It won't look like it is gone because of the duplicate layer on top of it. While we still have our dancing ants, highlight the Bobble Head Copy layer on top. We need to remove everything but the head for this layer. Choose Select/Inverse and hit delete. Now we should have one layer with no head, and one layer with only a head. Hit Ctrl+D to deselect.

Turn off the Bobble Head Copy layer by clicking on the little eyeball on that layer. Now you can see if anything was left behind when we deleted the head. If there is, just use the eraser to clean it up.

Next we need to fill in the white part up to the back of the jacket line on the Bobble Head layer. I am going to use the Clone Stamp Tool.

First we are going to make a black coat line across the top. With the Clone Pattern Stamp selected, Alt+click in an area of the coat, and paint across. Make sure that the mode at the top of the page is set to "Normal". You might need to Alt+click a couple of times to get all the way across. Don't worry it it doesn't look absolutely perfect. It is not necessary since most of it will be hidden behind the head anyway. We are just creating a bit of background so that white does not show when the head is moving.

Do this all the way across.

Now we will do the same thing with the skin that is showing from the neck to fill in the rest of the white. When you get done filling it in use the Blur Tool at a strength of 30% over the skin to soften it up a bit.

Next, highlight the Bobble Head Copy layer that has the head on it. Right click on the layer and select duplicate layer. Do this one more time. Now you should have 3 head layers. Name the top head layer "Right", the middle head layer "Middle" and the bottom head layer "Left".

Turn off the "Middle" layer and the "Left" Layer by clicking on the eyeball for those layers. Now we need to rotate the head on the "Right" layer to the right. Choose Edit/Transform/Rotate, and pull one of the handles to the right. When you have it where you want it, click enter.

Move the head (Hotkey V) so that the neck lines up properly and doesnt' look like he has a broken neck. Turn the "Middle" layer on and off to get a reference point. You will want to make sure that the bottom of the chins are lined up.

Do the same thing with the "Left" layer, except rotate the other way. When you are done, and all the layers are turned on, you should have something that looks like this.

Now we need to jump over to ImageReady to create our animation. Select the "Jump to ImageReady" button.

Once ImageReady opens up you should see your document and the animation palette. If you don't see the animation palette, select Window/Animation and make sure there is a checkmark there.

Go to the layers palette and turn off layers "Right" and "Left". Now we are going to add a new frame. Click on the drop down arrrow on the animation palette and select "New Frame".

This will create another frame just like the one we already have. At this point we need to turn off the "Middle" layer and turn on the "Right" layer. Repeat this process until you have one frame of the "Middle", one frame of the "Right", another frame of the "Middle", and one frame of the left. Four frames in all.

Once you have all of your frames, push the play button on in the animation window to see how it turned out. If you wish to slow the animation down a bit, you can change how long each frame is displayed before it goes to the next. Select all frames and hit the drop down arrow that shows the time. I have set mine to .2 seconds.

When you have it how you like it, you can save it as an animated GIF to share on the web. To do this, select File/Save Optimized As. Select a folder to save and give it a name. Save as type Images Only (*.gif). You should have a gif file that looks something like this.