web


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

Here are examples:

title

button

 

Please also see examples from 2008 students Jeff, Michelle, Nathan, Dyan, Dustin, & Desiree.

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.  A free 30-day Fireworks trial is on the CD that came with your textbook or on the Macromedia Downloads page.
  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 (600 pixels wide or less) 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 local_root 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. 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 labels for your images and upload the entire graphics_project folder to the studentweb server.
  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 tags.
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.