Introduction

Web pages often use graphics for titles and buttons.  Image files take longer to download than text, but they can help to make your site visually appealing and easy to use.  In this assignment, you will use a graphics program such as Fireworks or Photoshop to create a simple Title image and a button.  Once you create your images, you'll save or export them in a Web format (gif or jpg).

Your images can be very simple - you can do a lot with interesting font faces, color, and size. You may also wish to include some clip art or a photo, but it isn't required.

Make a Grooovy Title Image with Fireworks

my button

Please also see examples from past students. Note how color, font, sizes, shapes, images, and angles can help make title images more interesting. Subtitles can help explain the site.

Here are more title image examples created by students in the Web Graphics class (you don't need to do anything this elaborate, but it's fun to see what can be done).

What to Do

  1. If you already know Photoshop (or another graphics application that will create vector graphics in a Web format), you may use it for this assignment.  Otherwise, use Fireworks.  You can get a free 30-day trial from Adobe.
  2. Watch the video demonstrations for Fireworks. You could also use this handout or watch the lynda.com videos that discuss button creation in Fireworks or Photoshop.
  3. Create a simple title image (no more than 960 pixels wide) and save/export it as a gif.  To make your title interesting, experiment with unique fonts and colors and add a smaller subtitle.   The file name should have no spaces or illegal characters and should end with the .gif extension.   Keep the original file (png or psd) in case you need to make changes.
  4. Create a simple button image and save/export it as a gif.  Buttons work best with a simple, sans-serif font.   Buttons that are too big tend to look clunky and amateurish. The file name should have no spaces or illegal characters and should end with the .gif extension.
  5. In Dreamweaver, create a new folder called graphics_project within your 212projects folder and use Windows or MacOS to copy your button.gif and title.gif images into this folder.
  6. Create a new Web page and save it in this folder. Ideally, you should use a Dreamweaver 2-column layout like this example. (If we haven't covered css layout, you can wait or use a simple layout). Insert your title and button images.  If you want to do a rollover button, create 2 button images and select the Insert -> Image Objects -> Rollover Image. Add alt text for your images and upload the entire graphics_project folder to the studentweb server.
    NOTE: The alt text needs to help blind people orient and navigate, so alt text SHOULD REPEAT THE TEXT SHOWN IN THE IMAGE! For example, if your title says Jodi's Bar and Grill, the alt text should say Jodi's Bar and Grill, not title.
  7. Test your work by looking at your page on the server.  Revise your images if needed.  If the images don't look professional, check your export settings.
  8. Open 212portfolio.html, make a link to your graphics project page, and add a sentence or two that describes what you learned.

Submitting work

Grading - 50 points

Points Requirements
20 Web page displays title and button images with alt text
10 Title image is in proper format and looks good.
10 Button image is in proper format and looks good.
10 File names use no spaces or illegal characters.