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.
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