Home Navigation Bars Buttons Backgrounds Cool Tricks E-Mail


One other thing I want to show you about buttons has to do with adding text. NetStudio gives you a lot of fonts, allowing you to find something that gives you exactly the look you want. See page three of the Navigation Bars tutorial for more instructions on adding text to an object like a button. You can apply the same changes to text that you can to objects. In other words, you can make the text fade from one color to another like this:

You can engrave or emboss the text, and you can even fill the text with an image, like this:

Just select the text and apply the appropriate fill, just like I showed you with shapes. Of course, with the text on buttons, you usually don't have a lot of room for filling it with an image, since the text is usually fairly small to begin with, so you may have to do some experimenting to get the look you want.

One problem you may run into when placing your buttons on a web page with any other background color besides white, is that there will be a halo of white around your object, such as what you see below.

     

In NetStudio, there's a feature that is supposed to allow you to designate one color as transparent, so that you can specify white, for example, to be transparent, allowing the background to show through wherever you see white in the image. Unfortunately, that particular icon is usually grayed-out in my NetStudio toolbar, even when I have the image selected. But sometimes it's not. It's one thing about the program that I haven't figured out yet- why it would be grayed out some times and not others. At any rate, I'm also using Microsoft's FrontPage 2000 to create these pages, and that program allows you to choose a color within an image and designate that color as transparent. If the image is in any other form besides GIF, however, it will need to be converted to a GIF in order for it to work. That's just the way it is. Unfortunately, photographs such as the one showing the lake and mountains in the button above, look best in JPEG form. I won't go into the differences, as that's beyond the scope of this site, but lets take a look at what happens when we take each of the above images and designate white to be the transparent color.

           

Hmmm.... doesn't look so hot, does it? Part of the problem is that when we designate white to be transparent, then everything in the image that is white becomes transparent. Thus, we have red specks of snow in the mountains up there. The image in the middle doesn't look too bad, but there are still some specks of white that can be seen. I used FrontPage for the transparency, but it doesn't make much difference how I did it. It's still far from perfect at eliminating all of the white areas that I didn't want to see.

Now, down below, I've used the blue button, applied some text to it, then pasted it on to a more neutral colored background like you might use for a web page. By making white transparent, and not having any white in my image, I get something that looks acceptable, at least on my monitor. You have to get your nose up pretty close to see the imperfections.

You'll just have to play around to see what works. If all else fails, you can always use a white background like I've done for this site. Nothing wrong with that, since all of the major web sites like CNN, CNET, ESPN, etc. all use white as the main background color. 

Well, that concludes the button tutorial, folks.

                           

Home  Navigation Bars  Buttons  Backgrounds  Cool Tricks

Hosted by www.Geocities.ws

1