 |
  |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
|
|
 |
Buttons Quick & Cool
Simple can be simply great!
Buttons for navigation can be just text, a graphic with text or an icon alone, like an arrow for going forward.
Look like a pro by using simple rollovers to tell the visitor what is an active button.
Help the visitor be sure what page they are on by changing the button of the current page while all the other buttons stay in a normal state.
This means you'll need up to three versions of every button. This site has 36 separate graphics for the button rollovers and current states.
Weird halos and other problems!
One of the problems that can crop up with web graphics is the effect of anti-aliasing on GIFs. Because they can be partially transparent, you can have buttons in interesting shapes floating over the background. But it can get tricky...
Anti-aliasing uses subtle gradations of color to avoid jagged stair-stepping between colors.
The GIF format allows you to assign only one color as transparent. Because this image has anti-aliasing, there are several other colors around the edges that create a noticeable halo of blue around the image.
The lizard can look pretty jagged if he is saved just as a single color, without anti-aliasing.
An easy way to get around the anti-aliasing problem is to always use square graphics! But that's no fun.
How to make clip art work for you!
There's lots of clip art out there, free and otherwise, but you have to use your creativity to make it work for you. Here's an example where I picked a single rose graphic and changed it's color to great some nice buttons. Maybe for a florist?
Measure twice, cut once!
Sometimes no clip art seems to work and you can have the fun of making buttons from scratch! Here's an easy set!
Draw an oval shape and use a foreground to background gradient fill at a 45-degree angle from the upper left to the lower right. Here I've used a really pale blue to a medium turquoise.
Draw another, smaller, oval on top of the first one and do the same gradient fill as before but from the lower right to the upper left. Suddenly it looks 3D!
The last step is to type in some text and run a layer effects filter (this one is in Photoshop). I used the "pillow emboss" effect. Neat and really quick!
Remember that buttons can be anything. But plan ahead for problems with anti-aliasing! You'll be glad you did.
Website design, graphics and content by Julie Ann James
Copyright® Julie Ann James Design, 1999
Buttons Quick & Cool
Simple can be simply great!
Buttons for navigation can be just text, a graphic with text or an icon alone, like an arrow for going forward.
Look like a pro by using simple rollovers to tell the visitor what is an active button.
Help the visitor be sure what page they are on by changing the button of the current page while all the other buttons stay in a normal state.
This means you'll need up to three versions of every button. This site has 36 separate graphics for the button rollovers and current states.
Weird halos and other problems!
One of the problems that can crop up with web graphics is the effect of anti-aliasing on GIFs. Because they can be partially transparent, you can have buttons in interesting shapes floating over the background. But it can get tricky...
Anti-aliasing uses subtle gradations of color to avoid jagged stair-stepping between colors.
The GIF format allows you to assign only one color as transparent. Because this image has anti-aliasing, there are several other colors around the edges that create a noticeable halo of blue around the image.
The lizard can look pretty jagged if he is saved just as a single color, without anti-aliasing.
An easy way to get around the anti-aliasing problem is to always use square graphics! But that's no fun.
How to make clip art work for you!
There's lots of clip art out there, free and otherwise, but you have to use your creativity to make it work for you. Here's an example where I picked a single rose graphic and changed it's color to great some nice buttons. Maybe for a florist?
Measure twice, cut once!
Sometimes no clip art seems to work and you can have the fun of making buttons from scratch! Here's an easy set!
Draw an oval shape and use a foreground to background gradient fill at a 45-degree angle from the upper left to the lower right. Here I've used a really pale blue to a medium turquoise.
Draw another, smaller, oval on top of the first one and do the same gradient fill as before but from the lower right to the upper left. Suddenly it looks 3D!
The last step is to type in some text and run a layer effects filter (this one is in Photoshop). I used the "pillow emboss" effect. Neat and really quick!
Remember that buttons can be anything. But plan ahead for problems with anti-aliasing! You'll be glad you did.
Copyright® Julie Ann James Design, 1999