SEARCH
Newsletter
Subscribe to get design tips, latest trends, free stuff and more.
It doesn't look like an e-mail address

hosting

  Tutorials Photoshop ImageReady Animation Exploding Text Animation

Exploding Text Animation

Here's a neat little effect using just the 'Spatter' filter on a rasterized text layer, then brought into Adobe ImageReady for a simple four frame animation. First, select the 'Type Tool (T)' image 1 (or press the 'T' key on the keyboard to make it the active tool) and place a type object onto your document at the insertion point. (I used the word EXPLODE)

Here is the Layers Palette screen shot.

image 2

Next, select that Type Layer, then go 'Layer/Type/Convert To Shape'.

Then (as I have captured below) right click (Mac: Control click) on that Layer and choose 'Rasterize Vector Mask'.

image 3

With the rasterized type Layer still active, go 'Filter/Brush Strokes/Spatter' and start with the settings that I have captured in the below link.

Click here for the 'Spatter' settings.

Primarily, with the 'Spatter' settings, we'll span three more (duplicated) versions of this 'Layer' with the 'Radius' shifting to the right and the 'Smoothness' shifting to the left.

Note: After each duplication as outlined below, hide the previous layer so that you can see the effect on screen.

Next duplicate the 'Spattered' layer so that your Layers Palette looks like mine below.

image 4

Next, have the 'Explode copy' Layer active, and again, go 'Filter/Brush Strokes/Spatter' and adjust the settings as I have them captured below.

image 5

Next duplicate the spattered 'EXPLODE copy' layer so that your Layers Palette looks like mine below.

image 6

Next, have the 'EXPLODE copy 2' Layer active, and again, go 'Filter/Brush Strokes/Spatter' and adjust the settings as I have them captured below.

image 7

Finally, duplicate the spattered 'EXPLODE copy 2' layer so that your Layers Palette looks like mine below.

image 8

One last 'Spatter' repeat filter on the active 'EXPLODE copy 3' Layer, with the below settings.

image 9

As captured above, we should have a total of five 'Layers' including the default white Background Layer. Next, we will jump to Adobe ImageReady and use those separate Layers to correspond to a single frame of action to create the affect of exploding text.

So, to begin the animation, select the original 'EXPLODE' layer and hide all the others. Then hit the 'Jump to ImageReady' button image 10 on the ToolBar.

This will launch Adobe ImageReady, with the previous Explode document already open and ready for animation.

You may need to adjust your palette windows so that it will be easier to work and move around. If the Animation Palette is not visible, simply go to 'Window/Animation', to bring it to the foreground.

Here is a screen shot of how my workspace appears at the start of the animation.

Note: The Animation window always starts with current visible Layers, so for frame one, if yours is not the case, make sure that the Background Layer and the original 'EXPLODE' Layer is visible and the rest are hidden. For the remaining frames, its just a matter of toggling the appropriate layers per new frame.

So, lets create frame two of the Animation by clicking the 'Duplicate Current Frames' icon image 11 at the bottom of the Animation Palette. Then while that new frame is still active, turn off visibility of the 'EXPLODE' Layer and turn on 'EXPLODE copy' Layer by toggling the visibility icon image 12.

Here is a screen shot of how my workspace appears at frame 2 of the animation.

Repeat the above create new frame and toggle layers for frame 3.

Here is a screen shot of how my workspace appears at frame 3 of the animation.

Repeat the above create new frame and toggle layers for frame 4.

Here is a screen shot of how my workspace appears at frame 4 of the animation.

So, it should be easy to see now, how the animation falls into place. The Layers were created in Photoshop, and each Animation Frame represents a toggled or altered state (visibility) of a Layer.

Next, hit the 'Play' button image 13 at the bottom of the Animation Palette.

(I exported it as Flash Format, so right click and choose 'Play'.)

Just a few tweaks before you choose 'Save Optimized'.

Lets turn off the Background Layer so that we can have a transparent animation. Do so by selecting the first frame, hold the Shift key, then select the last frame. This will select them all. Then deactivate the visibility icon image 12 for the Background Layer by selecting it. Then notice, as I have captured below, that the white Background disappears in all the frames within the Animation Palette.

image 15

Next, choose your looping method as I have captured below.

image 16

Next, choose 'Optimize Animation' from the Palette Menu (encircled in orange).

image 17

At the next prompt, tick the two options. (As I have captured).

Here is the final transparent animation.

(I exported it as Flash Format, so right click and choose 'Play'.)

Finally, choose 'Save Optimized As' from the 'File' menu option to save the animation.

subscribe to newsletter