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
Action Movies
Bible Basics
Houseplants
Romance Movies
Creativity
Family Travel
Southwest USA


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

Building an Advertising Blinkie in Photoshop CS3


The owner of J3 Designs asked me to create an advertising blinkie for her digital scrapbooking website. She wanted to maintain the classic elegance of the company brand and gave me a set of graphics that she had already used for her logo. Read here the pre-production steps taken to plan the design for the blinkie.

Once I create the blinkie in FlashR swf format, I was ready to create the animation in gif format. However, when I tested how it would look when exported from Flash as an animated gif, the results were less than I’d hoped. The PNG graphics used for the animation maintained their quality when Flash built the swf. However, the quality drop considerably when I tried to export the animation as a gif from Flash. So, I decided to build the gif animation in PhotoshopR CS3. Because the design and basic phases of the animation were already built in Flash and I knew that they worked. All I needed to do was create a gif animation that matched the Flash animation as close as possible.

Just as in Flash, I started by building the basic layers for the blinkie in Photoshop. The bottom layer was the grunge background and the next layer contained the red ladybug. The third layer had the lace and cameo and the fourth contained the gold ladybug. Again, I needed the text layers to be below the ladybugs in order for them to move over the top of the text when animated.

In Flash, I used the built-in Timeline Effects to build the animation. In Photoshop, I decided to use the Tween feature of the Animation palette. This is done by setting a beginning frame and ending frame. The Tween process adds the frames between these two to create a smooth animation. When I built the text layers in the Layers palette, I needed a new layer for each phase of the animation. As you can see from the example, the first part of the animation is a fade in and out for the designer’s name. The second phase is the “Designer for” animation and the last is the wrapping and display of the website name “J3 Designs”. After the text animation, the red ladybug pushes the website name off the blinkie and finally, the gold ladybug crawls away, only to crawl back in view at the bottom of the blinkie. This resulted in eight layers in the Layers palette.

J3 Designs

Join us in the Digital Art and Design forum.




Add Building+an+Advertising+Blinkie+in+Photoshop+CS3 to Twitter Add Building+an+Advertising+Blinkie+in+Photoshop+CS3 to Facebook Add Building+an+Advertising+Blinkie+in+Photoshop+CS3 to MySpace Add Building+an+Advertising+Blinkie+in+Photoshop+CS3 to Del.icio.us Digg Building+an+Advertising+Blinkie+in+Photoshop+CS3 Add Building+an+Advertising+Blinkie+in+Photoshop+CS3 to Yahoo My Web Add Building+an+Advertising+Blinkie+in+Photoshop+CS3 to Google Bookmarks Add Building+an+Advertising+Blinkie+in+Photoshop+CS3 to Stumbleupon Add Building+an+Advertising+Blinkie+in+Photoshop+CS3 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
Review - 21-Day Drawing Challenge

How to Print and Cut Clip Art in Silhouette Cameo

Paper Bead SVG Cut Files

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