• Save
The 10 Commandments of Photoshop Mockups
Upcoming SlideShare
Loading in...5
×
 

The 10 Commandments of Photoshop Mockups

on

  • 2,084 views

As designers we are often lured into the temptations of bad photoshop practices. We’re designing in the moment and don’t think about the consequences. But the reality is your clients’ requests ...

As designers we are often lured into the temptations of bad photoshop practices. We’re designing in the moment and don’t think about the consequences. But the reality is your clients’ requests to make a design more ‘edgy’ will lead to many extra hours of theming if not done right. The seemingly endless rounds of revisions caused by “I know it when I see it” type feedback, will take so much longer when you’re using the wrong tools. Following ‘The 10 Commandments of Photoshop Mockups’ will get you well on your way to eternal designer bliss.

Statistics

Views

Total Views
2,084
Views on SlideShare
2,083
Embed Views
1

Actions

Likes
3
Downloads
0
Comments
0

1 Embed 1

https://rsccd.blackboard.com 1

Accessibility

Upload Details

Uploaded via as OpenOffice

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • Welcome to “The 10 Commandments of Photoshop Mockups”
  • Having a good solid workflow is all about efficiency. Thes commandments come from years of working with Photooshop and making thousands of revisions. How many of you get the design right the first time. I'm not just talking about client revisions. I'm talking about personal revisions. It's much like molding clay. A lot of the time I'm just throwing up on the page and then moving things around until it all looks right. The colors compiment the logo and photography and design hierarchy takes shape. The following commandments are the dos and don'ts of a fast and efficient workflow. The goal is to deliver the best product in the shortest period of time.
  • Having a good solid workflow is all about efficiency. Thes commandments come from years of working with Photooshop and making thousands of revisions. How many of you get the design right the first time. I'm not just talking about client revisions. I'm talking about personal revisions. It's much like molding clay. A lot of the time I'm just throwing up on the page and then moving things around until it all looks right. The colors compiment the logo and photography and design hierarchy takes shape. The following commandments are the dos and don'ts of a fast and efficient workflow. The goal is to deliver the best product in the shortest period of time.
  • Why Photoshop? How many of you were in Mason's session yesterday? I think his technique is great, but I have a hard time working that way. I'm a mouse jockey. Working in Photoshop is second nature for me. Fireworks is an excellent tool also. It's made great strides in the last couple versions.
  • Why Photoshop? How many of you were in Mason's session yesterday? I think his technique is great, but I have a hard time working that way. I'm a mouse jockey. Working in Photoshop is second nature for me. Fireworks is an excellent tool also. It's made great strides in the last couple versions.
  • Read this aloud.
  • Read this aloud.
  • Why Photoshop? How many of you were in Mason's session yesterday? I think his technique is great, but I have a hard time working that way. I'm a mouse jockey. Working in Photoshop is second nature for me. Fireworks is an excellent tool also. It's made great strides in the last couple versions.
  • Organizing helps you design more efficiently. It keeps frustration levels low because you don't have to spend as much time looking for elements. It will keep your themer from taking your name in vain when they open your file. It makes it easier for other team members to understand your file and your intentions.
  • Organizing your file has almost everything to do with your layers palette. Point out why one is better than the other.
  • SWITCH to PS Show BAD File show the layers Show GOOD File collapsed Demo Toggling Groups Demo Moving Groups Point out order and hiearchy and how it mimics HTML Switch to PP
  • Switch to PS Navigate to Layers > Panel Options Uncheck Add 'copy' to copied Layers and Groups Switch to PP
  • Mention these Frameworks. Using these can make the theming process go a lot faster. All the hard work is done for you.
  • SWITCH to PS Create a new grid template by going to Files > Scripts > Grid Layout Generator Col: 24 Width: 30 Gutter: 10 Margin: 100 Height: 800 Show How to toggle Guides. Emphasis on not clearing guides
  • Talk about the differences between partial and whole pixels. Crisp images look more professional one pixel can make a huge difference. Partial pixels won't slice cleanly and cancreate noticable artifacts on the final websites. You may think it's your css and curse IE, but it's your own fault.
  • SWITCH to PS Show Snap to Pixels in the Shape Layers Tool Turn on Snap to Grid Turn on Snap to Guides Right Click on the Ruler and set the Units to Pixels Go to Edit > Preferences Units and set to Pixels SWITCH to PP
  • SWITCH to PS Show Snap to Pixels in the Shape Layers Tool Turn on Snap to Grid Turn on Snap to Guides Right Click on the Ruler and set the Units to Pixels Go to Edit > Preferences Units and set to Pixels SWITCH to PP
  • SWITCH to PS Show Snap to Pixels in the Shape Layers Tool Turn on Snap to Grid Turn on Snap to Guides Right Click on the Ruler and set the Units to Pixels Go to Edit > Preferences Units and set to Pixels SWITCH to PP
  • This is an area where Photoshop is clearly lacking. SWITCH to PS Transform the Commandments Box. Zoom in and show off the BS Manually type in pixel values Switch to PP
  • Regular photoshop layers are great for photography. Most of what we design is not photography. It's buttons, containers, gradients, borders etc. Shape layers are Photoshop's answer to the vector. If it wasn't for shape layers I probably wouldn't be using Photoshop to design websites.
  • Why? They are Scalable They are Flexible (Compound Shapes) They are Reusable A normal layer is great for photogrphy, but most of what we're designing is not photogrpahy. It's buttons, frames, form fields and containers. SWITCH to PS Demo Body Double Shape Layer. Two layers for a fluid layout Show what other elements are shape layers
  • Why Photoshop? How many of you were in Mason's session yesterday? I think his technique is great, but I have a hard time working that way. I'm a mouse jockey. Working in Photoshop is second nature for me. Fireworks is an excellent tool also. It's made great strides in the last couple versions.
  • Talk about smart objects Smart objects are Photoshop's version of symbols. They allow you to import external assets and manipulate them in a nondestructive fashion.
  • Switch to PS Show the
  • Think about what you're trying to achieve when using type tools. Photoshop doesn't render type just like a browser, but when you use the proper tools, you can get close.
  • Talk about the difference between Paragraph and Point Type. This seems like a no-brainer, but I've incountered this enough times that it warrants mention. Paragraph type is contained and flows properly. Point type runs on until you force return. Point type should be avoided except for special circumstances SWITCH to PS Show Paragraph type example. Adjust the size.

