Blinkie Tutorial

Blinkies are little animated buttons that have vegas-like marquee lights blinking around the edges and are quite headache-inducing. To follow this tutorial, you'll need Paint Shop Pro or a similar program.

You can make four different kinds of blinkies using this tutorial. The process for making each is similar, but there are a few different specifications. Try to make type 1 first; afterward you can try the others. Note the changes in blinkies 2-4 that are supposed to be made to the tutorial, and then follow the tutorial for type 1, making the necessary changes. After you've made one blinkie, you'll find making any other type comes quite easily :)

Blinkie Type 1

Example:

Frames needed:

First, open up PSP (Paint Shop Pro) or a similar program. Copy both frames into the program. On each one, go to Colors > > Increase Color Depth > > 16 Million Colors (24 bit). Then zoom up on both frames so you can see them more clearly. Now choose what image you're going to use for the blinkie. Remember, it's going to end up quite small, so usually something like a closeup on the eyes of a character is best. Crop and resize the image so that it's exactly 137 pixels wide by 17 pixels tall.

Now you get to choose a color for the blinking lines going around the blinkie. The white and black colors will stay the same; the gray is what you'll change. Click on your color replacer tool (in PSP, it's on the left-hand menu, one button above the pointing hand). Look to the right side of your screen: at the top there will be two color swatches. Click on the right one (it will say Background Solid Color when you hold your cursor over it). A color panel will pop up. Click outside the panel to select the gray color on the blinkie, and click ok. Now click on the left swatch, and when the panel pops up, select whatever color you want to be running around the side of the blinkie (usually a midtone color, not too close to either white or black, is best). Click ok. Now hold down your cursor over the entire frame, going back and forth until all the gray is replaced. Do the same with the other frame.

Go back to the image you're using (the 137x17 one). Copy it (Ctrl+C), select one of the frames, and paste the image using Ctrl+E. Position it until it fits exactly within your border, right-click to lock it, and do the same to the other frame.

Now you get to add text. The best fonts to use are pixel fonts, available here for download. Use your text tool (the button with the A on it) to click anywhere on one of the frames, and when the panel pops up, type whatever text you want (short is best). If you're using a pixel font (as is recommended), all caps will be the most visible, with the size set at 6 pt. Choose whatever font color will look best with the blinkie. Click ok and move it arond to where you want it. Take careful note of the location you put it! As you move it around, you'll see at the bottom right of your screen a set of numbers in parentheses following the symbol ->. You need to remember these so you can place the text in the exact same spot on the other frame! Now go to the other frame, use the text tool again, use the same font, size, and text, but change the color to something contrasting the first color. Use your memorized location numbers to set it in the exact same spot. Save both of the frames.

Open up your animation program (Animation Shop, probably, if you use PSP). Go to Select File > > New, and type in 145 for the width and 25 for the height (it doesn't matter whether you select transparent or opaque). Use the delete button to delete the first frame. Then go to Animation > > Insert Frames > > From File. Click Add File, find where you saved your frames, and use the Ctrl key to select them both. Set the delay time to 10 and click ok. You're almost done! Use the View Animation button (at the top, toward the right, to the left of the button with a black arrow and blue question mark) to preview it. There's your blinkie! If you don't like how it looks, go back to your image program and make the necessary changes. If you do like how it looks, click the View Animation button again to stop the blinking, and then go to File > > Save As. Make sure the type is set to GIF, type in a name for it, and you're all set! Note: if you have the "use these optimization settings for unoptimized files" checked, you will not be asked for your optimization preferences. If you have it unchecked, just select the highest level (256 colors and such) so you'll have a high-quality blinkie. Good luck, and enjoy!

Blinkie Type 2

Example:

Frames needed:

Changes: crop your main image so that it's 148x18, not 137x17. You should replace the black OR white part of the blinkie instead of the gray. When you go into your animation program, you should set the New Animation dimensions to 150 wide by 20 tall.

Blinkie Type 3

Example:

Frames needed:

Changes: crop your main image so that it's 146x26, not 137x17. You should replace the black OR white part of the blinkie instead of the gray. You should also replace the blue border with a color of your choice. When you go into your animation program, you should set the New Animation dimensions to 150 wide by 30 tall.

Blinkie Type 4

Example:

Frames needed:

Changes: crop your main image so that it's 146x26, not 137x17. You should replace the black OR white part of the blinkie instead of the gray, and replace the blue border with a color of your choice. When you go into your animation program, you should set the New Animation dimensions to 150 wide by 30 tall. Note that the stars are not part of the tutorial.