1 / 12

Photoshop, PSDs, and Design Comps

Photoshop, PSDs, and Design Comps. WRA210 9.25. Today’s Agenda. Learn some more Photoshop Fill Layers Adding Shapes Adding Images Transform Workshop - make comps from wireframes. Discuss. Difference between Wireframes and Comps What do they do? Who are they for? Why do we do them?

fadhila
Download Presentation

Photoshop, PSDs, and Design Comps

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Photoshop, PSDs, and Design Comps WRA210 9.25

  2. Today’s Agenda • Learn some more Photoshop • Fill Layers • Adding Shapes • Adding Images • Transform • Workshop - make comps from wireframes

  3. Discuss • Difference between Wireframes and Comps • What do they do? • Who are they for? • Why do we do them? • Why are they crucial? • 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" • open-source, can be opened with lots of apps • industry standard - everyone will be able to use it • Software that will create layered PSD files • Photoshop - in labs, $169 at Computer Store • Gimp - free, cross-platform • Pixelmator - Mac, $15

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

  7. Making a Design Comp • Using out wireframes, color, and type guides • Check out an example comp, notice:guides • layer organization (names, folders) • Use a grid to help you: • alignment • proximity • 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 • Free Transform Tool - resize, rotate objects • Placing Images - add images into a design • Rulers & Guides - make alignment easier • Layer Organization - keep documents clean

  10. Module 6 – finish it • Color and type guides (done!) • Full design comps • Workshop today • 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: • Revise based on peer review (Monday) • Give your docs polish, make them look good • 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)

More Related