Animated '70s Pixel Heart
tutorial by Whisper

This tutorial was created and put on this site on September 25, 2004.
It is property of and ©2001-2004 to Whisper's Web Works.
Terms of Use

For this tutorial you will need:
Paint Shop Pro  ~ download a trial version.

 If you would like to use the same colors as I am, right click and copy/paste the color strip below.

Open a new image:
22 x 18 pixels
Transparent
16.7 Million colors

View > Zoom > In by 5 steps.  Repeat.

Set your foreground to solid black.

Activate your paint brush tool and set at:
Size 1
Hardness 100
Step 1
Density 100
Opacity 100

Paint the heart outline following the screenshot below:

Set your magic wand at 0 Tolerance, 0 Feather and Anti-alias unchecked.

Click inside the heart outline.

Selection edit 1:

Selections > Modify > Contact > 1 > ok.

Flood fill this selection with black.

Selections > Modify > Contact > 1 > ok.

Edit > Clear.

Selection edit 2:

Selections > Modify > Contact > 1 > ok.

Flood fill this selection with black.

Selections > Modify > Contact > 1 > ok.

Edit > Clear.

Selection edit 3:

Selections > Modify > Contact > 1 > ok.

Flood fill this selection with black.

Selections > Modify > Contact > 1 > ok.

Edit > Clear.

Selections > Select none.

In your layer palette, right click on the layer and duplicate 3 times so that you have a total of four layers with the heart on them.

Rename each layer starting at the top - 1, 2, 3, 4.

Activate your paint brush again and set your foreground to the bright pink, #C9318E.

Starting on layer 1, paint the outer empty band with the bright pink.

Activate layer 2 and paint in the bright pink on the next empty band in.

Activate layer 3 and paint in the bright pink on the next empty band in.

Activate layer 4 and paint in the bright pink on the next empty band in. (You will basically fill in the center empty area..)

Now it should look filled in with the bright pink but the bands are on each layer.

Showing all layers.

Layers broken up view, just for reference.

Set your foreground to the yellow, #F9D52B.

Activate layer 1 and paint the second band in.

These next set of steps may be easier if you turn off and on the visibility of the layers as you go.
You can turn off a layer's visibilty by clicking on the eye of that layer in your layer palette.

Activate layer 2 and paint the third band in.

Activate layer 3 and paint the fourth band (center) in.

Activate layer 4 and paint the first band in.

Set your foreground to the green, #0EE222.

Activate layer 1 and paint the third band in.

Activate layer 2 and paint the fourth band (center) in.

Activate layer 3 and paint the first band in.

Activate layer 4 and paint the second band in.

Set your foreground to the green, #0EE222.

Activate layer 1 and paint the third band in.

Activate layer 2 and paint the fourth band (center) in.

Activate layer 3 and paint the first band in.

Activate layer 4 and paint the second band in.

Now you should not have any empty bands in the heart.

Make sure all layers are turned on.

File > Save as > yourfilename.psp.

Be sure you save it as the Animation Shop .psp.

Now it is time to animate the heart.

File > Jasc software Products > Launch Animation Shop.

Now we are going to work in Animation Shop.

File > Open > find yourfilename.psp > Open.

Edit > Select all.

Animation > Frame Properties > Display time, 14 > ok.

View > Animation.

Adjust the timing to your liking.

File > Save.

Page 2 for examples made by my testers.

Back     ~     Tutorial Index     ~     Next