Animated Gif in Adobe Photoshop Elements 7

We will continue to work on our animated ad in the popular 125 x 125 pixel size. We are working in Adobe^R Photoshop^R Elements 7. At this point, all of our text is on transparent layers. We need to add the background image behind the text on both of the text layers.

Turn on the visibility for all layers by clicking on the small eye icons. Right-click on the Background layer and choose Duplicate Layer from the pop-up menu. This should place a copy of the Background layer just under the layer that contains your business name.
Select both the text layer with your business name and the Background copy layer. Right-click on these layers and choose Merge Layers. This will give you one layer that contains both the background image and your business name.
Go back to the original Background layer and duplicate it again. Drag this new Background copy layer under the text layer with your tagline.

Select both the Background copy and your tagline layer. Merge these layers.

Now, we have three layers in the Layers panel. We will use the two text layers to create the animation. We do not need the Background layer any more.
Right-click on the Background layer and choose Delete Layer. We do not want this layer to become a frame in our animation.
From the Menubar, click File, Save for Web to open the dialog box. About half way down on the right of the dialog box, select the Animate checkbox.
At the bottom right, you will see the Animation section. Keep the animation set to Loop and use the drop down list to set the Frame Delay to 2 seconds. This will make each frame visible for 2 seconds which should be enough time to read the text. If you have more text on your layers, you might want to give your audience more time to read the text by setting the Frame Delay to 5 seconds.
Click on the small Preview In icon at the bottom of the dialog box to preview your animation in the browser. The browser will automatically open and display your animation. Close the browser window. You can make adjustments to the Frame Delay as needed and preview again.
When you are happy with the animation, click OK to save your animation as a gif file. You can name it StoreAd.gif.

You now have an animated square ad for your business or store. Just upload the StoreAd.gif file to your image folder for your store, blog or website. Then use the following HTML code to put your ad on webpages.

<img src="url_of_StoreAd.gif" width="125" height="125" alt="Name of Your Store" />

← Back

Join us in the Digital Art and Design forum.