animated banner

Paint Shop Pro 4.12 Filter Animations

Submitted by: deadnail@hotmail.com
Note: This only requires one filter, Splash 2 from the Filter Factory Gallery E. Any others you've collected will be useful, though.

Intro•diddley•duction

This is a wordy tutorial based on making animating GIF image frames through Paint Shop Pro plug-in filters. If have no idea what I just said, here's the long and short of it (If you did catch it, move on to Step One ;•) You've no doubt seen animating GIF images around the internet, right? Well, to make it animate, it's just a buncha frames of normal GIF images looped together with some control options. Making each frame is actually the difficult part. And you've probably found this document in some form or another on a site based around Paint Shop Pro. If you don't have it yet, you can download a demo at: Jasc,Inc. You'll probably buy it soon afterwards.

BTW, if you do know how to use PsP but don't know how to make animating GIF images, then I recommend you go to: Animagic. Animagic is my favorite program to use for making GIF images, simply because it's quick, powerful, and it does a nifty job with minimal work on your part... :•)

Step One

First thing's first... you've got to have your original image.. which I will refer to from now on as the 'base image'. You can just use one you already have, but it'll look better if you go ahead and just create something new.

base You can use anything you want to, though. Extensive warping effects and psychotic color fades are not only acceptable but encouraged.. play around and you're bound to come up with something cool, eventually. Such as this:

To get that, I started with a blank image, 400•200 (Color is irrelevant, usually.). First thing I did was apply a Metal Peacocks filter(Gallery E), (I changed both upper options to zero.). Next I mirrored it (image/mirror on the menu bar), and did the exact same Metal Peacocks filter. Then I threw on a Flowers 2 filter (Gallery F) (Just setting Charm to zero.). And finally, I colorized it with both options set to 150.

