Tip #3710 - Web Site Week - Day 4
Printer Friendly Version | E-Mail This Tip
Web
Site Week - Day 4
Here we go with day
number four!
You've seen those
animated banners floating around the Internet, haven't you? You know,
the ones that flash multiple images and tell you to click them. It seems
that practically every Web site you look at has them. Here's an example
of one:
So, how would you
like to make one for your Web site? They're just an easy way to drive
a lot of traffic to your site and you gotta love that! You can post them
to your site, your e-mails, your forum signatures and so on. So, let's
begin and find out how you can do this for yourself!
To start off, you’ll
need an image editing program. If you already have a favorite, you can
certainly use that. For my example, I will be creating an animated WorldStart
banner using Microsoft Paint, which is a program included in all Windows
PCs. The image file format used for creating an animated image is called
GIF, so that's what type of file we'll be creating today.
To begin:
1.) Plan out your
banner. Be sure to think about how many frames there will be, what they
will display, what size the entire banner will be, what color it will
be, etc. Here is my blueprint for the WorldStart banner:
a.) Size: Medium
(approx. 6 cm x 2 cm)
b.) Color : Navy Blue Background
c.) Frames of the Animation:
1.) (Computer
Image) Free Computer Tips
2.) (Sheet of Paper) Newsletter
3.) (CD image) Software Store
4.) (WorldStart Logo) All at WorldStart
5.) (Cursor Image) Click Here!
You can be creative
and design whatever you want. Now, we need to create those images and
then we will group them all together.
2.) Open up Microsoft
Paint by going to Start, All Programs,
Accessories, Paint.
3.) Resize the canvas
by dragging the holder. Or, if you want to get specific, go up to Image,
click Attributes and then enter in the width
and the height.
4.) I used the Fill
tool and made the canvas navy blue and then inserted my text with the
Text tool. I got the computer icon from a clipart Web
site I know of called Clipart Heaven.
5.) Now, when you
go to save the image, save it in a new folder and name the folder "Banner."
With a file name of "1," because it is the
first frame. Finally, make sure to select GIF from the
file type pull down menu. It is extremely important that you do that!
6.) Create the rest of your frames in the same way you just did. Make
sure all of the images have the same canvas size and are in the GIF format
in your Banner folder. Also, be sure they are numbered in chronological
order.
7.) Here's what all
of my images looked like when I was done:
Now, you will need
to use a program called Microsoft GIF Animator, which can be downloaded
here.
Just download it, install it and open it up when you have finished. Your
screen will look like this:
1.) Now, click the Open button ( 
) on the toolbar.
2.) Next, select your
last frame and select Open again.
3.) Click the
Insert button ( 
) and select your second to last frame and click Open
once more.
4.) Repeat step number
three until all of your frames have been added.
5.) Now, select the Animation tab and then check the
Looping checkbox. This means the animation will repeat
itself once it is done. It is highly recommended that you select the Looping
to Repeat Forever option, meaning the animation will go on forever.
6.) You have
to set the time between frames. So, choose the Select All button
( 
) and click the Image tab. Then use the up and down arrows
to set the time. I think 130 is perfect, so if you aren't sure what to
do, try that. You can always change it later.
7.) To save the animation,
click the Save As button (three floppy diskettes) and
save the file as "Banner" in your Banner folder.
It is extremely important that you name it "Banner."
1.) Now, to put it on your Google Web page, go to your site manager and
on the right side, select Upload.
2.) Click the Browse button and then find your animation
called "Banner" and select Open. It will appear
in the list.
3.) Next, copy this code to your clipboard and go to your Google Page
Creator:
<A HREF="http://www.websitetolinkto.com">
<IMG SRC="http://www.http://yourusernamehere.googlepages.com/banner.gif
"> </a>
Then go to the page
where you want the animation placed.
1.) Paste the code
in, edit where it says "yourusernamehere" to
type in your Google username and the "websitetolinkto"
to the Web site you want the banner to go to.
2.) Click Save
Changes and the animation should appear. You can drag the banner
around and resize it until it's just right for you! Now, just publish
the page and it will be on the Web for all to see. You can see how the
WorldStart banner looks on my page here.
Now, you can share
your banner in your e-mail and forum signatures as well. All you need
to do is copy and paste the edited HTML code with your username and Web
site link in it. Or, you can just copy the animation and paste it in if
your e-mail program supports that. You can also insert the HTML code into
your MySpace profile or anywhere else that supports HTML coding.
Have fun with your
brand new banner!
~ Neil Patel
Want To Comment On This Tip? Click Here! We'd love to hear from you :-)
Like These Tips? Get 'Em Free In Your E-mail
