Morphing Text

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.

Morphing Animation Programs used: Adobe Photoshop 6, ImageReady 3

Morphing Animation
Programs used: Adobe Photoshop 6, ImageReady 3