Programs
	Basic Steps
	Adding Plain Text to a Button
	Adding Glowing Text to a Button
	A Note About Background Images
	Using Graphic Bullets with Tables

Programs

	Adobe Photoshop 3.05
	Kai's Power Tools 2.0 and 3.0 by MetaTools
	KPT Convolver by MetaTools
	Eye Candy by Alien Skin Software
	LView Pro

Return to Top

Basic Steps

Before I began a new set, I figure out how big I wanted each element to be. 

1. I saved the selection path for each different element (the edge, bullet, buttons, bar, . . .) into a PSD (Photoshop) file.
2. This helps me make everything consistent between each of the different families. I don't have to figure out the sizes every time, because I just make a copy of the 'master' PSD file.
3. I load the selection for the element I'm working on. For example, the edge piece that is at the left side of the page.
4. I start the KPT Texture Explorer that is part of Kai's Power Tools 2.0 and pick a repeating texture that I like, or I scan in a photo that I want to use as a set.
5. Using the KPT texture, or a portion of a photo, I fill the selected area.
6. Then I use Eye Candy to add a bevel to the selection.
7. Then I use Eye Candy to add a drop shadow to the selection.
8. Sometime I also use the Glow filter (also in Eye Candy) to add a glow to the button text.
9. Lastly, I copy the new graphic and save it in a new directory. Each familiy of graphics has it's own directory because the elements have the same file names. What I mean by this is that each family has elements with the following file names: 
• edge.gif
• bar.gif
• bullet.gif
• blank.gif
• home.gif
• back.gif
• email.gif
• links.gif
• forward.gif
• backward.gif
10. By giving them the same file names and putting them in different directories, I make it easier to re-use the HTML file for each set. All I have to do is copy the HTML file for one set to a new directory. The I change the Title and the Heading 1, and that's it. It looks for the same file names, just in the new (current) directory. 

Adding Plain Text to a Button

1. Open the blank button in PSP.
2. Choose Color=>Increase Color Depth=>16.7 Million Colors.
3. Click on the text tool and click on the button to bring up the Add Text dialog box.
4. Choose your font type and size.
5. Type the word you want to appear on the button and click on OK.
6. While the text is still selected, you can click on it and move it into the correct position on the button.
7. Choose Selections=>None to drop the text on the button.
8. Choose Color=>Decrease Color Depth=>256 Colors.
9. Select the Optimized palette and click on OK.
10. Choose File=>Save As and save the button with it's new name.

Creating a Glow Around Your Text

1. Open the blank button in PSP.
2. Choose Color=>Increase Color Depth=>16.7 Million Colors.
3. Click on the foreground color box and select the color you want for the glow.
4. Click on the text tool and click on the button to bring up the Add Text dialog box.
5. Choose your font type and size.
6. Type the word you want to appear on the button and click on OK.
7. While the text is still selected, you can click on it and move it into the correct position on the button.
8. Choose Selections=>Modify=>Feather and set the feather to 4.
9. Click on the fill tool (the bucket) and click on the text a few times. (You might have to play around before you get a glow you like.)
10. Choose Selections=>None to drop the text on the button.
11. Click on the foreground color box and select the color you want for the text.
12. Click on the text tool and click on the button to bring up the Add Text dialog box. All of your previous settings are still selected. Don't change anything.
13. Click on OK to add the text to the button. Position the text over the glow your just added.
14. Choose Selections=>None to drop the text on the button.
15. Choose Color=>Decrease Color Depth=>256 Colors.
16. Select the Optimized palette and click on OK.
17. Choose File=>Save As and save the button with it's new name.

A Note About Background Graphics

The only other type of background images I'll create are two- or three-color repeating lines, like the pink and black background on my old home page. It gives the illusion of splitting the screen and, using tables, I can position "columns" of text over each block of color for a nice visual separation. 

I have always found pages with full, repeating, patterned textures difficult to read, so I won't be including any in my graphics collection. There are plenty of other places on the Web where you can find these images, although I highly suggest that you don't use them. I don't want to lecture about design, because I'm still an amateur and I make mistakes; however, pages need to be readable above all else. All the cool design effects in the world won't do any good if people can't easily read what you have written. 

All of these are, of course, my own opinions. Everyone is entitled to their own. Make your pages look the way you want. They are, after all, your pages, and YOU should be happy with them. 

Jelane (Jelly) Johnson 

Return to Top

Using Graphic Bullets with Tables

<HTML>
<HEAD><TITLE>Sample Page</TITLE></HEAD>
<BODY>

<TABLE BORDER=0>
<TR>
<TD><IMG SRC="bullet.gif"></TD>
<TD>Sample text. This text will line up next to the bullet</TD>
</TR>

<TR>
<TD><IMG SRC="bullet.gif"></TD>
<TD>Sample text. This text will line up next to the bullet</TD>
</TR>

<TR>
<TD><IMG SRC="bullet.gif"></TD>
<TD>Sample text. This text will line up next to the bullet</TD>
</TR>
</TABLE>

</BODY>
</HTML> 

Return to Top