Chapter 16 Group Project:
Creating Images for the Web

Introduction

In this assignment, you will continue to work on the partner Web site that you started in Chapter A and developed in Chapters B, C and D. You can assign individual elements of the project to each partner, or work collectively to create the finished product.

Summary

You will continue building your Web site by designing a new page in Photoshop, slicing it up, and saving the HTML and images for the Web.

Guidelines

1. Research
   Open a number of the sample Photoshop mockups that Mrs. Pedersen provided in the Outbox (Photoshop mockups folder). Take a look at which design elements are on each layer (turn visibility pn and off with the eye icon), and notice how the layers are stacked in the Layers palette. Notice how the text and images are arranged on the page along with any other design elements.
2. Brainstorm
   Consult your storyboard and brainstorm as a team to decide which page or pages you would like to develop in this chapter.
3. Plan & Design
   Assign a team member to create a sketch on a sheet of paper of the page you want to design in Photoshop. Decide how to design and where to place the navigation bar, the headings, images, text and any other design elements. Turn this sketch in at the end of the project.
4. Build
   Assign a team member the task of collecting text and image(s) for the new page.
5. Build
   Assign a team member the task of creating the page in Photoshop. Button rollover images are optional. Mrs. Pedersen can help you with any Photoshop tasks which are new to you. To begin, create a new file with the following settings:
   1. File > New
   2. Name: pagename.psd
   3. Width: 800 pixels
   4. Height: 600 pixels
   5. Resolution: 72 pixels/inch
   6. Background Contents: White
   7. Click OK.
   8. Save the file in the workdesk folder inside your Web site folder.
6. Prepare for the Web
   Review the Special Tutorial we did on saving slices for the Web. Here are the basic steps again:
   1. Open up the Save for Web & Devices dialog box (File > Save for Web & Devices).
   2. Select each of the slices you defined and select whether it is best saved as a GIF or JPG file.
   3. Click Save, then select "HTML and images" from the "Save as type" dropdown.
   4. Give the .html file an appropriate name.
   5. Locate your group Web site folder in My Documents.
   6. Click Save.
7. Test
   Assign a team member the task of testing all the links on the page. Fix and broken links using Dreamweaver
8. Turn In
   Turn your Web site folder into the server Inbox. Turn your sketch into the cardboard in box on the bookcase.

Example