The 10 Commandments of Photoshop Mockups The 10 Commandments of Photoshop Mockups Presentation Transcript

  •  
  • John Ferris pixelwhip pixelwhip pixel_whip [email_address]
  • Pixel Whip http://pixel-whip.com View slide
  • Who are you? View slide
  • What is this all about?
  • Why Photoshop?
  •  
  • Nondestructive Design
    • “ Nondestructive editing allows you to make changes to an image without overwriting the original image data, which remains available in case you want to revert to it. Because nondestructive editing doesn’t remove data from an image, the image quality doesn’t degrade when you make edits.”
    • -Adobe Documentation
  • Nondestructive Design
    • “ You can f--- up and it will be OK”
    • - John Ferris
  • Nondestructive Design 1. Adjustment Layers 2. Layer Styles 3. Layer Masks 4. Smart Objects 5. Smart Filters 6. Nondestructive Cropping Tools of the Trade
  •  
  • Thou Shalt Organize Thy File
  • Thou Shalt Organize Thy File VS
  • Thou Shalt Organize Thy File
    • How to Organize
      • Group Layers
      • Name Groups so they loosely mimic the HTML Structure of the page
      • Name Layers
      • Collapse Groups when Finished
  • Thou Shalt Organize Thy File HOT TIP Turn off “Add 'copy' to Copied Layers and Groups”
  • II. Thou Shalt Use a Grid
  • Thou Shalt Use a Grid
    • Why?
    • Grids introduce order into chaos.
    • Grids reduce the guesswork involved with size and placement.
    • Grids are made of boxes . . . conveniently, so are web pages.
  • Thou Shalt Use a Grid http://blackestate.co.nz http://drupal.org
  • Thou Shalt Use a Grid http://blackestate.co.nz http://drupal.org
  • Thou Shalt Use a Grid
    • Common Grid Frameworks
      • 960gs http://960.gs/
      • Blueprint http://www.blueprintcss.org/
      • YUI Grids http://developer.yahoo.com/yui/grids/
  • Thou Shalt Use a Grid
    • Grid Creation Tool
    • https://github.com/danclien/photoshop-grid-layout-generator
  • III. Thou Shalt Snap to Pixels
  • Thou Shalt Snap to Pixels
    • Whole Pixels
    • Sloppy Pixels
  • Thou Shalt Snap to Pixels Setting Your File Snap to Pixels
  • Thou Shalt Snap to Pixels Setting Your File Snap to Everything Else
  • Thou Shalt Snap to Pixels Setting Your File Set Your Units to Pixels
  • Thou Shalt Snap to Pixels
    • Feel Free to Eyeball Transforms
    • . . . then go back and manually enter whole pixel values
  • IV. Thou Shalt Use Shape Layers
  • Thou Shalt Use Shape Layers Buttons Navigation Borders Forms
  •  
  • Thou Shalt Use Shape Layers
    • Compound Shapes
  • Thou Shalt Use Shape Layers Rounded Corners Scalin' ain't easy
  • Thou Shalt Use Shape Layers Layer Styles Party Shoes for Shapes
  • Thou Shalt Use Shape Layers Layer Styles Party Shoes for Shapes
  • Thou Shalt Use Shape Layers Don't Use PS Defaults Create Your Own
  • V. Thou Shalt Not Erase
  • Thou Shalt Not Erase Types of Masks
  • VI. Thou Shalt Use Smart Objects
  • Thou Shalt Use Smart Objects
    • Use Smart Objects for
    • Importing Images or Logos
    • Reusing graphics such as bullets, buttons, etc.
  • VII. Thou Shalt Plan for Expansion
  • Thou Shalt Plan for Expansion
    • Web Pages are Dynamic
    • All elements that can expand will eventually need to transition to a Repeating Background Image or Solid Color.
  • VIII. Thou Shalt Use Adjustment Layers
  • Thou Shalt Use Adjustment Layers
    • Non-Destructive Image Adjustments
  • IX. Thou Shalt Not Take Type Tools in Vain
  • Thou Shalt Not Take Type Tools in Vain
    • Paragraph Type Point Type
    • Dummy text courtesy of http://www.lorizzle.nl
  • Thou Shalt Not Take Type Tools in Vain Character Palette Inline styles
  • Thou Shalt Not Take Type Tools in Vain Character Palette Inline styles
  • Thou Shalt Not Take Type Tools in Vain Paragraph Palette Block styles
  • Thou Shalt Not Take Type Tools in Vain Paragraph Palette Block styles
  • X. Thou Shalt Use Transparency with Care
  • Thou Shalt Use Transparency with Care
    • Watch Your Blend Modes
    • Normal is the only blend mode that translates to the web.
    • Only use others (multiply, screen etc.) if you're exporting a flattened image.
  • Thou Shalt Use Transparency with Care
    • Transparent PNGs are awesome
    • . . . Big ass transparent PNGs are not.
  • Thou Shalt Use Transparency with Care
    • 24bit PNG 149 KB
    • JPG 33 KB
  • Questions?
  • Survey Says? http://dcco.us/n/76
  • This Session Has Ended. Go in Peace.