Dan Fergus Design > Student Resources > Syllabus > Project: Interface

PHO•211 Photographic Imaging 2

Project: Interface

Assignment:

Use Photoshop and Image Ready to create an interface for an informational web site about photography or a photographer.

Specifications:

• Size: 795 pixels x 470 pixels.
• Orientation: Horizontal.
• Color Space: RGB, North America Web/Internet
• Deliverables: Upon completion, I need the following:
1. The digital Photoshop file (give it to me via jump drive or burn it onto a CD).
2. The HTML file and Images folder created by Image Ready.

Procedure

1. Choose a photographer or photography topic. It could be a theme like "photojournalism," "portraits," "landscapes," "nudes," "fashion," etc.
2. Get my approval on whatever person/theme you choose.
3. Do some thumbnails and rough out a design. What do you need on the interface? Consider:
• Some sort of banner with the name of the site and perhaps an image.
• Navigation—a series of buttons/links to other pages. What kind of links?
• Some sample photos.
• Some sort of introductory text—"Welcome to so-and-so..."
4. Launch Photoshop. Open a new document (see requirements above) and save it yourName_interface.psd.
5. In photoshop, combine images, graphics, and text to create your page.
6. Design rollovers—buttons, words, and/or pictures that change when a mouse rolls over them. Create a separate layer for any and every button/link. Give each of these layers a name.
7. For each rollover, make a copy of its layer. On this new layer add an effect or visibly change it in someway (you could change the color, add a glow, have a picture appear/disappear, etc.).
8. Once the design portion is done, save the file and launch ImageReady (click ).
9. Slice: In ImageReady choose the slice tool . Slice around each button/link. Try to keep your slices aligned vertically and horizontally. Make sure they abut one another—no gaps.
10. Name: Name all of the slices (in the Slice palette).
11. Optimize: In the Optimize palette, choose jpeg, gif, or png for each slice, and also the level of quality/number of colors. Hint: use jpeg for photos and art with gradients; use gif or png for flat graphics & text.
12. Set rollovers:
1. Turn off all layers that contain roll-over effects. Each button/link should look 'normal.'
2. Choose a slice that you wish to add a rollover to with the Slice Select tool .
3. In the Web Content palette, press the New Over State button . A new 'layer' entitled "over" should appear below the slice thumbnail in the Web Content Palette.
4. In the Layers palette, turn-on on the layer that contains the effect you wish to apply to the selected slice.
5. Back in the Web Content palette, click on the slice thumbnail (above the "over" state).
6. Select the next slice that you wish to add a rollover to. Repeat steps 3–5 for each slice in turn.
7. When you're all done, select the 'magic finger' button in the toolbar. With this, roll-over your buttons; they should all work (you can also press the browser button next to it to see how it looks in a web browser).
13. Choose File > Save Optimized As. For "Format" choose "HTML and Images," for "Settings" choose "Default Settings," and for "Slices" choose "All Slices." Name the html file yourName_inteface.html. I'd also recommend you save this into a new folder called yourName_interface.
14. You will note that "Save Optimized" creates an HTML file AND a folder called "Images" which should contain several jpeg, gif, and/or png files (these are your slices). It does not save your PSD file, you need to do that separately (with a standard "Save"). When you turn-in your project, make sure you give me all three parts: PSD files, HTML file, and "Images" folder.

Due Date: Week 11

Examples

Course Outline

Syllabus

Student resource index