1. PHOTOSHOP, PSDS, AND DESIGN COMPS WRA210 9.25

2. TODAY’S AGENDA Learn some more Photoshop o Fill Layers o Adding Shapes o Adding Images o Transform Workshop - make comps from wireframes

3. DISCUSS Difference between Wireframes and Comps o What do they do? o Who are they for? o Why do we do them? o Why are they crucial? o Why are they the work of Professional Writers?

4. LAYERS IN IMAGE EDITING

5. TOOLS FOR DESIGN COMPS Any app that will save a layered PSD file Use.PSD files - "photoshop document" o open-source, can be opened with lots of apps o industry standard - everyone will be able to use it Software that will create layered PSD files o Photoshop - in labs, $169 at Computer Store$169 at Computer Store o Gimp - free, cross-platform Gimp o Pixelmator - Mac, $15 Pixelmator

6. WORKING WITH TYPEFACES My mistake: Google Web Fonts o LEARN: understand the limitations of your host o LEARN: why you have to buy space for WRA 410 Only use fonts in the safe 16the safe 16 Revist the typecards from last time.typecards o Redo with web-safe fonts, if necessary o Save and re-upload to your site o Update links on course page

7. MAKING A DESIGN COMP Using out wireframes, color, and type guides Check out an example comp, notice:guidesexample comp o layer organization (names, folders) Use a grid to help you: o alignment o proximity o browser resolution

8. QUICK DEMO OF COMP- RELATED TOOLS Using a grid and guides Using shapes to build structure Inserting images Naming and organizing layers

9. MORE ABOUT PHOTOSHOP FOR COMPS Shape Tool - drawing shapes, containers Shape Tool Free Transform Tool - resize, rotate objects Free Transform Tool Placing Images - add images into a design Placing Images Rulers & Guides - make alignment easier Rulers & Guides Layer Organization - keep documents clean Layer Organization

10. MODULE 6 – FINISH IT Color and type guides (done!) Full design comps o Workshop today o Drafts due Monday

11. LOOKING AHEAD: DESIGN DOC PACKET First major, graded project Due on 10/4 Main work should be done; left to do: o Revise based on peer review (Monday) o Give your docs polish, make them look good o Module 7 (reflection) Make sure to review the rubric Check out new "rubric" section on course site

12. FOR NEXT TIME Complete Module 6 (color and type docs, drafts of full comps) Bring your design docs (people need to view them) Come prepared to talk about your designs Read: About Prototyping and Paper Prototyping (if you haven't already)About PrototypingPaper Prototyping