See? Just play around and you can find plenty of nifty things to use as base images (Or seamless tiles if you've got the right filters... ;•) But you know what.. these aren't gonna be JPEGs.. they're gonna be GIFs.. and they can get grainy when dithered. So do you know what makes the best base images? The more simpler ones.. such as a color fill, sunburst gradient with the foreground color set at light blue and the background color set at dark blue.. or it can be two totally different colors. These look the most like water and usually have the cleanest finished image.. HOWEVER, the above example will work perfectly... and probably anything you just throw together will too.

Here's a very, very minor list of filters that you can use to make good base images: Pool Shadow, Evanescence, Difference Spirals (Especially!!), Metal Peacocks, Flowers 2, Channel 5, and just about ANY Pinwheel or Fractal Magic filter.

Okay, so you've got that image... now, you have to pick the text you'd like to use. Create a new image with the same dimensions as your base image (In this case, 400•200.). The background color needs to be some odd color that will be the transparent color in the final image. Since I used blue, red would be a good choice. The text, for right now, can be any dang old color you want, so in this case I went with purple. As with most text effects, the wider the font the better. So, I used Impact.

There is only one solid, definitive, stone cold fact here: DO NOT USE ANTI-ALIASING! You will not see a difference until you animate the GIF, and then you've already spent so long doing the frames and it's ruined... argh!

02 Well, set up your text as you see fit and put it on your image. Before you set it anywhere (While it still has it's original selection.), cut it. Now paste it as a new selection (Ctrl + E), but remember to click the mouse immediately afterwards (DO NOT MOVE IT!). This will center the text perfectly into your image... good. Now, invert the selection (Shift + V), and you should be here:

If you aren't here, you hit a wrong turn. Kill the window and try again.

Now, if you've got it, good. Hang on to it. Minimize it for now.

Step Two

Okay, you've got the base image and the text template.. now what? Now.. you get to create all the frames for the animating GIF image. This will probably take from fifteen minutes to half an hour, so put on a CD, grab some heavily caffienated cola and prepare to get bored like you've never been bored before! :•/

As far as I know, there are only TWO filters that can be looped perfectly... Splash 2 and Metal Peacocks. For this example I used Splash 2, basically because it looks better. By setting all the variables the same except for one (Which is advanced progressively.), you can create smooth animations. Of course, unless you want your GIF to be a few megs in size, you wont do all two hundred and fifty five possible frames. This is actually your choice.. you can do eleven frames (Good quality.), or twenty one frames (Bigger GIF size, but very, very smooth animation!).

Since this is your first go of it, I suggest you just try the eleven frame one. Because you're probably gonna mess up along the way and it's best to get that lesson over with and lose the least amount of skin off your nose at the same time.

First things first, you've gotta have a scratch sheet. Save printing this out for later, for right now, just sketch one out on a piece of scratch paper using the following template:

11 Frame Animation:
000-11 100-07 200-03
025-10 125-06 227-02
050-09 150-05 255-01
075-08 175-04
21 Frame Animation:
000-21 087-14 175-07
012-20 100-13 187-06
025-19 112-12 200-05
037-18 125-11 212-04
050-17 137-10 227-03
062-16 150-09 240-02
075-15 162-08 255-01


Okay, copy one down or if you're lazy go ahead and print a few out. Now then, you've probably already noticed that these are increments in hexadecimal. Basically, if you don't get it... 000-21 means set the variable to 0 then save the image as 21. 012 means set the variable to 12 then save the image as 20. It's not too rough, and will probably work with all applicable filters including Metal Peacocks.

All right, now we get to create all of these frames. To do that, go back to your base image. It's probably still selected. Duplicate it (Shift + D) until you have your appropriate number of frames (Either eleven or twenty one copies of it.). Again, if you're lazy, just hold down shift then hold down d for a few seconds.. that'll create a few dozen clones quick.

If you've got Windoze95, make a folder on the desktop and call it 'image temp' or something (Personally, I go for Ramones lines like 'Gabbagabbahey' or 'Beat on the brat', but any stupid name you can give to a temporary directory go for it... this ain't stayin' too long.) If you've got Windoze 3.X, argh. Open up file manager, create a directory off of your hard drive and call it imgtemp or something. Unless you like clutter, of course.

Okay, you've got a place for all the frames to go now. Go back to PsP and get ready for the fun. Select a clone and fire up the Splash 2 filter. It's got a lot of variables, and they all make good differences. But remember, you've got to imitate these effects every time.. it WILL help to jot them down in some corner of your scratch paper. For this example, here's the changes I made:

03 Nice, eh? NOTE THAT PHASE IS YOUR CONTROL VARIABLE!! IT'S THE 000, 025... ETC. ON YOUR CROSS OUT SHEET!!

Remember that text template you made? It's still down in the corner. Bring it back up, COPY IT, then minimize it again. DO NOT CLOSE IT! (BTW, if it didn't end up in the corner, it's too buried to get to easily. Go to Window, and it's PROBABLY Image2.)

04 Go back to that clone you just warped. Paste as new selection (Ctrl + E, remember?), AND AGAIN CLICK IMMEDIATELY WITHOUT MOVING THE MOUSE! That should center your template perfectly.

Now you've got a mostly red image, with just the text being the window to the warped effect. That's good, but not quite done. Now invert your selection (Shift + V), copy, then paste (MAKE SURE THAT YOUR BACKGROUND COLOR [RIGHT CLICK COLOR] IS THE SAME AS YOUR TRANSPARENT COLOR, IN THIS CASE RED!)

And that gives you this little thingie:

05

That my friend, is ONE finished frame. Save it into your temporary directory as 21 (Or eleven, depending on your current flavor.). For right now, save them as Windoze bitmap files.. they become GIF later. Cross off 000-21 on your little sheet.. get it now? 000 is the Phase option and 21 is the file name of the frame.

Okay, now close that image.

And close your 'used' clone image (Don't bother saving it.)

You've got a clean clone now. Bring up that text template again, copy it again, and minimize it again. Open up Splash 2 on the next clone. Recreate the exact same options (See.. leave as many as you can untouched and it gets A LOT easier!) So for this example that's just four changes. Center X, Center Y (You can play around with these.. 0 is all the way to the top/left, 128 is centered, 255 is all the way to the bottom/right. You can have the waves coming from ANY direction with these.), Wave Width (This should be VERY LOW for detailed images, but can be anything for simple images.), and of course Phase (Which now goes to 25, [or 12].)

There's that familiar clone warp, right? Trust me, it IS different.

Now, try this little shortcut.

CROSS OFF THE NEXT NUMBER ON THE LIST, AND NAME THAT FILE APPROPRIATELY (So far it's either 20 or 10.).

Control + F4 to close that image.
Control + F4 again to close the 'used' clone (Tap 'N' so you don't save.).

(If you didn't take to minimizing the text template last time, it will by default jump you right to it now. So, go ahead and tap Control + C to copy the image, then click on over to your next clone.)

Do the Splash 2 filter, and remember to jump up the Phase setting.

It does go by A LOT quicker if you memorize the keyboard shortcuts. Of course, if you're already a good PsP user, you already know the shortcuts, and this document must've been wordy as all get-out. Sorry. 8•Þ

Once you've got a pattern in your head it gets a lot quicker, and the time will fly on by if you play a CD too. Go ahead and do all the frames now. The only things to keep remembering are to name the files right and to make sure you set up Splash 2 in sequence every time.. every single option (Only four in the example.. :•) The repetitiveness is where you'll eventually mess up. Don't worry.. it's not so bad, and it probably won't happen too often.

Step Three

Okay, so now I assume you've got all of your frames done and saved into your temporary directory.

You got a GIF animator? Well, as I said before, Animagic is simple enough for beginners and quick enough for.. uh, everyone else.

Since that's the Animator I seem to be selling, I won't describe how to use any others. ULEAD's GIF Animator is okay, but I hate the GIF Construction Set. Just me, I guess.

06 Anyhoo~
I assume Animagic is opened up. Click on File, then to go Insert Frames... . If you've got Windoze95, again this is easier. That 'Look in: ' thing with the drop down menu also includes every subdirectory on the desktop, including our little temporary thing.

Here's a quick trick to get them all in there at once. Click on 01. Now hold shift, now hold the down arrow until they're all selected. Then hit enter.

07 Animagic will automatically dither and load in each image. Depending on your PC, this could take from a few seconds to a chunk of time. Suddenly, you're here:

But probably with a bigger window. Anyhoo.. see that icon up there that looks like a medicine dropper (Right above the Frame List.)? Click it. Now move the mouse cursor over the image. Make sure to hit the color that you want transparant.. in this case, that's a tad hard to miss.

Boom. That color disappears. Good.

08 Now, hit Animation then Frame Rate... . If you've got 21 frames like this then this is important, and it might also be useful to a few eleven frame ones. This menu will pop up:

See where it says Milliseconds per frame? Well, if you've got 21 frames then 250 might be a bit too much. Try dropping it right down to 100. If you've only got 11 frames then it's probably cool as is. OK yourself out of this window.

Well, after you've done that, then go ahead and hit that arrow shaped icon (It's effectively the 'Play' button.. and shaboing there's your animating GIF logo.)

Sometimes, the last frame isn't necessary. Sometimes it is. Well, if it seems to have one frame that doesn't advance nearly as much as the others, (It might be the first or last one...), go ahead and cut it. That should've fixed it. This doesn't always happen.. but this time it did (For me, anyways.).

Remember, use **SAVE AS**.

How did mine turn out????? It's right here.. double click on LUM:

LUM
Warning
very large graphic
248kb
smaller version
Smaller version
65kb

Step Four

Actually, you're done now. Hopefully, you know how to upload and the such so I don't have to give that speech. These go great as homepage logos. :)

This document was originally created by:
deadnail@hotmail.com

Back to Tips and Tricks Index




Sponsored in part
by

Digital Daze