Getting Graphics for your Web page: Create a Heading with Photoshop

For most Web graphic designers, Photoshop is the software of choice. We could easily do an entire workshop on Photoshop, but instead we'll focus on a task most Web developers need to master: creating a text header in Photoshop.

Here are the steps for making a header. This assumes you have launched Photoshop and are ready to begin.

1. Select New from the File menu. You will get a dialog box, in which you should specify a width of 470 and a height of about 400. This will give you plenty of space to work.

   

   Click OK to open a new file window.

2. Select the Text tool from the tool palette.

   

3. Select a gray by clicking a color in the color palette.

   If you don't see the color palette window, select Show Colors from the Windows menu.
   
   
   
   

4. Click in the main window to get a text dialog box. Then choose a font and type the text for your header. Make sure the Anti-Aliased option is selected. Once you click OK, your text should appear on the screen. If the font or size isn't to your liking, use your delete key to delete the text and start over.

   

   

5. Choose the select tool and draw a box around the text you've created.
   (Click a corner, hold the mouse key, drag to the opposite corner, and release the mouse.)

   

6. Select Gaussian Blur from the Filter menu. Repeat once or twice to blur your text shadow.
   
   
   
7. Repeat steps 2-4, this time selecting a bright color. Immediately after clicking OK in the text dialog box, click and hold your new text and drag it over your shadow. Use your arrow keys to move the bright text up and over a few pixels, creating a 3-D look. Command-Z will always undo your most recent process.

8. Take a look at the file size shown at the bottom left corner of your main window. It needs to be as small as possible for your Web page to load quickly (< 50K is best). Let's crop the image to make the file size as small as possible.
   Choose the select tool and drag a small-as-possible square around your text. Then pull down to Crop in the Edit menu.
   Note the reduced file size.

9. Our final file doesn't need the millions of colors in RGB mode, so now we'll drop down to a lower color depth. Select Indexed Color from the Mode menu. The dialog box will automatically show the most appropriate color depth. After clicking OK, note the reduced file size.

   

10. Now it's time to save your file. Select Save from the File menu. Select the CompuServe Gif file format and type in a file name. Your file name should have no spaces and end in a ".gif" extension.

    

11. You now have a gif file ready to use for your Web page. Before you quit Photoshop, you should note the height and width of the image (in pixels). While holding the option key, click on the file size box in the lower left corner of the main menu. The image size should pop up in a small box.

Last revised May 6, 1996 By the SDSU/Pacific Bell Fellows Applications Design Team/Wired Learning http://www.kn.pacbell.com/wired/filamentality/get_graphics/photoshop.html Copyright © 1996 Pacific Bell -- All Rights Reserved