Button FAQ

v 1.00b (html)
By
Super (green8@ix.netcom.com)
and
TheGiMP (thegimp@hyperdeath.com)
and
Scarecrow (quake@mail.cde.com)

Last Up-Date: Oct 8 97

[1] Introduction
[1.1] Welcome
[1.2] Why this FAQ?
[1.3] Where to get this FAQ

[2] Button Info
[2.1] Button Basics
[2.2] Animated Buttons
[2.3] Button Size
[2.4] Button File Size

[3] Button Making
[3.1] Paint Programs
[3.2] Animators
[3.3] Some Button Making Tips

[1]Introduction

[1.1] Welcome

Welcome to the Button FAQ. I hope you'll find it to be helpful, fun and informative. Also if you see that we did not cover a subject feel free to e-mail TheGiMP or myself with your suggestion.
- Super

[1.2] Why This FAQ?

The main reason we made this FAQ is because TheGiMP and I always get ICQ messages and/or e-mails asking how we did something or what programs we use. Now you have a FAQ.

[1.3] Where to get this FAQ

There should be a few places you are able to get this FAQ. The main site that you will always be able to get it is at ScareCrow's Quake Buttons Page.

http://www.brutality.com/qbuttons/
Also Try
http://www.quake2.com/buttons and http://www.hyperdeath.com

[2]Button Info

[2.1] Button Basics

A button is a little advertisement for a web site or a program. If it looks good and seems interesting, more people are likely to click on in and visit you web page. Also, it's more attractive for other sites to link to yours if they have a small graphic to go with the link.

[2.2] Animated Buttons

Sometimes a little button is not enough. Say you wanted some kind of animation in you button. For example, you would like the word "QUAKE" to appear on the button one letter at a time from left to right. Then, you're going to need a GIF89a (to learn more about GIF89a's I suggest this site: http://member.aol.com/royalef/gifanim.htm. Basically a gif89 is a single image file with many images inside of it, and when viewed by a browser such as Netscape or Internet Explorer it appears to be animated. This is a very cool trick, but there is a bad side. To make an animated gif you need to make many frames for it. It works on the same principle as a animated cartoon on television. You create a frame that contains your subject matter and alter them in some manner to depict motion, growth, fading, etc. in increments in the succeeding frames. When these images are run in succession of one another at a high speed, your subject appears to have movement or becomes animated. So, that basic little button that said "QUAKE" across it has essentially become 10 pictures. Each picture (or frame) for each stage of the animation will be compiled into one parent file which gross size will approximately be the summation of the size of each individual frame. However, various tools and compression agents may be used to "shrink" the file size to a more appealing number. Thus, saving your audience precious download time. This does make it hard and boring to make GIF89's, but some find that the result is well worth the extra effort.

[2.3] Button Size

The "standard" for button dimensions are 31 pixels in height and 88 pixels in width. Or 31x88 if that makes things more clear. You may ask, "Why such an odd size?" but truthfully, I have no clue. This is just the understood rule-of-thumb for button dimensions. This size is pretty much the accepted standard for "button specs" that you will find anywhere on the Web.

[2.4] Button File Size

Many things have to be taken into consideration when you begin to develop or maintain a web site. You may want to design a web page that has a good share of "eye-catching" graphics, but you have to keep in mind that larger graphic files will "bog" down users will little bandwidth, 28.8 dial-up account users which probably constitute the majority of the traffic to your web page. Therefore, like all graphics, it would be a good idea to put a limit on the file size of your button. If you want to create an animated button comprised of many frames, you’ll find that the file size will add up quickly. Here are some file sizes that I have collected from my buttons:

10 Frames About 5-8 Kbytes (KB)
20 Frames About 15 Kbytes
30 Frames About 25 Kbytes
40 Frames About 30 Kbytes
50 Frames About 35-40 Kbytes

(THESE NUMBERS ARE FOR GENERAL REFERENCE. ACTUAL FILE SIZES MAY VARY GREATLY.)

It's a REAL good idea to keep your animated button under 50 frames; otherwise, it's a pain to download it over a 28.8 modem. But, to have a cool looking animated button with detailed animation, you're more than likely going need more the just 10 frames. So it's a trade off. The largest button I’ve made was around 50 KB, but it was awesome ;-).

[3] Button Making

[3.1] Paint Programs

The programs that I personally use are Adobe PhotoShop 4.0 and sometimes 3D Max when I need 3D graphics. TheGiMP uses Corel 7 PhotoPaint to create his graphics, and he also uses an old 3D animator called Motion 3D that came bundled with the Corel 6 graphics suite when he wants to create 3D ray-traced animations. So as you can see, it really doesn’t matter which graphic program you use to create your button. There is a good shareware graphics program called Paint Shop Pro which can be downloaded at: http://www.jasc.com/psp.html

[3.2] Animators

There are many good programs to create and compile Gif89's (animated GIF's). The one I use is called WebImage and can be downloaded at: http://www.group42.com. TheGiMP highly recommends the GIF Animator created by Ulead Systems. Ulead’s GIF Animator is shareware and can be downloaded from their web site: http://www.ulead.com. Also, a good list of gif animators can be found at: http://www.agag.com/makeown.html.

[3.3] Some Button Making Tips

1. Try your best to make the animation as smooth as possible but use your best judgement to remove the unnecessary frames.
2. When you attempt to create a "text effect" like text appearing from left to right, sometimes it's easier to make the final image first and then systematically remove the unused parts. In other words, work backwards and compile the frames in reverse from the order that you created them.
3. Check out http://www.gifwizard.com. Memorize this URL. You can use this on-line utility to reduce the file size of your animated buttons as well as still images.
4. Try and plan out your button before you even sit down in front of your computer. When you begin the animation process, you may find that leaving your subjects as free floating objects rather than combining them with their background makes incremental movements for animation purposes a lot easier. After you move your object, duplicate the entire image and save the duplicate as the frame. This way the original "workbench" is still intact, and you can proceed to create the next frame.
5. Some gif animators can import AVI and MOV files. Plus, 3D animations can be rendered in 3D graphics programs and exported out to these file formats. These movie files can be imported into gif animators to be compiled into smaller, more efficient gifs that can be used on your web site with out having to use special plug-ins or players to view them.
6. Netscape browsers and Internet Explorer 3 "handle" animated gifs differently from one another. This means that your button may not look exactly the same in Netscape as it does in Internet Explorer. Be sure to check your final image in both browsers for consistency. You may find this to be a necessity since there is no way to anticipate the preferred browser of your potential audience. Your safest bet is to ensure that your graphics (as well as your entire site for that matter) will be fully compatible with either browser.

End of FAQ