g
Printer Friendly Version

editor  
BellaOnline's Digital Art and Design Editor
 

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 AdobeR PhotoshopR 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.

  1. 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.

  2. 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.

  3. 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.

  4. Right-click on the Background layer and choose Delete Layer. We do not want this layer to become a frame in our animation.

  5. 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.

  6. 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.

  7. 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.

  8. 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.




Digital Art and Design Site @ BellaOnline
View This Article in Regular Layout

Content copyright © 2013 by Diane Cipollo. All rights reserved.
This content was written by Diane Cipollo. If you wish to use this content in any manner, you need written permission. Contact Diane Cipollo for details.



| About BellaOnline | Privacy Policy | Advertising | Become an Editor |
Website copyright © 2014 Minerva WebWorks LLC. All rights reserved.


BellaOnline Editor