FALL 2008: Week 06
9/29 (M): Genre and UI Survey III
- HW03 - feedback
- FPS GUI review (Gundam on PS3, Gundam on wii, Ratchet & Clank ):
- WHAT FEEDBACK do you need to give to the player?
- Replay value?
- Pause and choose?
- Vector Tools in Photoshop
- Custom Shape tool (w/ shape layers option - closed path by default)
- Direct Selection tool/Path Selection tool
- Convert Anchor Point tool
- Transform Tool
- Stroke/Fill
- Pen Tool/Freeform Pen Tool (w/ path option - open path by default)
- Straight point and corner point
- Add/delete anchor points
- Convert point
- Combine paths (select multiple paths - make selection from path - create workpath from selection)
- Lab04: when done, make sure to show the two below to the instructor to check off
- Download the .zip file from here. Refer to the handout, complete the lesson 9 from "Adobe Photoshop CS 3 Classroom in a Book."
- Trace the image below(Bass Clef) using Pen Tools and Vector Tools in Photoshop.
Note:
- Bars are not boxes, just stroked paths.
-
Combine paths as much as you can.
- Example below is on Adobe Illustrator.
- Extra credit will be given to added modifications and designs.
- HW04: Post on blog - hw04 by <your last name> due 6pm, Sun 10/05/08
- Wireframe proposal for a new Gundam game that has the following HUD elements.
- health meter: bar gauge, percent. figurative icon?
- thruster info & overheat info: gauge or number? what color and what color combination?
- weapon info & remaining shots: icon? number?
- radar and enemy indication: circular or not? dots or not?
- (target/lock-on icon is optional - extra credit)
- If you have access problem on the IMD blog, contact CTIN webmaster Emily at eduff@usc.edu (and copy me).
- Assignment 02 (due 10/06/08, 6pm) requirement
-
Using Photshop vector tools, design 4 HUD GUI elements (health meter, thruster info, weapon info, and radar) you proposed on the HW04 wireframe, and place them in the mock-up screen shots.
- Follow the visual theme, look and feel of overall Gundam series, and propose a set of HUD GUI elements with unique and consistent visuals.
- You can use the images below for mock-up screen shots (enlarge to 1280 x 720 px), or find ones that you like (make sure to pick the ones without any GUI element overlay - crop top and bottom if necessary)
- One psd files to turn in (1280 x 720 px). Name your PSD file as "assignment02_yourlastname.psd."
- One JPG file to post on your blog - add to your hw04 entry and rename the entry title as Assignment 02 by <your last name>.
- Design each HUD element on a full scale in 1280 x 720 px space (HD720) and put each on a separate layer.
- Downsize, rasterize and place them in a mock-up screen shot.
- Your finished photoshop file should have 4 layers of vector graphics data, and one or more layer of mock-up screen shot(s).
