Note that once text is embedded in to the base image pixels, the text no longer exists as text!. Unlike Word Processors and Drawing programs that retain text characteristics where the characters can be changed at any time, the text in a bitmap image is only text to the human brain via the familiar visual shapes of the characters.

Depending on the Font Face style and to some degree, the colour, you will get different results when using Antialiased and Non-Antialiased characters. The sample above displays two simple words embedded into the image pixels accompanied by an enlargement of both. The effect of antialiasing is clearly seen in the second enlarged line.

Not for Desktop Publishing
Painting programs including Photoshop and Paint Shop Pro allow choice between applying antialiasing and not applying it, and it is these choices that should be tested when ever you use text on low resolution bitmaps like Web graphics. For Desktop Publishing with high resolution bitmaps text should not be applied at all unless it needs to be included in the effects of a distortion filter etc. Other wise overprint the image with sharp postscript outline fonts in a Pagelayout or Drawing program where the text will stand out crisp and sharp at print time.

Antialiasing is not always the answer
Generally antialiasing gives the best results on Web graphics but above I applied a bold font designed for use at low resolution. At the size chosen the word without antialiasing, the first one, probably looks better. So I repeat, don't be too clever, simply apply a test of each method before deciding. It only takes a couple of clicks, view, and Undo then test the alternative.

Options in a Text Tool option window

• To activate the Text Tool once chosen, click on the bitmap image near where you want the text to appear.

• Left, Right and Centred justification options will be available. This relates firstly to the position of the cursor when you clicked on the image, and secondly how multi lines of text appear if you type multi lines into the Text Entry box.

• Choose antialiasing as described above, On or Off.

• Font Face Name, Style and Size are all options that you should be familiar with. I find that most of the time I have to UNDO my first application and change the size and sometimes the style (normal, bold, italics, etc.).

• If working with low resolution monitors, i.e. especially 64X480, remember that nice small text used by you will probably be unreadable to many Web Surfers that use higher resolution video.

Photoshop and PSPro will not apply antialiasing to an Indexed colour image. Change the Colour Depth to RGB, apply your text and later change back to Indexed colour if using GIF images. (For  Photoshop choose 'Mode - RGB' via the Image Menu. For PSPro choose 'Increase Colours - 16 million' via the Colours Menu)

Converting back to 256 (or less) colours
Photoshop. Choose 'Mode - Indexed' from the Image Menu. Click "Yes" to flatten the image into one layer and select "OK" to the defaults that appear next.

PSPro. Choose 'Decrease Colour Depth - 256 colours' from the Colours Menu.

Transparency?
If you are following these lessons in the correct order you will know how to include or keep a transparent colour in the saved GIF format. Just remember that when painting colours (i.e. text), do not use a colour that will be the same as the one you want to use or has been used for the transparent pixels. Even just a shade different will usually be OK. Follow the steps described for transparency or.....

Photoshop. Go to the File Menu and choose 'Save As" and give the file a new name in the desired folder. From the drop down list of file types, select GIF. Click "Save".....

PSPro. Go to the File Menu and choose 'Save As" and give the file a new name in the desired folder. From the drop down list of file types, select GIF. Click "Save".....

image one and two used for an animation

• First and obvious, you need more than one image and they have to be different in some way. A good starting point is viewing animated Banner Adds as most are obvious changes without smooth transitions. Smooth transitions are created with a lot of images and minor change between each - larger files and slower page loading too.

• Creating areas of transparency is as straightforward as with any single image because that's all an animation is. A few or many individual images.

• All images should be the same size although a few advanced tricks can be incorporated as experience grows. If images are different sizes, view the final animation in Internet Explorer as well as Netscape. Netscape is very fussy about backgrounds and can even display an error differently in version 3+ compared to version 4+. When confident, save and view the components of other animations by "Opening" them in an animation program. REMEMBER that they are probably copyright so never display them any where without permission. Just study them.

• The animated buttons I have offered in the sample pages can be saved individually, altered and combined, but still you must have a GIF animation program. The samples would be excellent starters for any one as there are only two images for each. Get an animation to work, then try another by adding text or changing colours as described in these lessons etc..

• Do not try and include shadows until you have a good understanding of animations.

• Each image has to be allocated a time before it is replaced with the next image in the loop. The time is always entered as a value in 100ths of a second. i.e. 350 equals three and a half seconds.

• Animation programs have several options for the way one image replaces the other in respect to each other, the background or transparency. Practice with each option and get an idea how each method works and always learn with the simplest of tasks and build from there.

• GIF animations can be set to "Loop Indefinitely" or for a particular number of times. i.e Perhaps you could have a banner that quickly looped 3 or 4 frames of welcome comments before it stopped - making it less distracting once the viewer started reading your page content. It is well published that a large proportion of Web Surfers really dislike animations.

Microsoft supply an easy to use free GIF Animator. Ulead sell an excellant program with a few useful extras plus transition affects and text affects. Alchemy Mindworks also sell a good program with a few extras like banners and shapes.

Practice, create and enjoy!

 
If you find these tasks helpful, please let me know - and leave some money on the fridge as you leave!

using the supplied buttons & frames

• Changing a frame or button size

• Adding a picture to a frame

• Adding the drop shadows

• Changing the colour