I keep getting questions about how I make my graphics, so I'm posting the (de)structions for all to see. If you have any additional questions, as always, feel free to e-mail me. I have no secrets because I believe anyone could do the same things I do with the same tools. I'm not a graphic artist and I can't even draw; but, with the programs below, I can express my creativity. 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 I'm running Windows95 on a Pentium 100 with 24 Megs of memory. I use the following list of programs to create my graphics. Where possible I have included a link to the home page of the software manufacturer: 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 I spend most of my time in Photoshop, and I just started learning Fracal Design Painter. I have also begun working more with photos (using them as a basis for new sets.) Painter is awesome, as I learn more I'll be able to create some really cool looking sets. (I bought a couple of books on Painter, but then I left them in Toronto last week and I'm waiting for the hotel to ship them to me.) Before I began a new set, I figure out how big I wanted each element to be. I saved the selection path for each different element (the edge, bullet, buttons, bar, . . .) into a PSD (Photoshop) file. 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. 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. 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. Using the KPT texture, or a portion of a photo, I fill the selected area. Then I use Eye Candy to add a bevel to the selection. Then I use Eye Candy to add a drop shadow to the selection. Sometime I also use the Glow filter (also in Eye Candy) to add a glow to the button text. 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 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. Return to Top Adding Plain Text to a Button Follow these steps to add plain text to a blank button using version 4.12 of Paint Shop Pro. If you want to add text with a glow, go to the next set of steps: Open the blank button in PSP. Choose Color=>Increase Color Depth=>16.7 Million Colors. Click on the text tool and click on the button to bring up the Add Text dialog box. Choose your font type and size. Type the word you want to appear on the button and click on OK. While the text is still selected, you can click on it and move it into the correct position on the button. Choose Selections=>None to drop the text on the button. Choose Color=>Decrease Color Depth=>256 Colors. Select the Optimized palette and click on OK. Choose File=>Save As and save the button with it's new name. Return to Top Creating a Glow Around Your Text While I use PhotoShop and Eye Candy to create the glow around text on my buttons, you can approximate the same effect in version 4.12 of Paint Shop Pro. Open the blank button in PSP. Choose Color=>Increase Color Depth=>16.7 Million Colors. Click on the foreground color box and select the color you want for the glow. Click on the text tool and click on the button to bring up the Add Text dialog box. Choose your font type and size. Type the word you want to appear on the button and click on OK. While the text is still selected, you can click on it and move it into the correct position on the button. Choose Selections=>Modify=>Feather and set the feather to 4. 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.) Choose Selections=>None to drop the text on the button. Click on the foreground color box and select the color you want for the text. 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. Click on OK to add the text to the button. Position the text over the glow your just added. Choose Selections=>None to drop the text on the button. Choose Color=>Decrease Color Depth=>256 Colors. Select the Optimized palette and click on OK. Choose File=>Save As and save the button with it's new name. Return to Top A Note About Background Graphics I have background graphics, one in each families collection. The background graphics are the "edge" pieces that go along the left side of the screen. Those images are 1280 pixels long and 128 pixels tall with a repeating pattern. Because they are soooo long, they can only repeat down the page, not across it. This gives the illusion of a solid bar down the left edge of the screen. I create these types of background graphics because they do not obscure the text on the page. 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 I've been getting a lot of questions on how to use graphic bullets and still make the bulleted text indent (line up) properly. I use graphic bullets with tables to make everything indent correctly. The sample table below has three rows with two columns each. The first column contains the bullet. The second column contains the sample text: <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 Created and Maintained by: Jelane Johnson All Graphics Copyright Jelane K. Johnson, 1996 Jelane's Free Web Graphics ||| Jelane's Resume ||| Dan's Resume This page has been accessed times since May 13, 1996.