You may read the following sections in their entirety
or use these choices to go directly to a section.

| Introducing animation | | Getting started | | Our first animated GIF image | | Creating the animation using GIF Construction Set | | Our second animated GIF image | | How the PJCVS MATH animated GIF was created | | Creating LED signs, banners, and special-effect images |

There are many websites on the WWW where you can find animated gifs. Just go to your favorite search engine and do a search for sites offering animated gifs. Visit these sites to either download some animated gifs (check if you need permission) or to gather ideas on making your own. We will make two animated gifs so that you will have a good understanding of the process involved.

1. A paint program to make your series of images such as Corel Paint Shop Pro Photo X2 or Adobe Photoshop, and
2. A program such as GIF Construction Set Professional from Alchemy Mindworks to put all the images into animation (to create the actual animation). Paint Shop Pro used to include Animation Shop to create animations but as of Paint Shop Pro X (Paint Shop Pro 10), Animation Shop is no longer part of Paint Shop Pro.

So, if you do not have these programs, now is the time to get them. In this lesson, you will need Corel Paint Shop Pro Photo X2 and GIF Construction Set Professional. Each can be downloaded as a fully functional copy to try out free for 30 days, after which a decision to purchase must be made. The current version of Paint Shop Pro is named Corel Paint Shop Pro Photo X2 (version 12) which is the version used in these lessons. In these lessons, we will simply refer to Corel Paint Shop Pro Photo X2 as Paint Shop Pro.

To download, click on the appropriate link:

Paint Shop Pro

Photoshop

GIF Construction Set

ANIMATION
ANIMATIO
ANIMATI
ANIMAT
ANIMA
ANIM
ANI
AN
A
blank image goes here (no letters)
A
AN
ANI
ANIM
ANIMA
ANIMAT
ANIMATI
ANIMATIO
(go back to the beginning and repeat - we are in a "loop")

Problem 1: Seems like a lot of images. How many distinct images are there in this example?

Problem 2: How many images are actually displayed before looping takes place?

| Click here to go to the answer section |

Here are the steps to create the above animation using Paint Shop Pro:

1. Open Paint Shop Pro.
2. If the Learning Center palette is visible down the left side of the screen, then it needs to be closed. This will increase the working space. There are several ways to do this and they are:
   • Click on the palette's Close button which is the small X located on the palette's Title bar to the right of the title "Learning Center".
   • Click on the Help menu and then choose Learning Center to deselect it. In other words, choose Help --> Learning Center. The Learning Center should no longer be visible. If you want to bring the Learning Center back into view again, choose Help --> Learning Center and it will reappear.
   • You can also make the Learning Center appear and disappear by choosing View --> Palettes --> Learning Center.
   • Finally, in the Standard toolbar is a choice named Palettes. Click on the name Palettes and one of the choices in the drop down menu is Learning Center. So you can also use this method to make the Learning Center appear and disappear.
3. We will also close the Organizer window which will even give us more room. This window is located below the main working window. Here are two ways to do this:
   • Click on the Organizer's Close button which is the small X located on the far left of the Organizer's Title bar.
   • Choose View --> Palettes --> Organizer to remove the checkmark. This will make the Organizer palette disappear. To make it appear again, just choose this menu item again.
4. We will now make sure that the Tools toolbar, the Tool Options palette, and the Materials palette (called the Color Palette in previous versions of Paint Shop Pro) are in view (displayed in the main program window). The Tools toolbar is used to crop, paint, draw, add text as well as a host of other image editing tasks. When a tool is selected from the Tools toolbar, there are often options associated with the selection. The Tool Options palette contains these options. Two examples of options are setting the size of the line width for the drawing tools and setting the brush size and shape for the painting tools. The Materials palette sets the colors and materials for painting, drawing, retouching, filling, etc. Here is how to bring the Tools toolbar, the Tool Options palette and the Materials palette into view:
   • Choose View from the Menu bar and then choose Toolbars to view the Toolbars drop down menu. That is, choose View --> Toolbars. There are a number of Toolbar options and those that are currently chosen are highlighted with a checkmark beside them. If there is no checkmark beside the word Tools, then it means that the Tools toolbar is not currently in view. If this is the case, then click on Tools to bring the Tools toolbar into view. Now if you again choose View --> Toolbars you will see a checkmark beside the word Tools. The Tools toolbar is usually placed vertically on the left side of the Paint Shop Pro main program window. Note: At this time every tool in the Tools toolbar is grayed out meaning that they are inactive. In other words you can't use any of them. This is because we do not have anything such as an image or object to work on yet.
   • To display the Tool Options palette, choose View --> Palettes. From the Palettes drop down menu, chose Tool Options if it does not have a checkmark beside it. The default position of the Tool Options palette is underneath the Standard toolbar. Note that every tool in the Tool Options palette is also grayed out since we do not have an image or object to work on yet.
   • To display the Materials palette, again choose View --> Palettes. From the Palettes drop down menu, chose Materials if it does not have a checkmark beside it. The default position of the Materials palette is at the right side of the main window. You may have noticed that the Materials Palette actually appeared when you closed the Learning Center.

