Printer Friendly Version

BellaOnline's Digital Art and Design Editor

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.

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 © 2016 Minerva WebWorks LLC. All rights reserved.

BellaOnline Editor