Pracken's Paint Shop Pro Tutorials

A Paris New Year's Eve
Animated Pixel Tutorial


I've included some music for you - if you'd rather not hear it, just click the stop button on the player. Also, I'm enclosing the lyrics for Auld Lang Syne so you can sing along if the spirit moves ya. Happy New Year!!!!

Auld Lang Syne
by Robert Burns

Should auld acquaintance be forgot
And never brought to mind?
Should auld acquaintance be forgot,
And auld lang syne?

For auld lang syne, my jo,
For auld lang syne,
We'll tak a cup o' kindness yet,
For auld lang syne.

And surely ye'll be your pint-stoup,
And surely I'll be mine;
And we'll tak' a cup o' kindness yet,
For auld lang syne.

We twa hae run about the braes,
And pou'd the gowans fine;
But we've wander'd mony a weary fit,
Sin' auld lang syne.


We twa hae paidl'd in the burn,
Frae morning sun till dine;
But seas between us braid hae roar'd.
Sin' auld lang syne.

And there's a hand, my trusty fiere!
And gie's a hand o' thine!
And we'll tak' a right gud-wellie waught,
For auld lang syne.


Ah Paris........ It has to be one of the most majestic cities on the planet. Wouldn't it be sooooo romantic to spend New Year's Eve there? Anyway, the next best thing to being there is creating a graphic, so I made this little pixel tutorial for the New Year. I've animated mine, but you don't have to do that if you prefer not.

This is a really easy tutorial. I'm providing you with the outline, and general instructions. Please feel free to use the outline as you wish and change things around to suit yourself.

For this tutorial, you will need the following:

Paint Shop Pro. I used version 7.04 but if you are familiar with PSP, you should be able to convert the tutorial without problems. You can download the latest PSP version demo here.

My pixel outline. It's in PSP format with two layers (the background and the pixel outline).

I'm also providing you with my background gradient, in the event you would like to use it. Open it up and place it in your PSP gradients folder.

You may download all my materials here.

My color chart. Right click on this and save to your computer.

My image is just a guide. Feel free to change the colors, apply cutouts or not, or add other effects to your liking. I put everything on its own layer (and name each one). That way you can easily go back and change colors later and correct any mistakes you've made. It makes a lot of layers, but it also keeps things organized and will save you a lot of heartache.

The basic procedure for each piece will be the same. You'll add a new layer. Set your paintbrush to size 1. Then do the outline of the piece in a darker color and then paint the inside in a lighter color. I've applied a cutout to some pieces, usually using the darker outline color.

To apply the cutout, select and float the selection (selections>select all>selections>float). You'll see the marquee ("marching ants") around the selection. Apply a cutout (effects>3d effects>cutout), using the settings in the screenshot (the shadow color will change for each selection). Then repeat the cutout, chaning the horizontal and vertical to -2. [Hint: When you're going to add a cutout, set your foreground or background color to the shadow color you're going to use. Then, when you apply your cutout, just right click on the shadow color box and choose the color from the recent colors displayed there.]

Step 1. Open up the pixel outline you downloaded. Copy and paste the color chart as a new layer. Move it to the top of your canvas, out of the way. When you need a new color, just click on it with your eye dropper tool.

The colors I used for each section are as follows:

  • Tower outline - black
  • Tower inside - color #1, cutout color 2 (note, I've used a lighter color for this cutout, but you could use a darker one if you choose).
  • Clock face outline - color #3
  • Clock inside (outer circle) - color #4.
  • Clock inside (inner cirlcle) - color #5; cutout color 6.
  • If you're going to make the animation, you'll need two more clock inner circles. Make one of them color #7 and the other one color #8. Cutout color for both is #6.

Step 2. Now just follow the steps described above. Here are screenshots of each step (you may want to save them and magnify them in order to see better).


[Note: If you're going to make the animation, make the other two clockface colors too].

Step 3. I added text to mine, using color #7. Just add a new layer and choose a font of your choice.

Step 4. Now you're basically done with your graphic. I flood filled the background with my gradient, and have enclosed it for you to use if you wish.

If you're not going to animate the graphic, delete your color chart. Hide the two additional clock face layers you did, and the background layer. Merge visible layers (save as a psp file). Turn your clock faces and background layer back on, and you're all done! (save as a .jpg or .gif).

If you want to animate, continue with step 5.

Step 5. I've made my animation with the gradient background (but you could also make it as a transparent gif so you could use with a different background). You should have 4 layers now: a background a merged image, and two clockface images. Name the clock face layers in order: 1, 2, 3.

Hide layers 2 and 3. Merge visible layers. Copy and paste as a new image. Save as a gif file. Close the image. It should look similar to the image in step 4 above.

Return to your original graphic. Undo the merge you just did. Turn off layers 1 and 3. Merge visible layers. Copy>paste as a new image. Save as a gif file.

Return to your original graphic. Undo the merge. Turn off layers 1 and 2. Merge visible layers. Copy>paste as a new image. Save as a gif file.


Return to your original graphic. Undo the merge. Save as a psp file with your layers intact. Then you can close the graphic.

Step 6. Open up Animation Shop. Open up the animation wizard (file>animation wizard). There will be a total of 6 screens. Choose the default settings for screens 1-3. On the 4th screen, type in "30" in the box that asks you "How long do you want each frame to be displayed?"

In the 5th screen, you will choose the gif files you just made for your animation. Click the "add image" button, then navigate to the location you saved your gifs. Make sure they're in the right order, then click "next." Then click "finish" on the next screen.

Preview your animation by clicking the "view animation" icon on your toolbar (or you can click view>animation). To save it, click save, choose your location and name, and then just following the steps on the screen.

And that's all there is to it. Hope you've enjoyed the tut, and a great big ole HAPPY NEW YEAR Y'ALL!!!!!

:Terms Of Use:    :Tutorials Main Page:    :Homepage:     :Email Me:

Screenshots of programs used in this tutorial are copyrighted to their respective authors.
This tutorial was created on December 30, 2004.
All content, graphics, and tutorials on this site are
ŠPracken 2003-2012