|
Home - Animation - Video - Projects - Image Manipulation - IWBs - Interactive - Presentations - Multimedia Tutorials - Other Tutorials - Art Links - Gallery - About
|
||
|
Animate Text: Elastic
Create
the artwork in Photoshop
|
||
| Create the
artwork in Photoshop
|
||
 |
Open Photoshop
and create a new file 400 x 100 pixels with a dark background colour.
|
|
 |
Click
on the Horizontal Type Tool and on the Options toolbar select a simple
sans serif font such as Arial and a rose pink colour. Type your text.
|
|
|
||
 |
|
 |
 |
 Duplicate
the layer by selecting Duplicate Layer from the Layer menu. Click on the
Create Warped Text tool and select Bulge from the Style menu. Keeping
the Horizontal and Vertical distortions at 05, drag the bend slider to
+50%.
|
|
 |
Repeat Step 4 three times
decreasing the amount of bend each time e.g. +40%; +25%; +10%. You should
now have 6 layers including the background colour and unwarped text
layers.
|
|
Adobe
Photoshop 7 & ImageReady
Select
the layer Style icon at the bottom of the layer palette, choose Bevel
and Emboss from the menu and in the dialog box that appears set the
following options to apply a layer style that looks rubbery:
 |
Duplicate the
layer and set the Create Warped Text Style to None.
|
|
 |
To
make the elastic seem to bend in the other direction repeat step 4a
further three times, starting with a bend setting of -10%
and increasing the amount of bend each time e.g. -25%; -40%;
-50%.
|
|
 |
Add
an effect of blurred motion by duplicating the layer where Bend is -10%
and selecting Motion Blur from the Filter > Blur menu. The Angle
should be 90% and the Distance about 25 pixels.
|
|
 |
Repeat
this step on the layer where the Bend is +10%. You can add other
distortions from the Warp menu on new layers as you wish. Save your work
as a layered Photoshop PSD/PDD file so that it can be edited in future.
|
|
| Create the
animation
|
||
 |
Open
ImageReady by clicking on the Jump to ImageReady icon at the bottom of
the Tool Palette or use the keyboard shortcut Control+Shift+M.
|
|
 |
Working with both the
Animation and Layers Palettes,
click on the first frame of the animation and click on the Duplicate Frame icon.
|
|
 |
With the new frame selected go to the
Layers Palette and toggle off all the visibility icons except
for this layer, so that it is the only one visible in Frame
2.
|
|
 |
Continue
duplicating frames and toggling on visibility for the corresponding layer, as
in steps 11 and 12, until you have a separate frame for each layer except
the background, which should be visible in each.
|
|
 |
Click Play on the Animation Palette to play the animation. |  |
 |
Set the animation to play once only, continuously or for a fixed number of repetitions using the Loop Count option: Once/Forever/ Other > enter the number of plays. | |
| Optimize
and save
|
||
 |
Optimize the animation
to reduce file size/download times. If the Optimize palette is not
visible, select it from the Window menu. In the preview window, choose
either the 2-Up or 4-Up tab, click on a version of your animation and
try different options on the Optimize palette. You can compare how the
different settings affect image quality and file size. With my selection
set at GIF, Web, Diffusion, Colours > 16, Dither 0%, the file size
was compressed from 330 KB to 2.25 KB, taking 2 seconds to download at
28.8 KB per second.
|
|
 |
You
can check what your animation will look like in a browser: choose File > Preview
In and select your target browser from the sub-menu.
|
|
 |
Finally
save your animation. Select the optimised version you prefer and on the
File menu choose Save Optimised As. Animations must be saved as GIF
files as JPEGS only give the first frame.
|
|
| Variations
|
||
|
A simple variation of this process is to type a word or phrase in Photoshop, duplicate the layer once for each letter, and delete the letters layer by layer starting at the second from the top layer of the stack before switching to ImageReady to complete the animation. |  |
|
This technique is equally effective with a series of Wingdings symbols. Here I've used a font called Swifty. |  |
|
You can also apply the technique to a group of people or objects by erasing individuals one by one. |
 |
|
© RKM 2002 - 2007 |
||
|
Home - Animation - Video - Projects - Image Manipulation - IWBs - Interactive - Presentations - Multimedia Tutorials - Other Tutorials - Art Links - Gallery - About |
||
