Rauru.com

Hi peeps,

Not too long ago I believed that it was impossible to create animated GIF files using Photoshop CS3 due to the fact that this Adobe product no longer supports ImageReady so everything had to be done using Fireworks. How wrong I was.

Today I’ll share with you a quick tutorial (made by me) on how to create animated GIF files using Photoshop CS3. Ready? First, let’s make sure you have the Animation tab active. On the toolbar, click on Window > Animation.

The Window drop-down menu.

Now, you should be seeing the Animation palette Here it is:

The Animation palette.

Done with it already? Cool! OK, let’s say we have these 2 texts “This tutorial” and “ROCKS!” and we want to use them to create our animated GIF. I’ll use 3 layers (you know what a layer is, right?) on our example: background, text one and text two. The first layer will be used to display our background (it’s obvious, I know), and the other two will show “This tutorial” and “ROCKS!”, respectively. Your layers tab should look like this:

The Layers tab.

Now, we’ll use the Horizontal Type Tool to create texts on each layer. On the left side of your Workspace simply click on the “T” icon to activate this tool. Next, click on layer one and type in “This tutorial”. Repeat the same process on layer two but this time type in “ROCKS!”. You should have something similar to this:

Text on layers.

Having fun? At this point we’ll start the whole animation thing so pay attention! In case you haven’t noticed it on the Animation palette our 3 layers are being displayed as a single image without any animation at all. We need to do something about it. Our animation should display always our background. Then, the “This tutorial” text and the “ROCKS!” text should be shown at different times (it’s supossed to be an animated GIF, right? :P). Here’s what we need to do:

1. Hide Text two: we don’t need to show the “ROCKS!” thing for the moment. Keep Background and Text one visible.
2. On the Animation pallete, click on the little arrow to display a menu. Select “New frame” to add a new one. Hide Text One and make Text Two visible again. At this point you should be seeing something like this:

   

3. Selecting both frames, change the frame delay time (small arrow under the frame icon) to 1.0 seconds. (Optional: if you want to try the transition effect out of curiosity then select frame 1 and 2, change the frame delay time to No delay and then click on the Tween button (see the image below… which is an animated GIF :D) to create a tweening effect with our frames. A pop-up menu will show: change the “Frames to add” value to anything you like (eg. 10 frames) and click OK).

   

4. Press the Play button on the Animation palette to see the image working Remember to set the Loop to Forever (left bottom corner of the animation palette)! To save the image click on File > Save for Web & Devices… Change the file type to GIF and save it. We’re done! This is the final product (the first one without the tweening effect, the second one has it):

   

Hope that wasn’t too hard

Oh, and if you liked my tutorial please don’t forget to Digg it!

This entry was posted on Wednesday, March 26th, 2008 at 6:51 pm and is filed under Design, Tutorials. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.