Adding Graphics to Web Pages

Overview

The following page will step you through creating a simple, but elegant, title header in Photoshop. Use this page to learn the process. Don't worry if every detail is not "just perfect." There will be thousands of hours available to you during the golden years of retirement to fuss with graphic arts.


Step 1: Finding a Graphic

Use the links you have found for your Web-based activity to search out and download an image. Realize that because you can download any image from the Web doesn't mean that you should download any image. Copyright laws exist on the World Wide Web. Many companies and professionals would rather you didn't use their work - large and clear copyright warnings usually clue you in. Most educators, people who support education, and content providers like museums and zoos allow you to use their images for non-profit generating purposes (like teaching students) as long as you identify and link to them as the copyright holder.

This being said, choose an image from the links you've found for your Web activity. Look for an image that represents the content, is an image of, or a metaphor for, the topic you're creating a Web-activity around. Then follow the user-friendly steps below:

  1. For Macintosh, click the mouse down on the desired image and hold it until a pop-up menu appears. For Windows, click the mouse down with the right mouse button to see the menu.



  2. Select Save this Image As... from the pop-up menu.





  3. When prompted, save the file with an appropriate name and location (note: feel free to give the image a clearer name if you'd like).



If you're using NCSA Mosaic, EIT MacWeb or WinWeb, see Downloading Graphics (from the Maricopa Center for Learning and Instruction).


Step 2: Creating a Title Heading in 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 title 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. Now we'll add the graphic image you downloaded for this activity's main topic (see step 1 above). From the File menu, choose Open. Find the image you downloaded and open it. The image will appear in a separate window. surfer


  9. Use the select tool to surround as much of the image as you want to use. Then do an Edit - Copy. Click in the large window where you have your "Cool Banner" text. Edit - Paste the image you've copied.


  10. Move your mouse so that the cursor enters the image and becomes an arrow, then drag the image close to the title (leave enough room for more shadow effects). With the select tool, again, draw a slightly larger boarder around the image you've just pasted (don't go onto the text) .

  11. Go to the Filter menu and do another Gaussian Blur (you might want to do this a few times). Finally, do another Edit - Paste and you will see another copy of the image. Drag this so that it's slightly offset (like you did with the clear text on top of the blurred text). Stagger the shadow effect so that it's similar to the offset you used with the text.

  12. 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.

    Save as

  13. Our final file doesn't need the resolution a printed image requires, so we'll do some compression on it. Because we used a photograph and the fuzzy drop shadow, we'll do a JPEG compression. From the File menu select Save As.... The Save dialog box will appear. Your file name should have no spaces and end in a ".jpeg" extension.

  14. Look for the format pull-down and select JPEG. Then click Save.
    format

  15. Choose medium compression and then click Save.

    medium

  16. You now have a .jpeg 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. If it doesn't, you can always use the Image - Image Size... menu.


This tutorial is based on one originally created by Jodi Reed. For a more comprehensive overview to working with graphics, you can view the site where these tutorials originated:
Beyond the Son of Filamentality at:
http://www.kn.pacbell.com/wired/beyond

In particular, you might be interested in:

If you want help changing the background color go to:

The Color Composing Engine at:
http://www.sci.kun.nl/cgi-bin-thalia/color/compose

The HTML of changing background colors.