Basic Blinkies with Unfreez

Goal: Learn how to make blinkies using only things you can get for free.

You should already know: The very basics of your graphic program of choice. I am using MSPaint (yes, it is that simple), but you can do this in whatever program you like. You need to be able to save files as GIFs. (If you don't know how, learn here.)

You need to get: Download Unfreez, a very simple and safe program that is completely FREE and is a very small, quick download. You can use your own animation program if you prefer, but I can't help you with that. ;)

Instead of doing a generic tutorial, I am going to walk through the steps I took to make this particular blinkie. You will learn several different ways to animate your blinkies, which should leave you very well-equipped to design blinkies of your own. :)

Getting Started...

The standard size for a blinkie these days is 150 pixels wide x 20 pixels tall. I like to keep a little template handy, so I can just copy it and not have to measure all the time. The box to the left is just the right size, including the grey border. Think of this as the "base" for your blinkie.

'Marching Ants' Animation

	This is the most common way of animating a blinkie. It looks really impressive, but it is actually quite easy!
As you can see in the large illustration, this is realy a very simple pattern. I have a template like this that I generally use. You can easily draw one for yourself - you want to fill in the border to be three pixels wide, then you draw dashes (two pixels in length) in alternating colors all the way around.
	For the second frame in the animation, you just need to offset the pattern by one dash. (In this example, I replaced yellow with green and gree with yellow.) Depending on how fast you set the animation, it will either look like rapidly blinking dashes or dashes moving in a loop around the border.
	You are welcome to use this set of templates, if you wish.

Adding Text

If you are using MSPaint and you haven't read Xandorra's color replacer tutorial, you should do so now. It is a very handy trick that I use often when making blinkies!

You can either make the letters yourself or write them using the text tool. In MSPaint, this is very easy. It is better to use fonts that with clean, crisp edges (i.e. fonts that do not blur) so that you can change the colors very easily - this is important if you want to animate the letters (and we do). You will usually want small font sizes - around 8 or 10 points (or less!) is usually good. Remember that in MSPaint, you can type a smaller number in the drop-down menu and press "enter" if you want a smaller size than is listed.

You can see here that I changed the color of the border before getting this far. (It's still a bit glaring, of course.) I also filled in the white center with a contrasting background color.

Pixel Text in Windows XP

Windows XP has the ability to smooth rough edges on screen fonts. This is cool, most of the time, but it can get in the way when you are trying to type pixel-perfect text, because in layman's terms "smooth the edges" means "make the edges blurry". Earlier versions like Windows 98 can also do this - you can turn it off in similar ways (but you are less likely to need to).

	Right-click on your desktop and choose "Properties" or go to Display Properties. Under the Appearance tab there is a button for Effects. Click there.
	There is a drop-down menu that lets you pick the method used for smoothing edges of screen fonts. If you uncheck the box, it won't smooth fonts at all - you don't need to use this setting unless the smoothing is giving you a lot of trouble. The ClearType method really blurs the text on my laptop, but I can make blinkies just fine if I have it set to Standard. Be sure to click OK and then OK again (or Apply) so that you can test it out.
Your computer may require slightly different settings, but it should be something like this.

Basic Blinking Text

	I decided that "pointless" was the most important word, so that's the one I decided to animate. (You can occasionally get away with animating the whole thing, but if there is too much animation it can be distracting.)
	The easiest way to animate text is to alternate letters with a different color. (The greater the contrast, the more jarring it is. Low contrast makes it sort of shimmer.) I picked a light blue. The second frame should have the two colors switched. (The color replacer in MSPaint is very useful here.)

Animate in Unfreez

Save the two frames of the animation as separate GIF files (they must be GIFs - they cannot be bitmaps or JPEGs). Keep both of the files in an open window. Download Unfreez if you haven't got it already. Run the .exe file to start. (It's that easy.) All you have to do is click on the two files (highlight both at once or move on at a time) and drag them into the Unfreez window.
Click "Make Animated GIF" when you are ready. You will usually want to leave "Loop animation" checked. You can control how fast the animation is by adjusting the "Frame delay". I typically end up choosing something between 8 and 15 cs. (Faster animation wil tend to look like flickering and medium-slow animation is more likely to look like movement.)
	Ta-da! One can usually stop here, but the intent of this blinkie was to have a lot of superfluous animation, so I'll keep going. ;)

Alternate Animation Methods

	Another easy way to animate text is to use wide diagonal stripes. (If you are used to that color replacer trick by now, you can use the eraser tool to do this.)
	Another extremely easy way to animate the border is to have two borders, one inside the other. (Separated by one pixel is my preference, but of course you can always take out the white space or color it.) If the text gets close to the border or overlaps it, the eyes can be fooled into seeing a sort of twisting effect.
	Here's a template for this animation. :)
	Here's the effect of combining the two. Nice, although this particular blinkie isn't terribly interesting.
	The border for this blinkie is animated in exactly the same way. Note how it seems to sort of twist around the edges as long as you don't examine it too closely!
	So, I went back to the original, replaced it with the diagonal text animation, and added some highlights. Then I added one of those crazy flipping borders as described above.
	The combined effect is quite striking, though a bit hyperactive. Don't do this at home: the average blinkie does not require nearly this much animation. Now that you know several different techniques, you can combine them to get an wide variety of different animations. The best way to learn how to do this tastefully is to look at a lot of blinkies, figure out which ones annoy you, and make some bad animations yourself. ;)