Animated Standard Banner

A Tutorial by Joyce Kohl

Written March 6, 2005
About Copyrights

NOTE: All the tubes used on this page are tubes I made and are available to download from my Tubes sections.

It is assumed you know your way around Paint Shop Pro - that is, I won't give you all the visuals I would for someone new to PSP.

Supplies Needed:

Paint Shop Pro - I used v9, but you can do this tutorial with any version. You can download a trial copy of PSP from Jasc.

Paint Shop Pro Tubes of your choice - or you can use mine.

If you want to use a gradient as I did, here is my shiny gold gradient - unzip and copy to your gradients folder.

My Daisy Flower Fairy - Click HERE to download the file.

My Gossamer Wings - Click HERE to download the file.

VM Natural - click HERE to download it. Unzip to your plugins folder.

The tubes are in psp format and compatible for all versions of PSP from 5 through 9. Simply open in your PSP and export as a tube.

There are a million ways to make banners. This is only one simplified [I hope] - and will be the standard size of 468 x 60.

Step #1: Open a new 464 x 56 transparent image, 16 mil colors. This size allows for a 2 pixel border. If you want more create your beginning image smaller by 4 pixels for each 2 pixels added That is, if you want a 4 pixel border, open an image 460 x 52. SAVE AS psp - use the options and select according to this screen shot: [I save ALL my psp files as PSP 5 compatible.]

Save As

Save Often

Step #2: Select the background color, gradient, or pattern you want, then select the flood fill it with your choice. I chose black.

Step #3: Right click on your only layer named Raster 1, choose Merge All (Flatten) to change it to a Background layer. If you don't, a pop up box will appear when you do the 4th step. Then click okay, and the flattening will be done this way, too.

Step #4: From the menu, select Image/Add borders. Select 2 for a 2 pixel border [or 4 if your image is 460 x 52], and choose a contrasting color. I chose white.

My original size [outlined in red] - a quick calculation of 2 pixels on each side will give me the full standard-sized banner. This is what I have so far.

Note the banner measurement is exactly 468 x 60 which yours should be. Are you remember to save your work?

Step #5: Grab your Magic Wand, click on the border you just made. Your image should have marching ants around it, enclosing the border. It should look similar to this except yours will be "animated":

Step #6: Using the bucket tool, flood fill with the color, gradient, or pattern of your choice. You may have to use the zoom tool to enlarge your image in order to click inside the marching ants. I chose a gold gradient [included in your supplies download - put it in your psp gradient folder]. I used these settings:

This is what you should have now:

Step #7: Add a layer. Name it Tube. I used my Daisy Fairy Girl made from a tutorial by Christina Gibbs. If you'd like to make your own, the tutorial is HERE.

Using the Tube Tool, place the tube at the left of the banner using these settings if you used my fairy:

Sharpen once; use a drop shadow to help sharpen the image a bit more.

Duplicate it [right click on the Tube layer and select duplicate. Now the image stands out nicely. My image so far: [Are you remembering to SAVE?]

Step #8: Hide the background layer, then merge invisible the two tube layers. Unhide the background layer. Highlight the merged layer, duplicate it, then mirror it. The new tube image should now be on the right side of the banner.

My banner now:

Step #9: Optional: Highlight the background layer. Add a new layer, Background 2. Using my jk-gossamerwings1, place your cursor in the bottom and middle of your banner. Use at 100% scale. Yes, it extends over the borders. That's okay.

Step #10: Highlight the top layer on your layer palette, then add a layer. Name it Text.

Step #11: Select the text tool, select the font you want to use, make the foreground null, the background the color, gradient, or pattern you want to use. I used a font called Curlz MT, size 30, and my shiny gold gradient. You can move it to the center or near the top like I did. I'm going to add some more text. Using these settings for a drop shadow will sharpen the text nicely:

My banner so far:

Step #12: Optional: Create a new layer, name it Text 2. Type some keywords describing your Web site contents. Center it below the other text. Add the same drop shadow to sharpen it. Save. Keep this with the layers intact so you can change images, background, text, etc. Click on any layer in the layer palette, and merge visible. If you wish to stop here, then save as a JPG with a compression of 20. If you intend to continue through the animation steps save the image again as banner1 [or your choice of a file name], in psp format compatible with PSP v5.

My completed JPG banner:


Step #13: Make three copies of your banner using Shift/D. Save them as banner2.psp, banner3.psp, and banner4.psp. Activate banner1.psp, then select the VM Natural and then Sparkle. Play with the sliders, and change the random seed for each image. Click okay when you're satisfied with he sparkle colors, sizes, and placements. Save each file again.

Step #14: Select File/Jasc Software Products/Launch Animation Shop. Select File/Animation Wizard. Then select these options:

1. Same size as the first image frame. Click Next.

2. Transparent. Click Next.

3. Upper left corner of the frame and With the canvas color. Click Next.

4. Yes, repeat the animation indefinitely. Time, 30. Click Next.

5. Click button, Add image. Find your saved banner files, click on banner4.psp, then hold down the shift key and click on banner1.psp - this will select all the files at once and put them in order from 1-4. Click Next. Then click Finish.

6. From the menu, select Animation/View. If the animation suits you, then click on File/Save As. I usually save my animations with a prefix of my initials and ani. That is, I saved my file as jk-ani-fairybanner.

7. The file will be saved as a gif file. The next screen - select Best Image Quality by moving the slider to the top. Click Next.

8. Optimization Process - automatic. Click Next. You'll see a sample of the finished banner. Click Next. Then you'll see a screen of Optimization Results showing the final file size and download times for various speeds. My banner is 28 KB. If you need one smaller in size, you can resize the psp files [remember to sharpen once if you do], and/or use only three images for the animation.

That's it!.

Some other standard banners. You're limited only by your imagination. I used a pattern on the first one, different angle for each psp image. The 2nd one, I used a sparkle tube and placed each sparkle.

Non-animated banner samples - these are smaller in size than animated ones:

This one is 9 KB

This one is 12 KB

This one is 13 KB

This one is 16 KB

For other banner sizes, try 120 x 60, 234 x 16, and 88 x 31.

Or take some images you've created and resize them for odd sizes. Instead of adding borders, try using PSP's Buttonize:



[ Home ] [Copyrights ] [PSP Quick Tips ] [ PSP Tubes ] [ Trailers/Floaters ] [ Tutorials ]

Copyright © 2003 Joyce Kohl
All rights reserved