5. We will now create our first image. Choose File from the menu bar, and then choose New (or simply click on the New button in the Standard toolbar). This will display the New Image dialog window.
6. You are now asked for some information about the new image such as the size of the image you want to create. Enter 200 for the Width and enter 50 for the Height. These numbers represent the width and height in pixels so make sure that the dimensions are in Pixels. This size is bigger than what we need which is okay as we will resize the image later. The resolution can be left at 200 pixels per inch.
7. In the Image Characteristics section, ensure that the Color (meaning background color) is White. Everything else can be left as is (Raster Background selected, Color depth RGB at 8 bits/channel, and Transparent not selected). Click on OK. Note: Computer graphics are of two types: raster and vector. As it states in the Paint Shop Pro User Guide, raster images (also called bitmap images) are composed of individual elements called pixels. Thus an object in a raster image is defined by its pixels and to edit the object you edit the pixels. Vector images use geometric characteristics to define its objects. Examples of geometric characteristics are lines and curves and their locations to define objects. Thus with vector images you edit objects or shapes rather than pixels.
8. You should now have a new image named Image1 with nothing in it (except for a white background). Just ignore the name for now.
9. In the Materials palette (see picture below), there is the big color panel showing the available colors and is called the Available Colors panel. Beside the Available Colors panel are two rectangular boxes. The top one is called the Foreground and Stroke Properties box and the one underneath it and a little to the right is called the Background and Fill Properties box. Now if you rest your mouse cursor over the Foreground and Stroke Properties box, the cursor turns into an eye dropper and the words Foreground and Stroke Properties will pop up in a text box along with the current color and texture information. Rest your cursor over the Background and Fill Properties box and the words Background and Fill Properties will pop up along with the current color and texture information. This box should be white as we chose white for the background color. Thus the upper box affects the image's foreground and the lower box affects the image's background. These boxes are also called the Foreground and Background Material boxes.

   In the Help menu, in the Materials palette section, the following diagram is given with the Rainbow tab in view:

   

   Below each of the Foreground and Background boxes are three small buttons called Style buttons. Thus the Foreground Material box has three style buttons and the Background Material box has three style buttons. If you rest the mouse pointer on any of these three buttons you will get their names. The first one is called Color and it is used to create a solid color, a gradient color or a pattern color. You can see these options by clicking on the button. The middle button is called the Texture button and it is used to turn the current texture on or off. The third button is called the Transparency button and it specifies whether the foreground or background is to be transparent. Transparent means that there is to be no style or texture.
    

10. Under the Foreground Material box, click on the third button as we want the foreground material to be transparent. That is, we do not want any foreground style or texture.
     

