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

GMD•200 Digital media 1

Project: Interface

Assignment:

Use Photoshop and Image Ready to create an interface for an informational web site about a game of your choosing.

Specifications:

• Size: 795 pixels x 470 pixels.
• Orientation: Horizontal.
• Color Space: RGB, North America Web/Internet
• Due Date: Week 11 (June 25/26)
• 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 In Design.

Procedure

1. Choose a game to base your site on. It could be a new game, or a retro classic. And it need not be a video game—you could base this on a table-top, customizable card, or role-playing game. However, choose a game that's fairly complex.

Option: Invent your own game (rather than use an existing game) and get bonus points. For example, you could build it around the creature you created in the second project.

2. Get my approval on whatever game you choose.
3. Do some thumbnails and rough out a design. Remember, this is going to be an informational site about the game. What do you need on the interface? Consider:
• Some sort of banner with the name of the site/game and perhaps its logo.
• Navigation—a series of buttons/links to other pages. What kind of links? I'd suggest the following (feel free to add to/subtract from this list where appropriate):
• Home
• About (your game)
• Latest News
• FAQ
• Forum
• Contact
• Links
• Some images from the game—characters, environments, etc.
• 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. To create the rollovers, follow the directions in the Rollovers Exercise (steps 6–9).
10. 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.
11. 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.
    

Examples

Course Outlines: Mon/Wed | Tues/Thur

Syllabus

Student resource index