| Snowfall Tutorial |
This basic snowfall tutorial is going to take you from
to
Done in Photoshop 7 and ImageReady, it is basic in the sense that it is merely a starting point and is endlessly
adaptable. I am using it to make a 100 x 100 icon, but with appropriate adjustment, it can easily be expanded
for a larger piece. You can use actual snowflake brushes, hearts, shamrocks, confetti, stars - heck - you can
make it rain cats and dogs if you want. You can warp the snow layers using the Distort filter and make them
swirl. Experimenting with it is lots of fun.
This tutorial can be adapted for the animation palette in Photoshop CS3.
Note: Keyboard shortcuts are faster and more efficient to use, but since not everyone employs them, I will be using 'point
and click' for this tutorial.
Before we start, here's a
TIP: The Nudge function moves a picture or text layer pixel by pixel and is excellent for delicate adjustments. I
will be using it in the animation process, but it's also handy in preparing the base. First, make sure that the
'snap' and 'snap to' options are turned off in the View menu. Then select the layer in the layers palette, click on
the 'move' tool (V) in the left hand toolbox and use the arrow keys to move the layer to the position you want.
******
to
Done in Photoshop 7 and ImageReady, it is basic in the sense that it is merely a starting point and is endlessly
adaptable. I am using it to make a 100 x 100 icon, but with appropriate adjustment, it can easily be expanded
for a larger piece. You can use actual snowflake brushes, hearts, shamrocks, confetti, stars - heck - you can
make it rain cats and dogs if you want. You can warp the snow layers using the Distort filter and make them
swirl. Experimenting with it is lots of fun.
This tutorial can be adapted for the animation palette in Photoshop CS3.
Note: Keyboard shortcuts are faster and more efficient to use, but since not everyone employs them, I will be using 'point
and click' for this tutorial.
Before we start, here's a
TIP: The Nudge function moves a picture or text layer pixel by pixel and is excellent for delicate adjustments. I
will be using it in the animation process, but it's also handy in preparing the base. First, make sure that the
'snap' and 'snap to' options are turned off in the View menu. Then select the layer in the layers palette, click on
the 'move' tool (V) in the left hand toolbox and use the arrow keys to move the layer to the position you want.
******
1. Prepare your base. If the original is high resolution, use 'image size'
to lower it to 72 ppi. In the case of .png or .gif bases, make sure the
image mode is re-set to RGB Color. Add text if desired and use
'Selective Color', 'Color Balance' or the Levels adjustment to alter the
mood of the image. Remember, a darker or differently colored background is needed to set off the snowfall. If
the base is altered in Photoshop, 'save as' 7-medium or 8-high to set the file size. If it includes more than one
layer, then use Layer : Flatten Image to compress it.
***
to lower it to 72 ppi. In the case of .png or .gif bases, make sure the
image mode is re-set to RGB Color. Add text if desired and use
'Selective Color', 'Color Balance' or the Levels adjustment to alter the
mood of the image. Remember, a darker or differently colored background is needed to set off the snowfall. If
the base is altered in Photoshop, 'save as' 7-medium or 8-high to set the file size. If it includes more than one
layer, then use Layer : Flatten Image to compress it.
***
2. Constructing the snowfall layer. Set your background color to black by clicking on the tiny B&W icon on the
bottom left and then reversing the order. Open a new document and make it 100(W) x 200(L), RGB Color mode
and set it to Background Color. For the purposes of this tutorial, I've named the document 'Snowfall_1', but it
isn't necessary for you to do so.
***
Open another new document and make it 100 x 100. Keep the rest of the above document settings and name it
'Snowfall_2'.
REMEMBER:
-The file size of this initial photoshop doc will dictate how many frames the animation can have and still keep the
icon size 40kb or smaller;
-The more snowflakes you paint, the bigger your initial document will be; ergo, the fewer the frames;
-The more frames the animation has, the slower the snow will fall.
Okay? Okay.
With the 'Snowfall_2' document selected, choose a soft round brush with a maximum pixel size of 5 to start with.
Click on the 'Create a New Layer' icon at the bottom of the layers palette, right-click on the resulting new layer
and name it 'snow'.
With the snow layer selected and the foreground color set to white, paint your snowflakes, varying the size of the
brush by hitting the [ key (smaller) or the ] key (bigger). A two pixel difference works best to add depth. If you
think the snowflakes look too sharp, don't worry. We'll fix that later. Finally, lower the opacity of the layer to 90.
Now put the two snow docs side by side and make certain the 'snap' option is off. Click on 'Snowfall_2' and from
the layers palette, select the snow layer. Press 'V' for the move tool, click on the doc and drag this layer over to
the top half of the Snowfall_1 doc. Repeat the process for the lower half, paying attention to the alignment of
the layers. The 'Nudge' function is great for small adjustments.
The document map for Snowfall_1 now looks like this: You
will notice that the layer retained its name during the transfer,
and each layer retained all its settings. Now merge the snow
layers using Layer : Merge Down.
A few more steps, and animation! I did warn you that this
would be a long one.
Open the Snowfall_1 layers palette and select the merged
snow layer:
Click and drag the snow layer onto your base. The bottom edge of the snow layer should be flush with the bottom
of the base pic.
If you like the look of a more defined snowflake, skip this part. If you want a softer look, click on the 'Add a Layer
Style' button at the bottom of the layers palette, select 'Outer Glow' and enter the settings at left.
You're done with the base pic. Do not compress it.
***
bottom left and then reversing the order. Open a new document and make it 100(W) x 200(L), RGB Color mode
and set it to Background Color. For the purposes of this tutorial, I've named the document 'Snowfall_1', but it
isn't necessary for you to do so.
***
Open another new document and make it 100 x 100. Keep the rest of the above document settings and name it
'Snowfall_2'.
REMEMBER:
-The file size of this initial photoshop doc will dictate how many frames the animation can have and still keep the
icon size 40kb or smaller;
-The more snowflakes you paint, the bigger your initial document will be; ergo, the fewer the frames;
-The more frames the animation has, the slower the snow will fall.
Okay? Okay.
With the 'Snowfall_2' document selected, choose a soft round brush with a maximum pixel size of 5 to start with.
Click on the 'Create a New Layer' icon at the bottom of the layers palette, right-click on the resulting new layer
and name it 'snow'.
With the snow layer selected and the foreground color set to white, paint your snowflakes, varying the size of the
brush by hitting the [ key (smaller) or the ] key (bigger). A two pixel difference works best to add depth. If you
think the snowflakes look too sharp, don't worry. We'll fix that later. Finally, lower the opacity of the layer to 90.
Now put the two snow docs side by side and make certain the 'snap' option is off. Click on 'Snowfall_2' and from
the layers palette, select the snow layer. Press 'V' for the move tool, click on the doc and drag this layer over to
the top half of the Snowfall_1 doc. Repeat the process for the lower half, paying attention to the alignment of
the layers. The 'Nudge' function is great for small adjustments.
The document map for Snowfall_1 now looks like this: You
will notice that the layer retained its name during the transfer,
and each layer retained all its settings. Now merge the snow
layers using Layer : Merge Down.
A few more steps, and animation! I did warn you that this
would be a long one.
Open the Snowfall_1 layers palette and select the merged
snow layer:
Click and drag the snow layer onto your base. The bottom edge of the snow layer should be flush with the bottom
of the base pic.
If you like the look of a more defined snowflake, skip this part. If you want a softer look, click on the 'Add a Layer
Style' button at the bottom of the layers palette, select 'Outer Glow' and enter the settings at left.
You're done with the base pic. Do not compress it.
***
3. Animation. With the base pic active, jump to ImageReady (Cntrl-Shift-M). I am assuming that you pretty much
know how to use it, so I won't bother with the palette layouts. Just make sure the Animation palette is active
(check Window : Animation), and your base pic shows as Frame 1. Click on the Frame Delay Time below the frame
and choose .1 seconds.
Click on the 'Duplicates Current Frame' button on the Animation
toolbar to make Frame 2. With the new frame selected and its
corresponding snow layer active, use the Nudge function to move
the snow layer downward until the top edge of the layer abuts the
top edge of the icon.
TIP: Select a snowflake as a baseline so that you know where to
stop the nudge. The movement must be smooth - any jerks will
show up in the animation.
REMEMBER: Every error you make that causes you to back-track
will result in a modicum of image loss. If you make too many
errors, delete the animation and repeat the jump. Make sure
your Photoshop document history does not include the 'Update
From ImageReady' state.
Hold down the shift key and click on Frame 1. Now you have both frames selected. Click on the Tween button on
the Animation toolbar and follow the settings below:
You will end up with 17 frames: 15 tweened plus the original 2. Select the 17th frame and click on the trashcan
icon to delete it. It is merely a duplicate of Frame 1 and will cause a blip in the animation. Press the play button to test the animation sequence.
Saving the animation: Make sure the Optimize palette is active (Window : Optimize) and choose 'GIF 128 No
Dither'.
Then go to 'File : Save Optimized As' and save the icon to your hard drive. The animation size is 25.4KB, which
means that should you want the snowfall even slower, you can still increase the number of tweens until the size
hits 40KB.
There! That wasn't so hard, was it?
*****
know how to use it, so I won't bother with the palette layouts. Just make sure the Animation palette is active
(check Window : Animation), and your base pic shows as Frame 1. Click on the Frame Delay Time below the frame
and choose .1 seconds.
Click on the 'Duplicates Current Frame' button on the Animation
toolbar to make Frame 2. With the new frame selected and its
corresponding snow layer active, use the Nudge function to move
the snow layer downward until the top edge of the layer abuts the
top edge of the icon.
TIP: Select a snowflake as a baseline so that you know where to
stop the nudge. The movement must be smooth - any jerks will
show up in the animation.
REMEMBER: Every error you make that causes you to back-track
will result in a modicum of image loss. If you make too many
errors, delete the animation and repeat the jump. Make sure
your Photoshop document history does not include the 'Update
From ImageReady' state.
Hold down the shift key and click on Frame 1. Now you have both frames selected. Click on the Tween button on
the Animation toolbar and follow the settings below:
You will end up with 17 frames: 15 tweened plus the original 2. Select the 17th frame and click on the trashcan
icon to delete it. It is merely a duplicate of Frame 1 and will cause a blip in the animation. Press the play button to test the animation sequence.
Saving the animation: Make sure the Optimize palette is active (Window : Optimize) and choose 'GIF 128 No
Dither'.
Then go to 'File : Save Optimized As' and save the icon to your hard drive. The animation size is 25.4KB, which
means that should you want the snowfall even slower, you can still increase the number of tweens until the size
hits 40KB.
There! That wasn't so hard, was it?
*****
