Knowing how to animate objects in Photoshop can be very useful in web design, avatars , logos and much more. Here is a simple tutorial for beginners in the spirit of winter which will explain how to create an animation in Photoshop. Anyone can do this, so let’s begin!

Final Image Preview

Take a look at the image we’ll be creating. Want access to the full PSD files and downloadable copies of every tutorial, including this one? Join Psd Plus for just $19/month. You can view the final image preview below.

• Program: Photoshop
• Version: CS3
• Difficulty: Beginner
• Estimated Completion Time: 1 h

Step 1

First of all, you’ll need this texture: inthename-stock. Now open a new document. I usually work on really big documents because i can work on the details better and you can always decrease the image size later . So, as you can see in the picture below, the background is blue and the color code is #89defd. Fill the layer with this color.

Step 2

Create a new layer. Select the Ellipse tool and create a big circle. Create a new layer and make a new circle, only smaller this time. The circles don’t need to be perfectly round . Fill them with white. Put the small circle on top of the big one.

Step 3

Create a new layer between the two existing ones with the circles. Select the Brush Tool, with sharp edges, and make a big circle like in the image below. This will be the head’s shadow. The code for the color is: #CCCCCC. Now go to the body’s layer, press Command + Click on the layer to select it and Command + J on the shadow’s layer . This new layer is the one we are going to use so you can delete the other one . Now go to Filter > Blur > Gaussian Blur and add some blur (3-4%) . Now you have the shadow of the head.

Step 4

Go to the body’s layer and select it. Pick the Gradient Tool (radial gradient) and drag from the center of the circle outward. Your image should look like in the small image . Now set the Opacity to about 20%. Now your image should look like in the large picture. Do the same for the small circle.

Step 5

The next step is to create a texture for the snowman. For this select the brush tool with sharp edges and make the following presets for the Shape Dynamics (all to 0% ) , Scattering (372% , 1%, 0% ) , Other Dynamics (100% , 0% ). Now fill the 2 circles with a small brush, add more points to the edges and fewer in the middle. Next you have to set the blending mode to Multiply and the Opacity to about 35-40%.

Step 6

Select the brush tool with sharp edges without the previous presets and draw two black eyes.
Go to the layer style and make the following presets:

Step 7

With the Pen Tool, draw a shape that looks like a carrot and fill it with orange. The color code is: # e37b19. Now let’s make some light with the Dodge Tool on the right part of the nose and some shadows on the left side of the carrot.

Step 8

In this step we’re going to do the shadow of the nose so pick a round basic brush with sharp edges and black color and make a circle like you see in the image, then press Command +J . Make a mask for this layer and with a smooth round brush, erase some parts of the mask. If it’s still too dark, you can change the layer’s opacity.

Step 9

Let’s make the mouth now. Select the Ellipse tool and create a circle on a new layer. Now stroke it. Make the presets like you see in the image and erase the top part of the mask. The small lines are created with a brush.

Step 10

With the Pen Tool make a shape like you se in the image. This shape should look like a fur from a hat. Fill it with white. Make the left part a bit darker with a brush.

Step 10

Next we’ll make the hat’s shape with the pen tool on a different layer, just below the one with the fur. Fill the shape with red .The code for this color is # a90505.
Now drag in the texture and place it on top of the hat . Set the blending mode to Luminosity and the Opacity to about 20-25%.

Step 12

Give it some depth with the Burn Tool for the shadows and Dodge Tool for the light.

Step 13

Let’s make the buttons . It’s the same technique as we used to make the eyes. Select the brush tool with rough edges and draw a few buttons . Make the adjustments on the layer style like in the image below

Step 14

Select the Ellipse tool and create a small circle under the hat. Fill it with white and give it some shadow. Now select the basic brush with the presets that we did for the snowman’s texture and paint some fur with white.

Step 15

This is the part were we create the scarf. Create a shape, like in this image, with the pen tool . Fill it with red (#8b0404).

With the pen tool make some shapes like I did in the image and fill them with green. The code for this color is #0b6a16. Use the Burn and Dodge Tool for the light and shadows.

Create a new layer under the scarf layer and, with a brush, add a shadow.

Step 16

Add as much snow as you like with a simple brush.

Step 17

Now this is a long step because we’ll add some adjustment layers so the snowman won’t look like a desktop icon .
Add some curves.

Go to Filter > Filter Gallery > Watercolor and make the settings like in the image. Set the opacity to about 30%.

Adjustment Layers > Photo Filter > Warming Filter 50%.

Adjustment Layers > Color Balance +20, -1, -29.

Adjustment Layers > Gradient map.

Filter > Blur > Gaussian Blur 3 px, Opacity 30%.

Go to Filter > Filter Gallery > Accented Edges. Use this only on the scarf.

Adjustment Layers- Color Balance +38, +31, -41. Use this on the background to create a warmer atmosphere.

Use some curves too.

Step 18

Create a new file bigger than the snowman and fill it with white dots using a smooth brush with different sizes. I’ve added some snow flake brushes too. It’s very important that the snow layer is bigger because the snow needs to fall down .
I’ve used a blue background just for the demonstration but you need to use a transparent background.

Step 19

Drag the snow you created at step 18 in a new layer in the snowman file. Make sure the new layer’s corner is like in the image below. You will not see the entire snow.

Duplicate this layer and name it "snow frame 2” and close the layers preview. Then, while holding the SHIFT key (to make sure you move the image diagonally), move down and to the right of the original snow layer like in the image below.

Click the eyeball for the preview of the new layer and things should look like this. To make the animation look natural in a loop the last frame of the animation must be similar to the first.

Hit Command + A to select everything and then hit Command +J to jump from the "snow frame 2” layer to select only the part that is visible.

select layer „snow frame 2 copy” and „snow frame 1” and hit Command +E.

Step 20

Move the newly created layer „snow frame 2 copy” like in the image:

Step 21

Go to Window > Animation and you will see a new panel like in the bottom of the image.

Step 22

On the Animation Panel, hit the new layer button. Then move the "snow frame 2 copy” like shown in the image.

Step 23

Things should now be like in this image. When you click on frame 1 in the Animation Panel, the "snow frame 2 copy” layer should be like in the image below and when you click on "frame 2" the snow should move like below:

Step 24

On the Animation Panel click the Tween button and then enter in the tween panel the info like in the image below, and then hit OK. You should have 27 frames.

Step 25

To save as an animation: Go to File > Save for Web & Devices (FILE>SAVE OPTIMIZED AS in CS2 or older). In the Save for Web & Devices panel, make sure the settings are like in the image below and then hit save.

Conclusion

Here is how your work should look now! Enjoy :)