11. Now click on the Background Material box. This will display the Material color palette. In the cluster of little boxes, choose the color red. Red is the little box displaying R:255 G:0 B:0 when the cursor moves over the box. When you choose red, the Hexadecimal code for the color red (#ff0000) appears in the HTML box. Click on OK and this is what you should have so far:

    

12. In the Tools toolbar, click on the Text tool (the one with the letter A on it).
13. Move the cursor over the new image that you created and it will change into the Text tool cursor (a cross-hair with the letter A attached). Before we write our text (ANIMATION), we need to set up the text font, size, etc. Note that the Tool Options palette now displays the options for the Text tool. We will now set these options.
    • Click on the down arrow in the Font box and choose Century Gothic.
    • For the Font Size, choose 12. I find that the size of the font varies with the version of Paint Shop Pro. For example, in version 9, I used a font size of 22 for Century Gothic. In this version it seems that a font size of 12 gives about the same size lettering. If you find that size 12 is too small, just increase the size to something more suitable.
    • Make sure that you have Left for the alignment, 0.0 for the Stoke Width and Smooth for the Anti-alias.
    • Click on the down arrow in the Create as box and choose Floating. This will allow us to cut out one letter at a time from the word ANIMATION. Here is what you should have:

    

14. You are now ready to enter the text. In the new image box, click somewhere on the left side where you would like the first letter A of ANIMATION to appear. As you will see, wherever you click, that is where the lower left corner of the first letter will appear. You might think that where you click in the box is where the center of the text will be placed. Not so. Where you click is where the lower left corner of the first letter of the text will be placed. When you click into the box, the Text Entry dialog window opens up. In the Enter text here box, type the word ANIMATION. Also make sure that Remember text is selected (there should be a checkmark in the check box). Now click on Apply.

The word ANIMATION should now be in the new image (or at least part of it should be visible). The word appears with dashed letters and with the dashes moving. You can move (drag) the image into a better position if you wish, but it is not necessary to do this for our purposes.

We will now make our image smaller so that the word ANIMATION takes up the entire image with no empty space around it. To do this,

1. Click on the Edit menu and choose Copy.
2. Nothing appears to have changed. Now choose Paste As New Image from the Edit menu. That is, choose Edit --> Paste As New Image. Note that the new image (named Image2) is now reduced to the size of the text with a light colored checker board background.

   

   The checker board background will not be displayed in a browser. The checker board indicates the parts of the image that are transparent. We no longer need the original larger image so you can delete it by clicking in the Close box at the top right corner of the image (the one with the X in it) and then indicating that you do not want it saved.

3. We will now save this new smaller image. Choose File, then Save As.... This will display the Save As dialog window. Now:
   • Choose the folder you want to save these images in.
   • Then click into the Save as type box and choose GIF Graphics Interchange Format (*.gif).
   • Also type in the name animat1 (short for animation 1 - our first image in the animation). This will ensure that the image is saved as animat1.gif.
   • Now click on the Options button. Make sure that the radio button beside Version 89a is selected and also make sure that the radio button beside Noninterlaced is selected.
   • Click on OK.
   • Click on the Save button to save the image named animat1.gif.
   • Since gif images have a maximum of 256 colors, you are now told this fact plus a statement about layering and asked if you want to continue. Click on Yes and the image is saved.

Our first of 10 images has now been saved. Since we are making a little "movie", image by image, all the images must be:

• the same size
• in the same format
• at the same color level (256 colors)

Let's now create the second image which is the word ANIMATION with the last letter "N" removed (ANIMATIO).

1. It will be easier to delete individual letters if you first make the area around the image a little bigger. So drag one of the corners of the image to enlarge the area so that the image now looks like:

   

   Note that the image itself is not made bigger. We are just increasing the space around the outside of the image.

2. Now in the Tools toolbar click on the Selection tool, . This is the one with the dashed rectangle on it. This will change the Tool Options - Text palette into the Tool Options - Selection palette.
3. The little down arrow in the Selection tool means that the Selection tool has other options. If you click on the down arrow, you will see that they are Selection, Freehand Selection and Magic Wand. We want just the Selection option.
4. In the Tool Options - Selection palette, make sure that the Selection type reads Rectangle since we are going to draw rectangles around the individual letters in the word ANIMATION. That is, we will be doing our selecting with rectangles.
5. Now carefully drag a box (a rectangle) around the last letter N so that the letter N is completely inside the box. A rotating dashed rectangle should now be around the letter N.
6. Choose Edit, then Cut. The letter N should now be gone. The rotating dashed rectangle will still be there but you can ignore it and the dashes won't be saved when you save the image.
7. Using the same procedure as above for saving animat1.gif, save this new image without the letter N (ANIMATIO) giving it the name animat2.gif. We now have two images - animat1.gif and animat2.gif.

You now have all the images saved and are finished with Paint Shop Pro.

In this section we will create the animation using GIF Construction Set. So first load GIF Construction Set Professional as this program will take all of our image files and place them into one animated GIF file. GIF Construction Set represents state of the art GIF animation software. GIF Construction Set includes:

• An Animation Wizard to guide you through the process of creating the animation letting the software do most of the work.
• A Supercompressor which analyses your completed animation and looks for ways to store it in a smaller file without losing quality and animation (the smaller the file, the quicker the animation will load and display in a browser).
• An incredible Banner maker that includes a variety of special effects to create sophisticated banners.
• A LED sign maker which can be either still or animated.
• Transitions to create animated transitions between still images in an animation.

1. Click on File and then choose Animation Wizard. Another way to activate the Animation Wizard is to simply click on the magic wand button, .
2. You now need to make a few decisions on how you want your animation to work. At the top is a tool bar and the first item in the tool bar is Loop. If the checkbox for Loop is checked, then the animation will loop indefinitely. If this box is not checked, then the animation will loop only once. Since we want our animation to loop over and over, make sure that the check box beside Loop is selected (there must be a checkmark in the box). You can change this setting later after the animation has been created.
3. Next is the Delay. This item will set the delay per image for your final animation. These delays are divided into hundredths of a second (1/100ths of a second). It should already display a delay of 10 one hundredths of a second meaning each image will only appear for 10 one hundredths of a second (or a tenth of a second). 10 is what we want so ensure that Delay is set to 10. You can experiment with other numbers later. The one you see on this web page was set to 10, but with all the other animated gifs, it could be running a little slower.
4. Next you are asked how you want to handle the color palette for your GIF file. There are a number of choices and they are:
   • Matched to superpalette. This choice should already be selected and is the choice we want. This choice will have GIF Construction Set look at all the colors in all your individual images and create a 256 color palette that best reflects all your images. It will then remap all the colors in your images to this palette. This option usually gives you the best results.
   • Dither to superpalette. This choice will have the Wizard look at all the colors in all the images in your animation and produce a 256-color palette which best reflects all your images. It will then dither all the colors in your source images to this palette. This option is a good choice if you are building your animation from photorealistic images and you do not intend to add transparency to it. Dithering is the complex pattern of alternating dots that can be used to simulate the original colors. Dithering is often able to create very effective simulations of the true colors in an image.
   • Matched to first palette. This choice will have GIF Construction Set create the animation using the color palette from the first image only in your animation. This choice will give you more control over the use of colors in your animation but it can lead to display problems if the colors in the first image are quite different from the colors in the rest of the images.
   • Fixed photorealistic. This option has GIF Construction Set dither your images to a palette with an even dispersal of colors from pure white to pure black. This is the best option if you are building an animation with JPEG images where you have a wide range of colors.
   • Fixed drawn. This is the same as Photorealistic except that the images are remapped rather than dithered. Remapping is suitable for line art but not for a photorealistic image.
   • Sixteen colors is similar to the Drawn option except that it only uses a palette with the 16 basic Windows colors. This choice is then suitable for simple animations with a small color range.

   For our example, leave the Matched to superpalette selected. It is generally the best choice for GIF images.

   The rest of the tool bar contains buttons used in constructing the animation. This is what our choices look like:

   

5. Below the tool bar are three panels or frames. In the left frame, browse to the folder where all the GIF files are saved.
6. All the GIF files located in the chosen folder are now displayed in the middle frame. Note that both the images and their corresponding file names are displayed. In this frame, we will select the images that make up the animation. The images we select will be placed in the right frame. We must load the GIF files in the order they are to appear in the animation. To do this,
   • Click on animat1.gif in the middle frame as this is the first in our series of images to be loaded.
   • Now click on the Add button and animat1.gif appears in the right panel along with its location. If you accidentally transfer the wrong image, you can click on the image in the right frame and then click the Remove button.
   • Now back to the middle frame. If animat1.gif is still selected, click on it to deselect it. Now hold down the Ctrl key and while holding it down, click on the name animat2, then animat3, animat4, animat5, animat6, animat7, animat8, and animat9. Do not click on animat10 because it will be inserted alpha numerically after animat1 which we do not want. Now click on the Add button and the files are transferred to the right frame.
   • This time click on animat10 and transfer it to the right frame. This will place animat10 right after animat9.
   • Since our animation prints the word ANIMATION backwards and then frontwards, we now have to reverse the above procedure, beginning with animat9 down to animat2. Because the order is important, we must add these filenames one at a time - otherwise they will be placed in alphanumeric order. So click on animat9 and then click on the Add button. Then click on animat8 and then on Add. Continue this process until you have added animat2. We have now transferred all the files needed for the animation and in the order they are to appear.
   • Note that all the images and their corresponding names have been placed in the right frame in the order from animat1.gif to animat10.gif and then from animat9.gif to animat2.gif. Note that they are also numbered from 1 to 18 indicating that we have 18 images in the animation. That is, we have the following:

       1    animat1.gif      ANIMATION
       2    animat2.gif      ANIMATIO
       3    animat3.gif      ANIMATI
       4    animat4.gif      ANIMAT
       5    animat5.gif      ANIMA
       6    animat6.gif      ANIM
       7    animat7.gif      ANI
       8    animat8.gif      AN
       9    animat9.gif      A
     10    animat10.gif
     11    animat9.gif      A
     12    animat8.gif      AN
     13    animat7.gif      ANI
     14    animat6.gif      ANIM
     15    animat5.gif      ANIMA
     16    animat4.gif      ANIMAT
     17    animat3.gif      ANIMATI
     18    animat2.gif      ANIMATIO

   Note that you can move any image in the right panel by clicking on the image with the right mouse button and then from the pop-up menu, choose Move.

7. It is now time to create the animation. To do this, simply click on the Build button. This building may take a few moments. When the building is completed, the Wizard terminates and we are back in the GIF Construction Set window.
8. You are now in the GIF Construction Set window. We will study the various parts of this window later. You can now save the animation by choosing Save As from the File menu. You can accept the name that GIF Construction Set places in the File name box or you can replace it with a name of your choice. If you are using the evaluation (unregistered) copy, you will be told this fact along with some facts and options on how to register. You can ignore this for now.
9. To view your animation, click on the binoculars button (the View animation button), . When finished viewing, click on the X to close the View window. You can also load the animated gif into your browser to see the animation in your browser.

You can also load your images into GIF Construction Set without the wizard. To do this:

1. Click on File and then choose New. A window opens up with the word HEADER in it. We will study the Header later.
2. Now from the Edit menu, choose Insert block and then choose Image (Edit --> Insert block --> Image) since we are inserting an image. This will display the Open dialog window.
3. Hold down the Ctrl key and click on animat1, animat2 up to and including animat9. Click on Open. You may be told that the image you imported does not match the global palette for this file. Choose Remap this image to the global palette and click on OK. In a few moments, all the images appear in the GIF Construction Set window.
4. Now again choose Edit --> Insert block --> Image. This time click on animat10 and click on Open. We now have the images from animat1 to animat10.
5. Now add the rest of the images, one at a time, beginning with animat9 down to animat2.
6. You can now save what we have done so far, but keep in mind that we have not added any delay between the images or told GIF Construction Set how we want the animation looped. We will do this now.

MANAGING AND EDITING OUR ANIMATION

Whether you used the wizard or not to load the images, we will now learn to manage and edit our animation. GIF Construction Set manages animation through blocks. Each GIF file consists of a series of blocks that we can edit. We will therefore take a moment to understand these blocks.

• Header Block: Note that the first line in the GIF Construction window is the Header Block. A GIF file only has one Header Block and it is always the first block in the file. Note that the Header Block reads: HEADER GIF89a Screen (180x25) where 180x25 represents the width and height in pixels of the animated image (the GIF file). Your width and height may be different to mine. You may not be able to see this entire Header line but if you extend the width of the window or click on the Maximize button on the Window Bar at the top right, you will see it. The Header also indicates that the animated image will be saved as a GIF image in 89a format. The Header also contains other information about the animated gif such as the background color for viewing your animation in GIF Construction Set and the palette that all the images in the file will use. Double clicking on the Header line will reveal all this information.

• Loop Block: There is only one Loop Block and this block specifies whether the animation is to loop indefinitely or only a set number of times.

• Image Block: Each image has its own Image Block. Double click on an image and its block will be displayed. This block stores the image and the information relative to the image such as its location from the top left corner in relation to the area in which the animation will appear.

• Control Block: With each image is a Control Block that tells the browser how to display the image. The Control Block contains information such as what color is to be transparent, how long the image should be displayed before the next image replaces it, etc. Double click on any image to display the Image Block which contains the Control Block.

• Comment Block: The Comment Block is located at the end of the file and stores hidden text such as copyright information or whatever else you wish to place in it. These comments do not appear in the animation but will appear when the animation is viewed in GIF Construction Set. You can edit the Comment Block by double clicking on the block. Note: You will not be able to eliminate the Unregistered Shareware comment. You can delete the Comment Block but it will be replaced when you save the file. This comment block will not appear once you register the program. So if you like this program and plan to use it personally or professionally, be sure to register your copy.

1. First highlight all the images by clicking on the first Image Block (representing animat1) and then while holding down the Shift key, click on the very last Image Block in the list (representing animat2). All the Image Blocks should now be highlighted. Only the Header Block is not highlighted. Any change that we now make will be applied to all the images in the GIF file.
2. From the Block menu, choose Manage. This will display the Block Management dialog window.
3. Make sure that the radio button beside Set controls for the selected blocks is selected and click on Apply. This will display the Edit Control dialog window.
4. Set the delay to 10 meaning each image appears for 10 one hundredths of a second. You can experiment with other numbers later. The one you see in this browser was set to 10 but with all the other animated gifs, it could be running a little slower.
5. Note that when GIF Construction Set loads your images, it will not load any transparency information. If you want a transparent background, you should set it at this time. You can set any color to be transparent. Let's set the white background as the transparent color. Here is how to do it:
   • Click on the checkbox beside Transparent Colour to place an X in the box.
   • Click in the box beside the Eyedropper tool and a color palette window opens up. Choose the color white which is the number 215 (or Hex #FFFFFF). Click on OK and the number of the color appears in the box.
   • If you do not know the exact color, you can choose the color you want transparent with the Eyedropper tool. Click on the Eyedropper and your image will appear. Click somewhere in the area of the color you wish to make transparent. The image disappears and the number of the color you have chosen appears in the box.
   • For the Remove By, choose Background so that our animated gif will have a transparent background.
   • Click on OK and you will be back to the Block Management dialog window.
6. Now click on the radio button beside Enable controls for the selected blocks and then click on Apply.
7. Click on OK to return to the GIF Construction Set window.

Each image in the image file now appears on a black background. This black background indicates the transparent part of the GIF file.

You can also edit an individual Image Block. To do this, choose an Image Block and then double click on it. This will display the Edit Image dialog box. Note that the width and height of the image are given in pixels and the current position is 0 pixels from the top and 0 pixels from the left side of the area set aside for the animation file. You can change these position values but not the size of the image as this is automatically calculated by GIF Construction Set when the GIF file was constructed. Note that the Control panel on the right side is similar to the one we used for all the images. Note also in this Control panel that the delay for this image is 10 one-hundredths of a second which we just finished setting for all the images. If you wish to experiment, you can change the time delay for this image to another delay time. We are not going to change anything here so click on Cancel.

We now need to insert a loop. Double click on the Header Block. This will display the Edit Header dialog window. Now click in the checkbox beside the word Loop to make sure that it is selected. Leave the Iterations count at 0. A count of zero means that the animation will loop indefinitely. Note that the background color is set to Black (which is the number 0). This is the black background you see with each image in the GIF Construction Set window. If you would rather see a white background in the GIF Construction Set window, then click on the button and choose the color white (number 215). That is all we need to change so click on OK. You can now view the complete animation by clicking on the View animation button.

You can now save the animated gif by clicking on File and then Save As. The type of files should say GIF files. Choose the folder you want to save the animated GIF file in and type in a suitable name for your GIF file. When ready, click on Save. You should also load the animated gif into your browser to view the animation in your browser as compared to viewing it in GIF Construction Set.

Problem 3: We used the following sequence for our animation:

ANIMATION
ANIMATIO
ANIMATI
ANIMAT
ANIMA
ANIM
        .
        .
        .

instead of using the sequence beginning with the letter "A" as in:

A
AN
ANI
ANIM
ANIMA
ANIMAT
        .
        .
        .

Why did we use the sequence in the way we did?

| Click here to go to the answer section |

OUR SECOND ANIMATED GIF

1. Open Paint Shop Pro.
2. If not already in view, make sure that the Tools toolbar, the Tool Options palette, and the Materials palette are in view. To do this, choose View --> Toolbars --> Tools if you need to place the Tools toolbar into view, choose View --> Palettes --> Tool Options for the Tool Options palette, and choose View --> Palettes --> Materials for the Materials palette.
3. Choose File and then New to display the New Image dialog window (or click on the New image button in the standard toolbar).
4. Choose an image width of 50 pixels and a height of 50 pixels (bigger than required). Also make sure that the Background color is set to White and that the dimension units are in pixels. Click on OK.
5. In the Tools toolbar, click on the Selection tool (the rectangle) and the Tool Options palette changes to the Tool Options - Selection Palette. Click in the Selection type box and select Circle. The Mode can remain at Replace, the Feather can remain at 0 and the Anti-alias box should be selected (there should be a checkmark in the checkbox).
6. Move the cursor to the centre area of the image and drag out a small circle about the size of the one beside the heading of this section. It will appear as a rotating dashed circle.
7. We will now copy this image and paste it as a completed image. So choose Copy from the Edit menu.
8. Nothing appears to have changed. Now choose Paste As New Image. The new image has now been reduced to the size of the circle with a checker board background. It may not look like a circle but that is because of the checker board background. Just drag one of the corners of the image to make the border around the image a little bigger and the circle should appear a little clearer. You can now delete the first image we created (Image1*) by clicking in the Close box (the one with the X in it).
9. Now click on the Flood Fill tool, , in the Tools toolbar to select it. The Tool Options - Selection Palette has now been replaced with the Tool Options - Flood Fill Palette.
10. Make sure that the Match mode box reads RGB Value and the Blend mode box reads Normal. The RGB Value will ensure that only the circle gets colored and not the area of the image outside the circle. The Tolerance can remain at 20 and the Opacity at 100 (percent). Tolerance is how closely the selected pixels must match the initial pixel we click. The range is 0 to 200. At lower settings, only pixels of very similar colors are filled while at higher settings, more pixels are filled. Keeping the Opacity at 100 ensures that all pixels that are not transparent will be filled.
11. In the Materials Palette, click on the Foreground and Stroke Properties box. This will display the Material Properties dialog window. Choose the color red and click on OK.
12. The Flood Fill tool should still be selected. Now click with your left mouse button in the circle, and the circle (the ball) should now be colored red. Note that when the cursor moves over the circle, the cursor changes to the Flood Fill cursor. We have now completed our first ball in the animation and it looks like:

    

13. Now save this ball by choosing Save As from the File menu. This will display the Save As dialog window. Now:
    • Choose the folder that you want to save these images in.
    • Click into the Save as type box and choose GIF Graphics Interchange Format (*.gif).
    • Also type a name for the ball such as ball1 for ball #1. This will ensure that the image is saved as ball1.gif.
    • Now click on the Options button. Make sure that the radio button beside Version 89a is selected and also make sure that the radio button beside Noninterlaced is selected.
    • Click on OK.
14. Click on the Save button to save the image named ball1.gif.
15. Since gif images have a maximum of 256 colors, you are now told this fact and asked if you want to continue. Click on Yes and the image is saved.

We will now create the remaining balls, giving each one its own color. Here are the steps:

1. With the ball image still selected, choose Edit --> Copy and then choose Edit --> Paste As New Image. You now have two red balls.
2. Again in the Materials palette, click on the Foreground color box. Now choose another color such as Yellow and click on OK. The Foreground color box is now yellow.
3. The Flood Fill tool should still be selected so click on the pasted red ball with your left mouse button and it will become yellow.
4. Now save the yellow ball in the same way you saved the red ball but using a name such as ball2.gif.
5. Repeat steps 1, 2, 3, and 4 as many times as you like, each time choosing a different color and naming the images ball3.gif, ball4.gif, ball5.gif, etc. Be careful that you do not choose colors that are very close together in shades as some monitors may not be able to distinguish between them.
6. When finished, use GIF Construction Set to turn these images into animation using the same procedures as with our first animation. When finished, save the animated gif using a suitable name such as balls.gif or bullets.gif.

For the PJCVS MATH animated gif, the part was done in a publishing program using an option that gave this design. This image was then copied and pasted into Paint Shop Pro.

The Pi symbol, , was created in Paint Shop Pro (which can also be created in any Paint or Desktop program). It is nothing more than the lower case letter p for the Font named Symbol. For example, to get the Pi symbol in Paint Shop Pro, create a new image (choose File, New). Choose a size of around 75 pixels by 75 pixels if you want to duplicate what I have. Make sure the foreground color is blue or any suitable color, and then click on the Text tool. For the Font, choose Symbol and for the Font Size, choose 36. Move the cursor to the new image, click once and the Text Entry window opens up. Type the lowercase letter p which will produce the pi symbol I used (the uppercase letter P will give a slightly different shaped pi). Click on OK. Position the pi in the new image and you have the identical pi I used.

I used the rectangular selection tool a lot to cut the pi from the image, resizing the width of pi (Resize is located in the Image menu), and then pasting the pi back into the PJCVS image. Note that as the pi spins around, it reverses itself. The reverse of an image was created using the Mirror option found in the Image menu. Once I resized the pi, Mirror would give me the reverse pi. If you save the Math Department's animated gif on your hard drive, and then load it into GIF Construction Set, you can see each individual image that made up this animation.

Note: GIF Construction Set's Help support is excellent. With GIF Construction Set, you don't need a manual (and one does not come with the program). All you need to know is right there in the Help section. So the first thing you might want to do is to click on the Help button located below the Cancel button to receive complete explanations on all the options available to create LED signs. You may wish to print the Help page for a handy quick reference guide.

CREATING BANNERS

Try making an animated banner such as:

Or, try creating a nice banner or header for a web page that is not animated. Here is one I created for a client.

These banners were simply created using GIF Construction Set. Banners are GIF files which contain text. A banner can be a simple one image GIF file with words printed on it or it can be an animated GIF file with text scrolling from right to left. The Banner option, like the LED option, is located in the Edit menu. Thus to create a banner, open GIF Construction Set, choose Edit and then Banner. This will display the Banner dialog window giving you a number of options and text effects. The Help page is also very good and I would suggest you print out this page as a handy reference (the Help button is located at the bottom of the Banner dialog window beside the Test button).

CREATING SPECIAL-EFFECT IMAGES (TRANSITIONS)

A transition is a special effect that occurs when going from one image to the next image in an animation. The Transitions function in GIF Construction Set will create animated transitions between your images. There are about two dozen special effects to choose from in GIF Construction Set. Here are four of these special effects:

1. Dissolve: The images will fade in the transition from one image to the next.
2. Raster: The images will transition from one image to the next as a sequence of bars. You can choose either horizontal and vertical rasters.
3. Tile: This transition will make your images appear in small squares, in random order.
4. Wipe: Your images will transition from one image to the next by wiping. There are four wipe options, one from each direction.

Here are the steps to create a transition:

1. Select Edit and then Transition. This will display the Transition dialog window.
2. You now need to load your images into the Transitions window. To do this click on the Add button. This will display the Open dialog window for you to select your images.
3. You now select the images. You can do this one image at a time or hold down the Ctrl key to select multiple images. Click on Open. The images are now loaded and displayed in the Transitions window. Now have fun and experiment with the different special effects. There is also a very good transitions Help page that includes a description of all the various transitions. Just click on the Help button located below the Cancel button
4. You can test the various transitions in your animation with the Test button. When you are finished testing and have chosen a transition, click on OK. GIF Construction Set will then create the animation and return to the GIF Construction Set window.
5. You can then save the animated GIF file.

1. There are only 9 letters in the word ANIMATION but there are 10 distinct images, the tenth one being the blank or empty image.
   
   
2. 18 images, including the blank image, are displayed before looping takes place, that is, before the whole process repeats itself. Here are the 18 images which are numbered this time:

   1      ANIMATION
   2      ANIMATIO
   3      ANIMATI
   4      ANIMAT
   5      ANIMA
   6      ANIM
   7      ANI
   8      AN
   9      A
   10    a blank image
   11    A
   12    AN
   13    ANI
   14    ANIM
   15    ANIMA
   16    ANIMAT
   17    ANIMATI
   18    ANIMATIO
   
   

3. The complete word ANIMATION should appear first. This is for those browsers that do not support animation. In these browsers, only the first image in the animation will be displayed. Because these browsers can't show animation, it is important then, that they at least display the complete image - in our case, the complete word. Another reason for the given order is that when a web page containing an animated GIF is sent to the printer, often only the first image in the file gets printed. Since a printer cannot print out all the individual images that make up the GIF file, it will print the first image that the browser displays in the animation. This then is another reason for a good first image in a GIF file.

| Back to the top of the page |

| Return to Home Page | | Return to Alternate Home Page | | Send me to Lesson Sixteen |

The information contained in these free 21 lessons is Copyright ©, Brantford Educational Services, 1997 - 2009 by local and international copyright laws. All rights reserved. It is therefore illegal to copy these lessons into another website. If you find a copyright violation, please report it to htmltutorials@bfree.on.ca