logo
g Text Version
Beauty & Self
Books & Music
Career
Computers
Education
Family
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
Money
News & Politics
Relationships
Religion & Spirituality
Sports
Travel & Culture
TV & Movies

dailyclick
Bored? Games!
Nutrition
Postcards
Take a Quiz
Rate My Photo

new
Houseplants
Romance Movies
Creativity
Family Travel
Southwest USA
Irish Culture
Home Finance


dailyclick
All times in EST

Clairvoyance: 08:00 PM

Full Schedule
g
g Digital Art and Design Site

BellaOnline's Digital Art and Design Editor

g

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


print
Printer Friendly
bookmark
Bookmark
tell friend
Tell a Friend
forum
Forum
email
Email Editor


Content copyright © 2014 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


g features
Santos Cage Doll SVG Cut File - First Steps

SVG Cut File Design of Top Hat

Offset Path in Illustrator

Archives | Site Map

forum
Forum
email
Contact

Past Issues
memberscenter


vote
Poetry
Daily
Weekly
Monthly
Less than Monthly



BellaOnline on Facebook
g


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


BellaOnline Editor