NHS Designs


Web Design

HTML 19: Saving Images for the Web

A logo would be a great finishing touch

Great idea. In fact, we've got a myPod logo all ready to go.

Take a look inside your "myPod" folder and you'll find a folder called "logo". In that folder you'll find a file called "myPod.psd". The ".psd" means that the file has been saved in the Photoshop format, a common format for digital images. But Photoshop format files are meant for processing digital images, not for Web pages, so we'll have to do some work to get a "Web ready" image from it.


Exercise 1: Open the myPod Logo

  1. Start Photoshop.
  2. Go to the File menu and choose Browse.
  3. Navigate to "mypod.psd". Start with My Documents and go down into your Home folder. Keep going down until you get to:
    mypod \ logo \ mypod.psd
  4. Double-click on "mypod.psd" to open it in Photoshop

Now for a closer look...

myPod logo in Photoshop

Nice logo; it's got some typography combined with two circles, one gray and one white (obviously inspired by the click-wheel controls on the iPod).

but what is that checkered pattern in the background? That's the way most photo editing applications show you areas that are transparent. Keep that in mind as we choose a graphic format for the logo.


What Format Should We Use?

You already know that we have a couple of options in deciding how to save this image: we could use JPEG or GIF.

This logo uses only three colors, text, and some geometric shapes. From what you've learned about these two image formats, which one seems most appropriate?

Once we begin to save with file for the Web, we'll have a few other options too.


Exercise 2: Save for Web & Devices

  1. Go to the File menu and choose Save for Web & Devices.
  2. At the very top-left, notice there are four tabs:
    • Original
    • Optimized
    • 2 Up
    • 4 Up
  3. Click on 2 Up. On the top is your original image. On the bottom is the "optimized" file as it will appear when you save it.
  4. Preset: Set this to GIF 128 Dithered.
  5. Notice there is a Transparency checkbox which is checked by default. Uncheck it. What happens to the optimized file on the bottom?
  6. Check the Transparency checkbox again to turn it back on.
  7. Also notice the Matte option. This is related to transparency, as you will see shortly.


To Be Transparent, or Not to Be Transparent? That Is the Question...

The myPod logo is going to be placed on a light green background, so you might think that transparency is going to be a good thing, right? Well, let's compare how the logo looks using a few options in the "Save for Web & Devices" dialog:

myPod logo with three transparency options
Click on the image above for a larger version.


Save the Transparent GIF

You know you want a transparent GIF version of the logo, and you know we'll need to use a matte to prevent the halos around the text. Let's check out the GIF panel of the "Save for Web & Devices" dialog.

the GIF panel of the Save for Web & Devices dialog

The Matte option allows you to select the color for the matte around the text. And we want that to be to color of the Web page background.

myPod logo with three transparency options
Click on the image above for a larger version.


Wait, What Is the Color of the Web Page Background?

Remember that Ready-Bake CSS in the myPod "index.html" file? That CSS is what sets the background color of the page to light green. And that's where we can get the color:

      <style type="text/css">
         body { background-color: #eaf3da; }


Exercise 3: Set the Matte Color

  1. In the Save for Web & Devices dialog, click on the Matte pulldown menu and choose Other...
  2. Photoshop brings up the Color Picker dialog.

Color Picker dialog
Click on the image above for a larger version.

  1. Go ahead and enter the color eaf3da into the bottom text box, next to the # symbol. You will see the color change to the background color of the myPod page.
  2. Click OK to close the Color Picker dialog.


Check Out the Logo with a Matte

Now take a close look at the logo again in the preview pane. You can click on the Zoom Tool (the one that looks like a magnifying glass) and then on the bottom image to zoom in a bunch of times.

You'll see Photoshop has added a light green matte around the hard edges, which will give the myPod logo text a softer, more polished look when the logo is in the Web page.

zooming in to see the new matte color
Click on the image above for a larger version.


Exercise 4: Save the logo

Okay, you've made all the adjustments you need to in the save for Web and devices dialog.

  1. Click OK.
  2. Save the image as "mypod.gif" in the "logo" folder.


Exercise 5: Add the Logo to the myPod Web Page

We'll add the logo to the top of the myPod Web page so it appears above the Web site description and iPod images. That way, it's the first thing your visitors see when they come to your myPod page.

  1. Add the logo image at the top of the myPod page.
  2. Remember to use the correct relative path for the logo, in the "logo" folder, and add an alt attribute that describes the image.

      <style type="text/css">
         body { background-color: #eaf3da; }
        <img src="logo/mypod.gif" alt="MyPod logo">
      <h1>Welcome to myPod</h1>


And Now for the Final Test Drive

Let's test this puppy!

Load "index.html" in the browser and see how your myPod transparent GIF logo works.

final myPod index page

excellent work - says guy in chair


Turn in Your Files

  1. In My Documents, navigate down to your root folder (the one with your last name).
  2. Right-click on your root folder and select Copy.
  3. Navigate to the Inbox.
  4. Right-click on the "HTML 19" folder and select Paste.


Source: "Head First HTML with CSS & XHTML" by Elisabeth Freeman and Eric Freeman

resources · copyright information · Natomas High School Design Department