Wednesday, May 18, 2011

Create a Blinkie Animated Ad in Photoshop

I love creating my own ads for the shop, but I don't like blinkies that just go crazy with moving screens. I wanted to make a simple ad, so I looked for a good tutorial using Photoshop but couldn't find one so I taught myself what to do---with a mistake here and there---and I thought I would post my lessons for anyone who wants to make their own blinkie. No guarantees this is the 'proper' way to build one...this is just how I figured it out. LOL

Now, my disclaimer: if you see that I have forgotten a stage or the directions are wonky, feel free to share that with me. However, I can't teach you how to use Photoshop....this tutorial assumes you are proficient in most parts of using Photoshop. I use CS4 Photoshop-----LOVEEE it. :) 
I will post a mix of directions and screen shots to show you how to build this badge:

The first thing I did was build the badge to see how it would look if I chose to publish it in the final screen. This allows me to then go backwards and animate without moving too much around.

When building the badge, I made sure that I used a new layer for each group of text and images for a total of 5 layers:
one for the line image,
one for the colored image
one for the name and subtitle (these are in every slide)
one for "time to create"
and one for "magic"
The line art image of Lilli Claire is hidden underneath the colored version so you can't see it in the screenshot. [CLICK ON THE SCREENSHOTS TO SEE THE BIGGER VERSIONS AND READ THE WORDS....]

After I created the whole ad, I turned on the animation menu bar (highlighted below)

After the animation bar popped up under my image (kinda green stripes), I clicked on the icon circled in orange (below)---this turns on the slide viewer in the animation bar. Now I can see each slide that I am going to work on...right now, there is only one small slide (the image on the screen reflects the smaller slide).

For this ad, I decided that I wanted 3 things to happen:  (A) the girl would get 'colored', starting with a line image, (B) the blue text would appear and (C) the orange text would also appear. That meant I needed 4 slides...A to C plus one for the line image in the beginning.

So I duplicated the first complete slide until I had 4 slides total...
 ....note that each element in the first file will duplicate in the next slides...this is okay. You can go back and "hide" the elements that you don't want. To turn on or turn off items in photoshop, you click the "eye" icon in the LAYERS menu bar (off to the right side). 

Now we have to "animate" the slides---make them look like they are moving from slide to slide. Since the first thing I wanted to happen was to "color" my featured girl Lilli, I had to "tween" some slides... This is actually pretty easy. 

Go to your first slide and hide the lower text and the colored version of the girl. Notice that the slide you are working on is highlighted blue (in the animation menu bar) and shows up on the main screen.

Since hiding something in the first slide hides it in all the slides, you are now going to want to go to the second slide and "turn on" the colored version of Lilli (see below in screen 2 that she is colored) 
Then go back and highlight the first slide and hit the tweening icon circled in orange.

The next screen that comes up will ask you how many slides you want to have between the first slide (line art) and the second slide (the colored version).
I chose 5 slides
--note the new extra slides at the bottom in the animation menu bar.

Then I moved to the the second to last slide (the one after the final tweened slide) and "turned on" the blue text next to Lilli fairy.
Then I moved to the final file and turned on the orange text (you may need to turn off the blue text).
 The file is now complete.....almost...
The most important part is to set the timing of each slide and telling the file to play FOREVER...and then previewing it to see how it "animates."
Each slide will have a number of seconds below it: set the time here. Play around by previewing it until you like the transition between the slides...
There is a small word below the first slide that allows you to play it once or forever---choose FOREVER.
Now you are all set and are ready to save it for posting on the web. 

To save the final file, I went to SAVE FOR WEB and saved it as a 128 dithered GIF that was 240 pixels wide.... Make sure you save your PS file for editing later. :)

Now you are ready post your spiffy and not too splashy badge to your blog or create a coded box for your followers to grab using your new and fun animated badge...:)


Maylee said...

I will definitely refer to this post when I need to make a blinkie. So in love with Lillie Claire! cute cute cute!

Betty Boo! said...

Amazing Christy! Thank you sooo much for all the help and tutorials!

Renee said...

Oh what a fabbo tutorial Christy!! Cute, Cute!
Hugs xx

Kim said...

Super tutorial, thanks!

Cheryl said...

Thanks for the tutorial! I was wondering how to do this.

New DT! Welcome

I am so excited to introduce our new DT members. They have already produced some amazing and truly gorgeous images over the past week and I ...