PI8 Blinkie

Animated blinkies are very popular as email and bb sig tags.


This tutorial shows you how to make one in PI8 using the Color Replacement Pen. To make a standard size blinkie, start with a new canvas 150 X 20 pixels. Since this is a very small image, select the Zoom tool and click on the image a few times to magnify it to 200% or 300%, depending on how good your eyes are. I'm using a 300% magnification in this tutorial.

Using the Pick or the Standard Selection tool, right click and select All to select the whole canvas. Right click and choose Expand/Shrink to open the Expand/Shrink dialog box. Shrink by 2 pixels in a Box shape.

shrink selection

The selected area is the main part of the blinkie. Choose Edit, Fill to fill with a color, gradient, texture or image. I've filled mine with a rainbow gradient. Note that the fill will only appear in the selection area, leaving the 2 pixels around the outside of the canvas white.

fill selection area

Right click and Invert. Now the white border area around the edge of the fill is selected instead.

white border selected

We're going to fill this white border with a checkerboard design, but we have to make it first. I'm making a black and white checkerboard, but you can use any two contrasting colors that you like.

Choose File, New. Make a new white canvas 2X2 pixels. Choose Format, Expand Canvas. When the Expand Canvas dialog box opens (make sure "Expand sides equally" is not selected), Expand 2 pixels to the Right with a black canvas. The image is shown greatly magnified below.

Copy this image into the Clipboard by hitting Ctrl+C or hitting the Copy button in the Standard Toolbar. Choose Format, Expand Canvas again. This time, Expand 2 pixels at the Top of the image. Hit Ctrl+V (or click the Paste button in the Standard Toolbar). The pasted object will align itself automatically with the top and left edges of the canvas. Choose Edit, Rotate & Flip, Flip Horizontally. Hit Enter to deselect the object. Right click and Merge All. Now you have a checkerboard that looks like this, magnified.


Copy the checkerboard into your Clipboard. Click on the blinkie image's blue title bar to make it active. Choose Edit, Fill. When the Fill dialog box opens, click the Image tab. Select "Clipboard" and the "Tile the image" fill option.

Click OK to fill the white border area with the checkerboard pattern.

checkerboard fill

Right click and Invert, so the central part of the blinkie is selected. Use the Text tool to add your text, and Paste any objects you want to add to the image. Important: Use the Pick tool to drag text and objects around. If you try to use the arrow keys or the Selection tool, you'll only move the selection area, not the objects. I've added "PhotoImpact 8" with the Broadway font, Size=16, and centered it in the canvas. Hit Enter to deselect all objects. The first frame for the animated blinkie is complete now.

add text or objects

With the Pick tool, right click and choose Invert to select the checkerboard border again. Hit Ctrl+D to make a duplicate of your base image and all objects. Zoom in to 200% or 300% magnification. This is going to be the second frame of the animation.

Select the Color Replacement Pen from the Paint tools. In the Attributes toolbar, select black (or your darker color) as the color to be replaced. For the replacement color, choose something bright and easy to see. I'm using a bright yellow color. It doesn't really matter what color you use because it won't show in the finished blinkie. Set the Similarity value to 128, or whatever works for the colors you're using. Scrub your brush over the checkerboard to replace the black with the replacement color. Since you're working within a selection area, you don't have to worry about the paint going all over the place. It will be confined to the selection area.

paint out the black

When you've replaced all the black with the replacement color, it's time to change the white (or your lighter color) to the opposite color of black (or your darker color). In the Attributes toolbar, change the color to be replaced to white. Change the replacement color to black. Scrub over the checkerboard to paint the white checks black.

paint white to black

In the Attributes toolbar, the color to be replaced should be whatever the third color is that you used first to paint out the black (or your darker color). For example, my replacement color is going to be the bright yellow I used initially. The replacement color is going to be white (or your lighter color). Scrub over the checkerboards to replace the color with black.

See what we've done? We've shifted the order of the colors so that when they are assembled in GIF Animator, they will alternate and "blink." In the first image, the upper left corner has a white square. In the second image, the upper left corner has a black square (arrows).

checks alternating

Choose the Pick tool. Right click on each of the images and choose None. Then right click and Merge All. Click on the blue title bar of the first image to make it active. Hit Ctrl+C to Copy it into the Clipboard. In the upper right corner of the work space, click Switch and select "Ulead GIF Animator."

GIF Animator

Doing so will open GIF Animator. When you see the "Startup Wizard," choose "Animation Wizard." Create a new canvas 150X20 pixels.

create new canvas

Click Next, then Next again (going with the defaults of 256 colors and 1/4 second delay for the frames), and finally click Finish. You'll create the first frame of your animation. Hit Ctrl+V to Paste the first blinkie image into the frame.

paste into frame

In your task bar, click on the PhotoImpact icon to return to the work space. Click on the second blinkie image's blue title bar to make it active. Hit Ctrl+C to Copy it into the Clipboard.

In your task bar, click on the Ulead GIF Animator icon to restore GIF Animator. Now we need to add a frame for the second blinkie image. Choose Frame, Add Frame.

add second frame

You'll see another blank frame in the work space. Hit Ctrl+V to Paste the second blinkie image into the frame. To preview the animation, click the Preview tab. You will see your animated blinkie. If you want to edit the frame delay, click the Edit tab to edit. I've left mine at the default of 25/100 (1/4 second).

When you're ready to Save the blinkie, click the Optimize tab. You'll see the size of the original file in the left pane (unless it's really a small file like this one) and the compressed file size in the right pane. Click the Save button. When the Save As dialog box opens, give your blinkie a name and save it to a folder on your hard drive.

To close out GIF Animator, click the red X in the upper right corner. You'll get a warning asking if you want to save the image. Like PI, GIF Animator always asks you this when there's an image open, even though you've just saved it. Click "No" to close GIF Animator.

Now that you know how to make blinkies, you can drive your friends crazy adding them to your stationery and to your bb signatures. Here is a nice tutorial on how to use an image as a signature tag in Outlook Express. And below are some more examples of blinkies.

dragon's eye blinkie

anime blinkie

This tutorial uploaded 2/24/03

Do not duplicate, translate, copy, archive, appropriate or redistribute this document.



Back to Homepage