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. These consisted of a cameo, lace, grunge backgrounds, bow, dried flowers and two ladybugs. These graphics were originally created at 300 dpi and were very large. So my first job was to reduce each graphic to 72 dpi and to a size small enough to use in a 150 x 50 pixel blinkie. From this test, I could determine which of the elements could be used at such a small size without loosing too much of their detail.

I was surprised that most of the elements worked fine at such a reduction in size, except for the cameo and dried flowers. When reduced to a height of 50 pixels, most of the details were lost from these elements. But the cameo was such an important part of the logo, I decided to used only the top half of the cameo. By doing this, I didn’t need to reduce the image to such a small size and saved most of the detail of the cameo.

I started to build the design with the static background elements. These elements would not be part of the animation. I choose one of the four grunge backgrounds included in the graphic samples as the overall background layer. Next I added the lace and cameo. To save room at the top of the blinkie for the text animation, I placed the lace at an angle at the bottom left corner. Finally, I added one of the two ladybugs. But those ladybugs were just waiting to be animated.

The foundation of the animation would be made up of several text animations. But those ladybugs kept looking at me, so I decided to add a second animation starring the ladybugs. One ladybug would be visible during the text animation and then the second ladybug would appear from under the cameo. Finally, they would crawl off together. In order to do this, I needed to break apart the background layer into several layers. The first background layer would be the grunge graphic. The second would be the lace and cameo. Of course, I needed PNGs of both ladybugs, the lace and cameo in order to maintain the transparency in Flash.

So, I now had four layers to my blinkie, besides the text animation layer, which I would add later.

Most blinkies on scrapbooking sites are 150 x 50 pixels. This doesn’t give you much space for a complicated text animation. I decided to use the built-in Timeline Effects to animate the text. The first part of the animation would be the designer’s name. There are five designer’s for this website, including myself. Because my business name was the longest, I decide to create the original animation using my name. Then, it would be easy to switch out the designer’s name for the other four blinkies. Now that the design is built, we are ready to build our animation.

J3 Designs

Copyright 2018 Adobe Systems Incorporated. All rights reserved. Adobe product screen shot(s) reprinted with permission from Adobe Systems Incorporated. Adobe, Photoshop, Photoshop Album, Photoshop Elements, Illustrator, InDesign, GoLive, Acrobat, Cue, Premiere Pro, Premiere Elements, Bridge, After Effects, InCopy, Dreamweaver, Flash, ActionScript, Fireworks, Contribute, Captivate, Flash Catalyst and Flash Paper is/are either [a] registered trademark[s] or a trademark[s] of Adobe Systems Incorporated in the United States and/or other countries.