Tutorial: Make a blinkie in Photoshop CS
by Angie Svoboda

Blinkies are small animated gif files that can be added to your signature line or used as a avatar on web sites. In order for blinkies to work they must be uploaded to a web site and then you place this link to the gif image in your signature or avatar profile.

Open Photoshop.

One important thing to remember when making a blinkie, is to make sure that every different element, every letter you want to hide (or blink), every shape you want to change color, is a separate photoshop layer.

Open up a new document. The final image I will be making will be a 150px by 50px size, but this is very small to see, so for now I am having you make a 300px by 100px size. We well resize right after we animate the file. Since the animated gif (blinkie) will be used online for web viewing we will work with a 72dpi file size.

 

Fill in your background with a color or backgound of your choice. I will use the welcome kit from DSP to make this blinkie. So I will crop a piece of the background provided to you from DSP (I will copy a 300px by 100px 72dpi size).

Next I will add a ribbon element. This time I will change my image to a 72dpi size- go to Image> image size> then change the dpi to 72. Make sure the scale styles is not checked.

Now drag this ribbon into your document. (or copy and paste). If you need to you can now resize this to how you want it to look. (in my example I made the ribbon a tad bit smaller).

It would be a good idea to save your file now as a PSD. Remember to save and save often. I am calling my file I_LOVE_DSP.psd

Next I will add the cute little heart element on its own layer. Same as before I will resize to a 72dpi.

Next we will add the text, and remember to put any text you want to blink on its own separate layer.

My first layer will be I LOVE (font size 60), the second Layer will read DIGITAL SCRAPBOOKING (font size 36) and the last Layer will read WITH DSP (font size 60). So we have 3 layers to make.

In this example I have the heart on the layer under the "I L ve" layer. (the heart is working as my "o" in love)

After I add the next two layer of text it will look like this. Very messy, but we will turn off the visibility of each layer to make it blink.

Now we will add the edges that blink. We will have to make a total of 8 new layers, don't worry we will merge these 8 layers into two layers to make it more simple to manage.. With each layer off set just a tad to make it have movement when it blinks on and off. Each of the 8 layers is for each side of the image we are working on. I know you are thinking, but there are only 4 sides- but we need to make movement so we need two separate layers with all 4 sides covered.

We need to do some brush work now. I have set my color to white, selected a square brush with a size of 5px. and change the spacing to about 201% in the brush in the brush pallet to look like this.

Now on a new layer, hold down the shift key and draw straight across the document to make a straight line. (the shift key allows you to make a straight line)

Make another new layer and draw down the right side. Do this with all sides. You should now have a total of 4 new layers with brush work. This is a picture of two of the sides drawn.

Notice how I have drawn as close as possible to the edge..

Now make a copy of each of these last four layers you have made. You can do this by clicking on each layer and dragging it into the new layer icon on the bottom of the layers pallet.

Now you should have a layers palette looks similar to this.

Now we need to slightly move each of the copied layers over a tad from the original layer. If will notice in our document you can not see the original layer because the copy is sitting on top of it. It is hard to grab this layer to move because it is so small. I will lock the copied layers 4 and 6 (top and bottom) and then 5 and 7 (right and left). Then move these locked layers to slightly off set them form the original (it is easier to move them when they are locked together).

You should now have something that looks similar to this.

Now we are going to link those 8 layers of edge to make 2 layers of edge. Link all the copied layers and chose Layers>Merge Linked. Now do the same for the original edge layers.

I have renamed my layers to make it easier to keep track of them when we start the animation process.

Now we are ready for the fun part. ANIMATION

Photoshop CS comes with a program called Image Ready. Using Image Ready is how we animate our file. (we turn the PSD layered file into a gif file).

Click on the button on the tool bar to go to Image Ready.

Once your file has loaded in Image Ready, go Window -> Show Animation, and Window -> Show Layers, and you can start to animate your blinkie.

The animation window will show you all of the frames in your animation, to start just click on the first frame (it's the only one there at the moment, and then in the layers window, show or hide the layers so the image looks like what you want your first frame to look like.

When you're happy with your first frame, on the Animation window click the new frame button (this is the little fly out box that shows up when you click on the arrow on the upper right hand corner of the animations box).

Then do the hide/show your layers again to make it look like your second frame. Be very careful to watch how the edges are showing. You want to alternate these layers to give the animation movement. I have set my timing to 0.1seconds for each frame.

Continue to do that until you have all the frames you want, then test it by pressing play on the animation window.

For the freebie I made available for DSP members. I have a total of 24 frames that are moving. WOW.

RESIZE- to 150px by 50 px. This is a nice small size for a signature line at DSP.

IMPORTANT INFO for saving:

Make sure you save this as an optimized gif file. To do this change the optimized data that is located in the right hand side of your screen to this:

Gif 32 dithered, format gif, Dither- no dither

Save>save optimized as> and name your file.

Now you will need to load this onto a web page some place. There are various web sites that offer free photo storage. A few are: photobucket.com, snapfish.com and inkfrog.com. Or you can load this to your own personal web site.

When you have the picture uploaded, you need to get the URL for the picture (the part that starts with http:// and ends in .gif). The method for doing this differs for each site. Photobucket offers this as an easy copy option.

Now you need to paste this link into your signature at DSP.

To do this at DSP- click on User CP

Edit Signature

Paste the link into the signature line-

it should look something like this-

[IMG]http://www.mywebsiteIputMyFileIn/I_Love_DSP.gif[/IMG]

Some internet sites make you type out the work [IMAGE] but at DSP you can use [IMG]

 

Happy Blinking---

© 2005 Angie Svoboda

©2004-2010 Digital Scrapbook Place, Inc. All rights reserved.
Terms of Use · Legal/Privacy Notices · Contact Us


Scrapbookingtop50 Counter