It isn't uncommon to minor in web design or even become self taught and learn skills like animation. Once you
master the ideas below, feel free to reward yourself- animate some online flowers and deliver them by email to yourself or a friend. Even
roses and daisies designed on the web are beautiful.
An animated gif is a multiple-image GIF file.
An animated gif is a series of GIF images placed one after the other
in an infinite loop giving the appearance of fluid motion. This is somewhat
similar to a flip book of pictures in which flipping the pages quickly
makes the little pictures appear to move. What you really have is a
bunch of still pictures
moving by quickly and your eyes see it as movement. You can set the
speed of movement of your animated gif image, however, the speed at which
the image actually moves can vary from browser to browser.
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.
To make your own animated gif, you need two things:
A paint program to make your series of images such as
Corel Paint Shop Pro Photo or Adobe Photoshop, and
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.
In this lesson we will use Corel Paint Shop Pro Photo X4
(version 14) to make these GIF images but any
paint program can be used to create them. We will then use GIF Construction Set Professional to put all the individual
images into animation and have them saved in one animated gif file. It states on the Alchemy Mindworks
website that GIF Construction Set Professional allows you to "Create web
page animations and transparent graphics with breathtaking ease. GIF
Construction Set Professional includes Animation Wizard, Supercompressor and all
the tools that have made GIF Construction Set the most popular GIF animator on
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 X4 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 X4
(version 14) which is the version used in these lessons. In these lessons, we will simply
refer to Corel Paint Shop Pro Photo X4 as Paint Shop Pro.
For our first example, we will construct the animation of the word
ANIMATION that you see at the beginning of this lesson. Note that this
animation begins with the word ANIMATION, and then one letter at a time
is removed. Once all the letters have
been removed, they begin to appear again, one letter at a time, until
the word ANIMATION is complete again. Each change represents a new image.
This sequence of images is then repeated over and over until you click on
the Stop button (clicking on the Stop
button will stop all the animations in most browsers). Here is the way the images appear
- one after the other in this order:
blank image goes here (no letters)
(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?
Here are the steps to create the above animation using Paint
Open Paint Shop Pro.
We will now create our first image. Choose File from the menu bar,
and then choose New. This will display the New Image dialog window.
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
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 78.740 pixels per cm which equals200 pixels per inch. If you click
into the Pixels/cm box and choose Pixels/inch you will see the 200.
In the Image Characteristics section, ensure that the
Color (meaning background color) box 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.
You are now in the
Image Editing window. 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.
You should now have a new image named Image1 as stated in
the image Title bar (Image1 @ 100% (Raster 1)). Just ignore the name
for now. The 100% Raster 1 means that we have a full background
color and not a partial or transparent background. A transparent background
would be 0% Raster 1. Note that there is nothing in the image except for a white background.
We will now discuss three items that are very important to the work we will
be doing. They are the Tools toolbar, the Tool Options
palette, and the Materials palette (called the
Color Palette in previous versions of Paint Shop Pro). 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 tool
examples of tool 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.
the Tools toolbar has been placed down the left side of the editing
window, the Tool Options
palette has been placed horizontally just below the Standard
toolbar, and the Materials palette appears to the right of the
Image editing window. So these important items as discussed above are now in
view. Note: if you click on any tool in the Toolbar, you will see the
Tool Options palette change accordingly. Again, the Tool Options palette
contains the options associated with the selected tool.
If you should lose one or more
of the Toolbar, the Tool Options palette and the Materials palette (no longer in
view), here is how to bring them back into view:
from the Menu bar and then choose Toolbars to view the Toolbars
drop down menu. That is, choose View --> Toolbars. Those tools
that are currently chosen are highlighted with a checkmark
beside them. Thus 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 you simply 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: You need to be in Editing mode in order to use these
Toolbar options (note the tab named Edit at the top of the screen is
highlighted meaning we are in image editing mode. You also need a picture or image to work on in order to
use these tools.
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.
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.
In the Help menu, in the Materials palette section, the following diagram is given with the
Rainbow tab in view. The positioning of some of these items may be
different in your Paint Shop Pro but they should all be there.
In the above Materials palette, 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. 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
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 Transparent button and it
specifies whether the foreground or background is to be transparent. Transparent means
that there is to be no style or texture.
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
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:
In the Tools toolbar, click on the Text tool (the one
with the letter T on it).
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 T 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
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 an earlier version, 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
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:
You are now ready to enter the text. In the new image box,
somewhere on the lower 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. Now type the word ANIMATION.
The word ANIMATION should now be
in the new image (or at least most of it should be visible).
I am not sure why
the next step works but it does. Move the mouse pointer over the ruler
located right above the the
word ANIMATION. You will see the cursor turn into a cross hair (a plus sign)
when you do this.
Now double-click on the ruler and an Apply Text window may pop up with the
statement, "You must either apply or cancel the text tool operation at this
time." Click on Apply and a Grid, Guide & Snap Properties
window opens up. We do not need to change anything so click on Cancel.
You will see that the word appears with dashed
letters and with the dashes moving.
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,
Click on the Edit menu and choose Copy.
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 first
clicking on the Image1 tab. You can then click 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.
Image2 is now the only image left.
We will now save this new smaller image. Choose File, then
Save As.... This will display the Save As dialog
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.gif (short for animation 1 -
our first image in the animation).
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
the same size
in the same format
at the same color level (256 colors)
Since we have one image completed, we will use it as the template
to create the rest of the images.
Let's now create the second image which is the word ANIMATION with the last
letter "N" removed (ANIMATIO).
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.
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 which is the
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.
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.
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.
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.
For the third image, cut the next letter (O) and save the resulting image
animat3.gif. If you continue this process, the last letter
left over (A) will be saved as
animat9.gif. Cut this last letter so that you have no
letters left, and save this blank image as animat10.gif.
You now have all the images saved and are finished with Paint Shop Pro.
CREATING THE ANIMATION USING GIF CONSTRUCTION SET
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.
Now that you have the various individual images created for the word
ANIMATION, we need to assemble them into one animated GIF file using Gif
Construction Set. To do this we first need to load all the images into
GIF Construction Set. Let's use the Animation
Wizard and let GIF Construction Set do it for you, here are
Click on File and then choose Animation
Wizard. Another way to activate the Animation Wizard is to
simply click on the magic wand button,
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.
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 on this web page, it could be running a little slower.
Next you are asked how you want to handle the color palette for your GIF
file. There are two choices and they are:
Match 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.
For our example, leave the Match 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:
Below the tool bar are three vertical panels or
frames. In the left frame, browse to the
folder where all the GIF files are saved.
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,
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
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
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.
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 may be told this fact along with some facts and
options on how to register. You can ignore this for now.
To view your animation, click on the
pair of glasses,
(the View animation button).
When finished viewing, click on the X to close the
View animation window. You can also load the animated gif into your browser to see the animation in
You can also load your images into GIF Construction Set
without the wizard. To do this:
Click on File and then choose New.
A window opens up with the word HEADER in it. We will study the Header later.
Now from the Edit menu, choose Insert
block and then choose Image since we are inserting an image.
That is, choose Edit -->
Insert block --> Image. This will display the Open dialog window.
Browse to your folder containing your images. Now 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. If you can't see the complete words,
you can drag a side to make the viewing area bigger.
Now again choose Edit --> Insert block --> Image.
This time click on animat10 and click on
Open. We now have the images from animat1 to
Now add the rest of the images, one at a time, beginning with
animat9 down to animat2.
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. Note in the Header Block, that the background color for
viewing your animation in GIF Construction Set is showing
red. If you would like to change it to white,
just click into the box beside the word Background to bring up the
color palette and then choose the color white. Click on OK. Note that
the background in all the images is now white. The background color of the
animation in GIF Construction Set will now be white which is better since the
letters in our animation are in red.
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. Double-click on the Header Block to see the
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 and
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. You may have seen these blocks when you
used the Wizard to create the animation. 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.
Now that all the images have been loaded we will do some editing of
the image blocks.
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 ImageBlocks should now be
highlighted, that is, they should now be selected. Only the Header Block
at the top and the Comment and Block Names blocks at the very bottom are not highlighted. Any change that we now
make will be applied to all the images in the GIF file.
From the Block menu, choose Manage.
This will display the Block Management dialog window.
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
Make sure that the delay is set to 10 meaning that 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.
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 Color
to place an checkmark in the box. Doing this will select
Click in the box beside the Eyedropper tool and a color palette
window opens up. Choose the color white which is the last little
white rectangle (= Dec. 255,255,255 and Hex #FFFFFF).
Click on OK and the number 131 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.
Now click on the radio button beside Enable controls for the selected
blocks and then click on Apply.
Click on OK to return to the GIF Construction Set
Unless you changed the background color for viewing the animation in the
Header Block from red to white, each image in the image file now appears on a red background. This red 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 there should be a checkmark in the checkbox beside the word Loop.
If not, click into the checkbox to place one there. We want to make sure that
Loop is selected. Leave the Iterations count
at 0. A count of zero means that the animation will
loop indefinitely. Note that the color in the box beside the
word Background is the background color that the animation in GIF
Construction Set will be viewed in. Again, you can click into the Background box
to change this color. That is all we need to change so
click on OK. You can now view the complete animation
by clicking on the Views the current animation button.
You can now save the animated gif by choosing
File --> Save or File --> 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:
For our second animation, we will make the bullet or ball that you see
on each side of this section's heading (there is only one ball
repeated twice). We will create the ball in Paint Shop Pro and then paint it in different
colors with each color making up one image.
Open Paint Shop Pro.
Choose File and then New to display the
New Image dialog window (or click on the New image
button in the standard toolbar). 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.
The Tools bar, the Tool Options palette and
the Materials Palette should now be in view. At any time you lose one of these
you can get it back with View --> Toolbars --> Tools if you
need to place the Tools toolbar into view, View --> Palettes --> Tool
Options for the Tool Options palette, and View --> Palettes -->
Materials for the Materials palette.
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).
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
We will now copy this image and paste it as a completed image. So choose Copy from
the Edit menu.
Nothing appears to have changed. Now from the Edit menu, 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. You can now delete
the first image we created
by clicking on its tab to bring it into view and then clicking on the Close box (the one with the X in it).
We are now back to our second image that was reduced to the size of the circle.
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
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.
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
The Flood Fill tool should still be selected. Now click in
the circle with
your left mouse button, and the circle (the ball) should
now be colored red. Note that when the cursor moves
in the editing window, the cursor changes
to the Flood Fill cursor. We have now completed our first ball in the
animation and it looks like:
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.
Click on the Save button to save the image named
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:
With the ball image still selected, choose Edit --> Copy
and then choose Edit --> Paste As New Image.
You now have two red balls.
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.
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.
Now save the yellow ball in the same way you saved the red ball but use a name
such as ball2.gif.
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.
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.
Now that you know the procedures involved, use your imagination to create
some great looking animated gifs.
For the PJCVS MATH animated gif, the part was done in a 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 a size such as 24. Move the cursor to the new image,
click into the image and 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. Double-click on the ruler for editing mode and
then choose Edit --> Copy followed by Edit --> Paste As New Image.
You now 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.
CREATING LED SIGNS, BANNERS, AND
SPECIAL-EFFECT IMAGES (TRANSITIONS) USING GIF CONSTRUCTION SET
CREATING LED SIGNS
This LED sign was created simply and easily using GIF Construction Set.
To create a LED sign, open GIF Construction Set, choose
Edit --> Signs -->LED Signs. The LED Sign
dialog window opens up giving you a number of
options. You can set the color, adjust the playback speed and change
the sign dimensions. Have fun and experiment.
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.
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 check it out 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:
Dissolve: The images will fade in the
transition from one image to the next.
Raster: The images will transition from one
image to the next as a sequence of bars. You can choose either
horizontal and vertical rasters.
Tile: This transition will make your images
appear in small squares, in random order.
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:
Select Edit and then Transition.
This will display the Transitions dialog window.
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.
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
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.
There are only 9 letters in the word ANIMATION but there are 10
distinct images, the tenth one being the blank or empty image.
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:
10 a blank image
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.