- Worldstart's Tech Tips And Computer Help - http://www.worldstart.com -

Web Site Week – Day 4

Posted By On April 27, 2007 @ 2:36 PM In Web Design | No Comments

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 [1].

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

Article printed from Worldstart's Tech Tips And Computer Help: http://www.worldstart.com

URL to article: http://www.worldstart.com/web-site-week-day-4/

URLs in this post:

[1] here: http://neilp232.googlepages.com/