makebuttons.gif (3182 bytes)

Huh?:

       I can't even sew a button on, how can I make one?

       Open Photoshop.  We're going to create an image that looks like this one.  Yours will need to be a different color, with a different statement on it, of course.

        this_is_button.gif (3124 bytes)
Step One:

       Open the File menu, and choose New from the drop-down menu.   A dialog box will allow you to set height and width and resolution of the working image.  Set it for roughly 125 pixels wide and 30 pixels high.  Click OK.

Step Two:

       Once the new image has been created, it should look something like the one to the right.  The next step is to click on the color selector and choose the basic color for our button.   The color selector on the image to the right, is represent by a black square.   It may be a different color on your screen.  Just click on it once, and a dialog box will open.  Click on the colored surface until you find a color you like, then click OK.    Hint, don't choose colors that are very, very light or very, very dark.   You'll see why in a minute.

color_select.gif (5178 bytes)

Steps Three...or Four...or...:

       Now that your button's color has been established, you need to highlight that button to give it some shadowing and lighting effects.  Before you do that, you should save a backup copy of the file.  Choose File/Save As from your menu, and save your file under a name that will make sense to you (like "buttonmaster.psd").    Photoshop own file format is called .psd, and it's best to save Photoshop files in that format until you are ready to make the final save.  At that point you would convert the file to a .gif or a .jpg, and save it again.  Saving periodically will give you a backup copy of the file at various stages.  Nothing is worse than having to recreate an entire image file from the beginning.  If you save a file halfway through the process, you only have to recreate half of the file.  Save it three-quarters of the way through, and  ...well, you get the idea.

       Coloring and highlighting the button is very easy.   Now that you've chosen your button's color, click on the Paint Bucket tool (it looks like a bucket pouring paint).  Click on your button, and the color you've just selected will fill the whole button (because it's a solid color).  Use your rectangular marquee to make a selection just inside the borders of your button (leaving a couple of pixels ...a tiny bit... outside of the selection).  Click on the Select menu, and choose Inverse.  When you first selected the button, the area inside the marching ants was the selected portion.  By selecting the Inverse of that, you selected the outside.  Any painting or editing actions you take now will only affect the outside, not the inside.

       Click on the color selector again, and choose a slightly darker shade of the same color.  Select a brush (looks like an artist's paint brush) from the tool menu, and swipe your brush down the righ side of the button, and along the bottom side of the button.  Click on the color selector once more, and choose a slightly lighter shade this time.  Swipe along the top side and the left side of your button.  Voila, you've created highlights and shadows as if the light is coming from the upper left.

       When it's done, it should look [more or less] like this.  Save it once more, and you have a basic button that you can add text to, creating navigation buttons for your website.  Save each new button under a different name, of course. purple_button.gif (3017 bytes)
Next Step:

       You might want to add a little texture to our button, just to make it a little more interesting, also to cover up any mistakes you might have made in the hightlighting process.

       Open the Filter menu, slide down to Texture, and choose Grain from the drop-down menu, and play with some different possibilities.  Play with a few of the other filters, just to see what effects you can achieve.

 

grain_texture.gif (4830 bytes)
       When it finally looks the way you want, save it as a .psd file [a PhotoShop file] again, to have a backup.

       Then we can add lettering to the blank and save it under a different name.  We'll deal with the text tool in more detail on Thursday.  If you want to experiment with it in the meantime, it's the "T" on your toolbar.  Play with it.  If you saved a backup copy of your blank button, you can't break anything.

         new_button.jpg (3744 bytes)

       No matter what image editing program you use, it is possible to create useful images for your Web pages.  It takes a willingness to experiment.  Occasionally you may find yourself throwing hours worth of work away, because it wasn't right for your pages.  The process of struggling to find just the right technique always makes it easier the next time.

Click here to go Back to Editing Images.

This page was last edited on June 18, 2001.

URL = http://teachertech.rice.edu/Materials/GT2001/East/day02/makebuttons.html

 


These pages were developed through GirlTECH, a teacher-training program sponsored by the Center for Excellence in Education (CEEE) with support  from the National Science Foundation through EOT-PACI.
Copyright   Michael Sirois, GirlTECH, June 2001.

last edited, ms  6-18-2001, 22:01.