Morphing Animation
Programs used: Adobe Photoshop 6, ImageReady 3
|
Animation is an important element within tour designs these
days; general surfers will give more attention to anything that moves or
flashes compared to anything that is static. However, surfers can soon build
a tolerance to even the most annoying, flashing banners that designers come
up with.
In this tutorial, I'll show you an interesting animation that can be used
to "morph" one line of text into another line of approximately
the same length. This will give you some inspiration so you can come up
with your own sweet animations!
1) Preparing Your Animation
Open up Photoshop and create a new canvas, 175 x 45 pixels, with a transparent
background. Change your foreground color to a dark green/blue (hex value
#003366), and use the paint bucket tool 
to fill layer 1 with this color. |
2) Now change your foreground color to white. Use the text tool 
to put some text on top of your background layer. The text can be anything: |
 |
3) Duplicate this layer (by left-clicking on the text layer in the layers
palette and dragging it onto the "Create a new layer" button 
at the bottom of the layers palette) and hide the original text layer (by
clicking on the small eye 
in the layers palette). |
 |
| 4) Now change the text of the second layer to something else. It will
need to be about the same length as the first so that the animation looks
smooth. You can change the kerning between letters for fine-tuning. |
 |
| 5) Hide this new text layer and make the original "Morph Into"
text layer visible again. Duplicate this layer again, but this time leave
the text as "Morph Into". Hide the original text layer, so that
you can work on the duplicate you have just made. |
 |
6) Add a layer mask to "Morph Into copy" by clicking the "Add
a mask" button  .
Your layers palette should be looking like this: |
 |
7) Now select the rectangular marquee tool 
and make a selection over the top of the canvas so that it just touches
the top of your text. |
 |
| 8) Move the selection down 3 pixels using the cursor keys. Your canvas
should be looking something like the image below: |
 |
| 9) Make sure you are working on the layer mask. Press [D] on your keyboard
to reset your foreground and background color, then hit [ALT] + [BACKSPACE]
to fill your selection with black. Deselect (by pressing [CTRL] + [D]),
and you will notice that where your selection was, the word has been masked
and is no longer visible. |
 |
10) Repeat this step with the bottom of the text layer, this time moving
the selection up 3 pixels: |
 |
| 11) Duplicate your original "Morph Into" text layer and move
this new "Morph Into copy 2" text layer above the "Morph
Into copy" layer. Add a layer mask to this one too. Hide the other
"Morph Into" layers so you can work on this new layer. |
 |
12) Using the rectangular marquee tool, make a selection just touching the
top of the text. This time, move the selection down 6 pixels and fill the
selection with black (make sure you are working on the layer mask). Repeat
for the bottom using the same method as the previous layer. |
 |
13) Once more, duplicate the "Morph Into" text layer. Move this
new "Morph Into copy 3" above "Morph Into copy 2" and
add a layer mask. Hide any unnecessary layers. Using the same method used
in previous steps, make a selection just touching the top of the text, however
move the selection 9 pixels before filling the mask with black. Repeat for
the bottom. |
 |
You've finished making the separate layers needed to animate the "Morph
Into" layer, now you'll need to make the separate layers for "Something".
Don't worry though, now that you have layer masks on each separate layer
on the "Morph Into" text layers, it will be so much easier.
14) Hide all the "Morph Into" text layers so you can concentrate
on the "Something" text layers. Duplicate the "Something"
text layer, then hide the original layer. Hold down [CTRL] on the keyboard
and click on the layer mask of the "Morph Into copy" text layer.
Make sure that the "Something copy" text layer is still active: |
 |
| Once you've clicked on the layer mask with [CTRL] held down, you should
see a perfect selection of the layer mask on your canvas: |
 |
| 15) With the "Something copy" text layer active, now press the
"Add mask" button and a layer mask using the current selection
should be added: |
 |
| Your canvas should be looking as below: |
 |
| 16) Now make a duplicate of the "Something" text layer and move
it above the "Something copy" text layer. Use the exact same steps
as above for the new "Something copy 2" layer, however instead
of using the "Morph Into copy" layer mask, use the "Morph
Into copy 2" layer mask. Repeat again with a new "Something"
text layer. Your layer palette should be looking like so: |
 |
17) Now hide the "Something copy 3" text layer and make the
"Morph Into" text layer visible. Transfer your document into ImageReady
(press [SHIFT] + [CTRL] + [M]) for the animation process.
18) Animating Your Text
In ImageReady, set the frame delay of the first frame to 1.5 seconds. |
 |
19) Now create a new frame from the first by pressing the "Duplicate
current frame" button
and set the frame delay of this one to 0.1 secs. |
 |
| 20) While still having the second frame active, hide the "Morph Into"
text layer and make the "Morph Into copy" text layer visible: |
 |
| Your animation palette should be looking like so: |
 |
| 21) Create a new frame (the delay should already be set to 0.1 secs) and
on this one hide the "Morph Into copy"text layer and make the
"Morph Into copy 2" text layer visible. |
 |
22) Create another new frame and hide the "Morph Into copy 2"
text layer and make the "Morph Into copy 3" layer visible: |
 |
23) Create a new frame (this should be frame 5) and on this frame hide
the "Morph Into copy 3" text layer and make the "Something
copy 3" text layer visible.
24) Now that you've gotten the hang of making the animation, here's a list
of all the frames and which layer should be visible on that frame:
|
| Frame |
Visible Layer |
| Frame 1 |
| Frame 2 |
| Frame 3 |
| Frame 4 |
| Frame 5 |
| Frame 6 |
| Frame 7 |
| Frame 8 |
| Frame 9 |
| Frame 10 |
| Frame 11 |
| Frame 12 |
| Frame 13 |
| Frame 14 |
|
| Morph Into |
| Morph Into copy |
| Morph Into copy 2 |
| Morph Into copy 3 |
| Something copy 3 |
| Something copy 2 |
| Something copy |
| Something |
| Something copy |
| Something copy 2 |
| Something copy 3 |
| Morph Into copy 3 |
| Morph Into copy 2 |
| Morph Into copy |
|
|
For instance, for the next frame (frame 6), you would hide
all text layers other than the "Something copy 2" text layer.
Frame 7 should only have the "Something copy" text layer visible,
etc.
|
25) Now set the delay for frame 8 to 1.5 seconds. Change the optimization
settings to "GIF 128 Dithered:
|
 |
| 26) Press [SHIFT] + [CTRL] + [S] to save your optimized image as a gif.
It should look something like this: |
 |
| Looks pretty smooth! Try to play around with the layer style of the font
to make some sweet looking animations. You can also try to make the words
disappear horizontally instead of vertically. |
 |
