Professional Photo Editing – Fixsr.com

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 $9/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

By Mike Hoffman

Thank you all for welcoming me back to TipSquirrel.com! This week, we’re going to continue our exploration of blend modes in Photoshop. In the past two installments, we reviewed layer blend modes, and looked at some examples of what the “Screen” and the “Multiply” blend modes can do for us. This week, we’ll dig into Photoshop and uncover some of the hidden nooks and crannies where these blend modes are put to use within the program – and learn some ways we can use this to our advantage.

Let’s start by taking a look at layer styles. The standard styles that ship with Photoshop have descriptive names, but as Bert Monroy always says, “it’s not what they’re called, it’s what they do.” Today, we’re going to learn a bit more about what layer styles do. Let’s start with this image-in-progress:

Click To Enlarge

We have just added some text to the bottom of the image, but there’s no real “pop” to set the text off from the background. We could try a drop shadow, but adding a drop shadow to a black background wouldn’t have any effect all – or would it? Let’s add a drop shadow and take a closer look at the settings in the layer effects dialog box:

Click To Enlarge

If you’re reading this column, you’ve surely added drop shadows many times, and most likely dragged the sliders for distance, size, spread, and maybe even opacity. But take a closer look at the top, and what’s the very first option? Blend mode! And, the default setting is “Multiply,” the blend mode of shadows. And, the color is set to a default black. However, we don’t need a black shadow on our black background; we need something quite the opposite. Let’s consider changing this blend mode to “Screen:”

OK, nothing happens. Why? Because black color, when set to screen mode, becomes invisible, as we learned in Part 1 of this tutorial! So, let’s try a lighter color to go along with our screen lightening mode. Change to color to white, tweak the distance and size just a bit, and voila:

Click To Enlarge

Our drop shadow becomes a drop glow! Yes, while multiply is the blend mode of shadows, screen is the blend mode of glows, and the glow can be any color – you can even pick one to match your image, and with screen mode, as long as it is lighter than the background, this will produce a pleasing glow effect.

Click To Enlarge

Now, let’s take a look at another problem area. While the leaping man looks good against the light background, suppose we needed to place him on a dark background. We make the change, and then – we find that we didn’t do such a good job in extracting the figure from the original background, and we have a dreadful fringe:

Click To Enlarge

We can fix it with another layer style: Inner glow. That’s right, we’ll use a glow, but with the help of blend modes, we can achieve a different result. Let’s start by adding an inner glow to the jumping man:

Click To Enlarge

Now, looking at the layer styles dialog box, we see that the blend mode is set to a default of “screen,” and a color of light yellow. Our figure now has a ghastly yellow glow, and the fringe is worse than ever.

Click To Enlarge

Let’s jump in and make a change! “Screen” becomes “Multiply,” and the color yellow changes to a dark color sampled from the man’s trousers. Suddenly the light fringe blends in with the background, without a lot of messy selection, erasing or masking. Again, we’re using black in this example, but this could easily be any color necessary to produce a good blend between the subject and background.

Click To Enlarge

Why not use “Inner Shadow?” Because, Inner Shadow is a directional effect, similar to drop shadow, and is only visible on one edge of our subject. By using an inner glow, which appears around the entire perimeter, we can change the glow to a shadow with the Multiply blend mode, and get exactly what we need!

As you can see, the layer styles in Photoshop offer a new dimension of flexibility once you understand and start to apply the blend modes. A quick glance at the layer styles available shows that they are spilt into several groups according to their default blend modes:

Click To Enlarge

The real power comes when you start experimenting with those blend modes, changing them to suit your needs. I encourage you to get in there and give it a try; the more you experiment, the more creative avenues you’ll discover.

Next week, we’ll start digging into Overlay blending. Do stick around!

Possibly Related Posts:

• Photoshop Blend Modes Part 5
• Custom Black & White in Lightroom
• No Flipping Photoshop
• Photoshop Blend Mode Basics – Part 4
• Learning to Love the Lightroom Library Module!