g Text Version
Beauty & Self
Books & Music
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
News & Politics
Religion & Spirituality
Travel & Culture
TV & Movies

Bored? Games!
Take a Quiz
Rate My Photo

Autism Spectrum Disorders
Mental Health
Blogs / Social Networking
Kidney Disease
Today in History

All times in EST

Full Schedule
g Digital Art and Design Site

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.

Add Animated+Gif+in+Adobe+Photoshop+Elements+7 to Twitter Add Animated+Gif+in+Adobe+Photoshop+Elements+7 to Facebook Add Animated+Gif+in+Adobe+Photoshop+Elements+7 to MySpace Add Animated+Gif+in+Adobe+Photoshop+Elements+7 to Del.icio.us Digg Animated+Gif+in+Adobe+Photoshop+Elements+7 Add Animated+Gif+in+Adobe+Photoshop+Elements+7 to Yahoo My Web Add Animated+Gif+in+Adobe+Photoshop+Elements+7 to Google Bookmarks Add Animated+Gif+in+Adobe+Photoshop+Elements+7 to Stumbleupon Add Animated+Gif+in+Adobe+Photoshop+Elements+7 to Reddit


RSS | Related Articles | Editor's Picks Articles | Top Ten Articles | Previous Features | Site Map

For FREE email updates, subscribe to the Digital Art and Design Newsletter

Past Issues

Printer Friendly
tell friend
Tell a Friend
Email Editor

Content copyright © 2015 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.


g features
Pocket Wedding Invitation SVG Cut File

Planning a Wedding Suite Design

Draw a Spiral Christmas Tree in Illustrator

Archives | Site Map


Past Issues

Less than Monthly

BellaOnline on Facebook

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

BellaOnline Editor