Storyboarding Text Animation - by Spacific Designs.com

STORYBOARDING TEXT ANIMATION

Storyboarding is commonly used in advertising, where several prepared Layers are Animated into Play.

1.) Open Photoshop, Let's begin by creating a new file. Go to File > New. Make it 400 X 125 pixels on a Transparent background at 72 dpi, then click OK to Create. Now, press D on the keyboard to set the Foreground Color to Black.

2.) Select the Horizontal Type tool

. Go to the Options bar and Select the font. I used Arial Regular 24 pt Crisp.

3.) Click on the work area and type your Text. Select the Move tool

to commit and Drag text to Center.

4.) In the Layers palette... click the Create a new layer button

(located at the Bottom) to Create a New blank layer. Now, Select the Horizontal Type tool

. Go to the Options bar and change font size to 72 pt. Next, click the Color well to Open the Color-Picker. Enter #CC0000 at the Bottom input box, then click OK to apply.

5.) Click on the work area and type your Text. Select the Move tool

to commit and Drag text Centering Text using the First Type as a guide and place to the Left as shown.

Now, in the Layers palette...click the Eye icon

to the Bottom layer to turn Off it's visibility.

6.) Let's now Create the Pill to go with this Text. Click the Create a new layer button

to Create a New blank layer. Hold Shift and Tap M on the keyboard until the Ecliptical marquee tool

is Selected. Go to the Options bar and Select Fixed Size and set Width and Height to 75 px.

Click on the work area to Create a Selection, then place curser Inside of Circle and Drag to position as shown.

We need to Save this Selection for later. Go to Select > Save selection. When the dialog box appears, name it Circle, then click OK to Save.

7.) In the Tool palette, click the Foreground Color swatch to Open the Color-picker. Enter #00CCCC at the Bottom input box, then click OK to apply. Now, press Alt+Backspace to Fill, then use Ctrl+D to Deselect Selection.

8.) Next, go to Layer > Layer Style > Gradient Overlay. Make adjustments accordingly in the Center panel, then click OK to apply.

9.) Click the Create a new layer button

to Create a New blank layer. Go to the Tool bar and Hold Down the Marquee button until the fly out menu appears. Select the Single Row Marquee Tool.

Click on the Center of the work area to Create a Selection.

10.) Now, go to Edit > Stroke. Set Width to 3 px and Location to Center, then click OK to apply. (Selection will Fill with Color.)

Using the arrows on the keyboard... Tap the Upper arrow 6 times to move the Selection Upward. Go to Edit > Stroke, then just click OK to apply.

11.) Next, Tap the Lower arrow 12 times to move the Selection Downward. Go to Edit > Stroke, then just click OK to apply. Now, use Ctrl+D to Deselect Selection.

12.) Time to activate the Selection we saved earlier. Go to Select > Load Selection. Click the Channel arrow and Select Circle, then click OK to Create the Selection.

Now, go to Select > Inverse. Next go to Edit > Clear and follow with Ctrl+D to Deselect Selection. (Only the lines Inside the pill will be left.)

The Layers palette should be looking like this with 4 layers.

13.) Go to Layer > Merge Visible. (This will give us Two different complete images now to use for the Storyboard.)

Now, click the Eye icon

to the Top layer to turn Off it's visibility and click the Bottom layer to Select.

We are now ready to move to ImageReady...

14.) Click on the Edit in ImageReady button

. (Located at the bottom of the Tool palette.)

15.) Go to the Animation palette and click the Duplicate Frame button

to generate Frame 2.

Select the Move tool

. Hold Down the Left arrow on the keyboard until the image moves out of view to the left. Drag Frame 2 to the Frame 1 position and Select Frame 2 once again.

16.) Next, click the Tween button

and the dialog box will appear. Add 12 Frames, then click OK to Create.

17.) Click the Duplicate Frame button

to Create Frame 15. Go to the Layers palette and click the Next layer Up to Select and turn On it's visibility. Turn Off the visibility to the Bottom layer.

Click the Duplicate Frame button

to Create Frame 16. Hold Down the Upper arrow on the keyboard until the image moves out of view to the Top. Drag Frame 16 to the Frame 15 position and Select Frame 16 once again.

18.) Next, click the Tween button

and the dialog box will appear. Add 6 Frames, then click OK to Create.

Click the 0 at the Bottom of Frame 22 and set Delay time to 2 Sec. Repeat at Frame 14.

19.) Animation is now ready to play by hitting the play button. (For a more precise animation speed) click the Preview in Browser button

, to view in a browser.

20.) Optimize and Save the file with File > Save Optimized As... Images Only (*.gif)