Animating Warped Text

Use the Text Warp feature to add twists and turns to text as you create animation frames in ImageReady. Learn the technique here, and then try it on text of your own to animate a text-based logo or Web banner.

1.	Create a New File in ImageReady This text-based animation is easy to make from scratch. You'll create some text and give it a twist by applying the Flag style in the Warp Text dialog box. Then you'll create animation frames and make a simple adjustment to the perspective of the warped text on each frame. Finally, you'll copy, paste, and reverse some of the frames to make the text appear to twist back and forth. The Warp Text feature is available in both Photoshop and ImageReady. For this project you'll work in ImageReady, so you can manipulate the warp effect as you create animation frames. TIP Animating with Effects. In this animation you vary the Warp Text effect on a single layer as you move from frame to frame in the Animation palette. You don't have to make a separate layer of artwork for each animation frame. This is similar to animating a layer style. Start by making a new file in ImageReady by choosing File>New. Set Width to 600 pixels and Height to 300 pixels. Choose white as Contents of First Layer. Click OK to open a new image.
2.	Set Foreground/Background Colors Set the Foreground and Background color boxes in the toolbox to the colors you'll use for your text. First click the Foreground Color box to open the Color Picker. In the Color Picker, choose bright blue (R:102, G:153, B:255 or hexadecimal #6699FF). Then click the Background Color box and choose bright green (R:102, G:255, B:51 or hexadecimal # 665533). (Web designers often specify colors by hexadecimal number, because that's the way colors are described in HTML code.) Add Text Select the Type tool in the toolbox. Set the following type options in the Options bar: Font Family: Arial Font Style: Regular Font Size: 130 px (typed into the Font Size field) Anti-aliasing: Strong Color: Foreground Color. Then click in the image and type the word warped. Recolor Part of the Text Select the last two letters of the word warped by clicking and dragging over them with the Type tool A. Press Command/Ctrl-H on your keyboard to make the highlight invisible so you can see the selected letters. In the Options bar, choose Background Color from the Color menu B. Then select another tool in the toolbox to commit the change to the type layer. Don't be confused by the question mark in the Color field in the Options bar. It means that you have more than one color on this type layer. Center the Text Make sure the warped type layer is selected in ImageReady's Layers palette. Select the Move tool in the toolbox. In the Options bar, click the Align Layer Vertical Centers icon A and the Align Layer Horizontal Centers B icon to center the text in the image. Open the Animation Palette Now you'll start creating the animation. Select the Original tab in the document window. (If the Optimized, 2-Up, or 4-Up tab is selected while you're making an animation, you'll have to wait each time you add a frame for ImageReady to try to optimize that frame.) If you don't see the Animation palette, choose Window>Animation to open it. Frame 1 of the animation is automatically displayed in the Animation palette. Open the Warp Text Dialog Box You'll start by bending the text on Frame 1. Check that the warped layer is still highlighted in the Layers palette. Select the Type tool, and click the Warp icon on the Options bar to open the Warp Text dialog box. Set Text Warp Options for Frame 1 In the Warp Text dialog box, choose the Flag style from the Style menu A. Leave the Horizontal button selected to establish the horizontal orientation of the warp B. Move the Bend slider to 43% to set the amount and direction of the distortion C. Drag the Horizontal Distortion slider to 100% to apply perspective to the warp D. In the following steps, you'll change this Horizontal Distortion slider on each frame to create an animating twist. Click OK. Add Frame 2 Click the Duplicate Animation Frame button in the Animation palette A to create Frame 2 B. Frame 2 is currently an exact copy of Frame 1. You'll change its content in the next step. Change the Warp on Frame 2 Check that Frame 2 is selected in the Animation palette, the warped type layer is active in the Layers palette, and the Type tool is selected in the toolbox. Click the Warp icon in the Options bar to reopen the Warp Text dialog box. In the Warp Text dialog box, drag the Horizontal Distortion slider to 75% A. Leave the other settings as they are, and click OK. Leave this frame selected in preparation for another new frame. Add and Warp Frames 3 through 9 Repeat Step 10 seven more times until you have a total of nine frames. Each time, make sure the last frame is selected in the Animation palette, duplicate that frame, then change the distortion of the new frame by increasing the Horizontal Distortion field of the Warp Text dialog box by 25%. Here's a summary of the value that should be in the Horizontal Distortion field on each frame: Frame 1: 100% Frame 2: 75% Frame 3: 50% Frame 4: 25% Frame 5: 0% Frame 6: 25% Frame 7: 50% Frame 8: 75% Frame 9: 100% TIP Deleting Frames. Don't worry if you make a mistake as you create an animation. You can delete frames at any time by dragging them to the trash icon at the bottom of the Animation palette or by selecting them and clicking the trash icon. To delete an entire animation, click the side arrow on the Animation palette and choose Delete Animation.
12.	Preview in ImageReady Preview what you've made so far by clicking the Play arrow at the bottom of the Animation palette A. The animation plays in ImageReady's document window. Click the Stop button that replaces the Play arrow to pause the animation. We recommend doing this from time to time as you build an animation to check that the animation works as expected. Copy Frames 2 through 8 Click on Frame 2 in the Animation palette, hold the Shift key, and then click on Frame 8 to select Frames 2 through 8. Click the side arrow on the Animation palette and choose Copy Frames A. Paste the Copied Frames Select Frame 9 in the Animation palette. Click the side arrow and choose Paste Frames A. In the Paste Frames dialog box choose Paste After Selection B and click OK. You now have a total of 16 frames in the Animation palette. The frames you just copied and pasted are Frames 10 through 16. Leave those frames selected. Reverse the Copied Frames With Frames 10 through 16 selected, click the side arrow on the Animation palette and choose Reverse Frames. This reverses the order of the copied frames, so your animation twists back and forth. Preview the Animation Preview in your default Web browser by clicking the Preview in Browser button in the toolbox A. The browser preview includes information about the file and HTML code that won't be saved with the final animation B. The frames probably play faster in your browser than they do in ImageReady's preview. C A U T I O N Must be a GIF. If you see a warning when you try to preview in a browser, click Cancel and change the Format field in your Optimize palette to GIF. Re-click the Preview in Browser button.
17.	Set the Time Delay Back in ImageReady, select all frames in the animation. Click the time caption A under any frame and choose 0.1 seconds B from the pop-up menu. This slows the animation, setting the same display time for each frame. The time delay is only an approximation of how long each frame will appear in a viewer's browser window. You can't predict exactly how fast an animation will play in all browsers because that depends in part on the speed of each computer's processor. Set the Number of Repetitions Leave the Looping option set to its default of Forever. This will cause the animation to repeat itself in a viewer's browser until the viewer moves to another Web page. Be aware that a repeating animation can distract viewers' attention from other elements on a page, so use this feature with discretion. Optimize the Animation Click the Optimized tab and choose GIF optimization settings in ImageReady's Optimize palette A. (See GIF Optimization Settings in Chapter 1.) You cannot optimize an animation as a JPEG or PNG because those formats do not support animation. The settings you choose here apply to all the frames of the animation. Click the side arrow on the Animation palette and choose Optimize Animation. Make sure Bounding Box and Redundant Pixel Removal are checked B to maximize file savings, and click OK. TIP Switching Text. You can change your mind about the content of this animation without having to redo the whole thing. Click the Edit in Photoshop button in ImageReady. In Photoshop highlight the text with the Type tool and type and color a different word. Then click Edit in ImageReady. All frames in the animation automatically update with the new text.
20.	Save Choose File>Save Optimized As, set Format/Save as Type to Images only A, and click Save. ImageReady saves a single GIF file containing the whole animation. Choose File>Save As to save the source image.