PHOTOSHOP, PSDS, AND

DESIGN COMPS

WRA210 9.25

TODAY’S AGENDA

• Learn some more Photoshop

o Fill Layers

o Adding Shapes

o Adding Images

o Transform

• Workshop - make comps from wireframes

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?

LAYERS IN IMAGE EDITING

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

o Gimp - free, cross-platform

o Pixelmator - Mac, $15

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 16

• Revist the typecards from last time.

o Redo with web-safe fonts, if necessary

o Save and re-upload to your site

o Update links on course page

MAKING A DESIGN COMP

• Using out wireframes, color, and type guides

• Check out an example comp, notice:guides

o layer organization (names, folders)

• Use a grid to help you:

o alignment

o proximity

o browser resolution

QUICK DEMO OF COMP-RELATED TOOLS

• Using a grid and guides

• Using shapes to build structure

• Inserting images

• Naming and organizing layers

MORE ABOUT PHOTOSHOP FOR COMPS

• Shape Tool - drawing shapes, containers

• Free Transform Tool - resize, rotate objects

• Placing Images - add images into a design

• Rulers & Guides - make alignment easier

• Layer Organization - keep documents clean

MODULE 6 – FINISH IT

• Color and type guides (done!)

• Full design comps

o Workshop today

o Drafts due Monday

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

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)