PROGRAMS RECOMMENDED: ULEAD GIF

I like the ability to be able to animate files. There is only so much space within some images like banners and sometimes it is hard to be able to get your point across in just a little space. Your current web site may benefit from a little enhancement and it's easy to do with Ulead GIF Animator (most GIF animation programs are easy to use so it's not too important which program you use).

Lets take the example of a 468x60 banner. Supposing you needed to advertise your website on some larger sites who are offering some banner space. Most of the time they will specify two things: (1) that the banners are a standard size, (2) that they are within a certain file size.

CREATING THE BANNER:

1. Open Photoshop and create a new canvas 468 pixels wide and 60 pixels high.

2. Arrange all of your elements that you need in your banner. You will then need to save as many files as you need to acheive the animation (for example I want the text "CLICK HERE" to flash on and off, so I am saving two files with the on state and the off state).

USING GIF ANIMATOR:

1. Create a new canvas and then insert your images by using LAYER > ADD IMAGES. Select any images needed for the animation (you may select more than one)

2. Look for an item called "Delay" and change the delay of each image in your Image List till the animation looks just right.

3. You may Preview the animation to double check that it is alright.

4. To help you keep to your size - limitations there is also an option to Optimize the image once you are finished. Choose from the presets until you find a combination that doesn't make your image look bad but still sticks to any file size limitations you may have. If you have optimized your Gif and it looks horrible, don't try and apply another one over the top, go to the EDIT menu first and Undo the last optimization.

5. Below this article is my banner that I got away with optimizing to only 16 colors which as you can see from the image above, has drastically reduced the file size without losing much quality. However if your banner has more colors in it (especially if you have a photo-quality image in there) you may notice a fair reduction in the overall quality of the GIF if you try and Optimize it too much.

OTHER EFFECTS:

Believe it or not, GIF Animator also comes with a range of plugins just like in Photoshop. If you browse through the VIDEO F/X menu I'm sure you will find a nice effect for your animation. Don't be afraid to try out the different effects and see how all the extra frames affect your total file size.

OTHER WAYS TO OPTIMISE FILE SIZE:

If you look at the banner that I created above there is a way to actually make it even smaller! The part that is flashing on the banner is "CLICK HERE" and nothing else. What if, instead of saving two images when the second contains almost the exact elements of the first? To actually decrease the size even more I would save the first image in it's original 468x60 pixel dimensions, but then for the second I would only isolate "CLICK HERE" and reduce the size to fit only those words in. GIF Animator allows you then to position the smaller image so that it perfectly covers up the Blue "CLICK HERE" with the white. Just make sure you have the "Compose" tab selected.

By Andrew
BlueDesignStudios

This article was brought to you in conjunction with YnotMasters Network