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:
|
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
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- Open 212portfolio.html, make a link to your graphics project page, and add a sentence or two that describes what you learned.
Submitting work
-
Submit your URL to Blackboard in the "Submit Assignments" section. (need instructions?)
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. |

