0% found this document useful (0 votes)
80 views

Animation: Imageready and Photoshop

This document provides step-by-step instructions for creating an animated snowman using Photoshop. It describes how to draw and layer the snowman's body parts, add textures and shadows, and create an animated snow effect falling in the background. The animation is created using Photoshop's animation panel by duplicating and moving a "snow frame" layer over multiple frames with tweening. The completed animation is saved as an optimized file for web using Photoshop's "Save for Web" feature.

Uploaded by

kizmet_love
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
80 views

Animation: Imageready and Photoshop

This document provides step-by-step instructions for creating an animated snowman using Photoshop. It describes how to draw and layer the snowman's body parts, add textures and shadows, and create an animated snow effect falling in the background. The animation is created using Photoshop's animation panel by duplicating and moving a "snow frame" layer over multiple frames with tweening. The completed animation is saved as an optimized file for web using Photoshop's "Save for Web" feature.

Uploaded by

kizmet_love
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 48

ANIMATION

IMAGEREADY AND PHOTOSHOP


FINAL PREVIEW
Step 1
open a new
document. 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 CTRL+ Click
on the layer to select it
and CTRL+ 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
CTRL+J .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 it.
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.
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 Ctrl + A to select
everything and then hit
ctrl+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.

You might also like