![John Ferris pixelwhip pixelwhip pixel_whip [email_address]](data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)
More Related Content
Viewers also liked
Viewers also liked (17)
Similar to The 10 Commandments of Photoshop Mockups
Similar to The 10 Commandments of Photoshop Mockups (20)
Recently uploaded
Recently uploaded (20)
The 10 Commandments of Photoshop Mockups
- 2. John Ferris pixelwhip pixelwhip pixel_whip [email_address]
- 3. Pixel Whip http://pixel-whip.com
- 4. Who are you?
- 5. What is this all about?
- 11. - John Ferris
- 12. Nondestructive Design 1. Adjustment Layers 2. Layer Styles 3. Layer Masks 4. Smart Objects 5. Smart Filters 6. Nondestructive Cropping Tools of the Trade
- 14. Thou Shalt Organize Thy File
- 15. Thou Shalt Organize Thy File VS
- 17. Name Groups so they loosely mimic the HTML Structure of the page
- 18. Name Layers
- 19. Collapse Groups when Finished
- 20. Thou Shalt Organize Thy File HOT TIP Turn off “Add 'copy' to Copied Layers and Groups”
- 21. II. Thou Shalt Use a Grid
- 23. Grids introduce order into chaos.
- 24. Grids reduce the guesswork involved with size and placement.
- 25. Grids are made of boxes . . . conveniently, so are web pages.
- 26. Thou Shalt Use a Grid http://blackestate.co.nz http://drupal.org
- 27. Thou Shalt Use a Grid http://blackestate.co.nz http://drupal.org
- 33. III. Thou Shalt Snap to Pixels
- 35. Thou Shalt Snap to Pixels Setting Your File Snap to Pixels
- 36. Thou Shalt Snap to Pixels Setting Your File Snap to Everything Else
- 37. Thou Shalt Snap to Pixels Setting Your File Set Your Units to Pixels
- 39. . . . then go back and manually enter whole pixel values
- 40. IV. Thou Shalt Use Shape Layers
- 41. Thou Shalt Use Shape Layers Buttons Navigation Borders Forms
- 44. Thou Shalt Use Shape Layers Rounded Corners Scalin' ain't easy
- 45. Thou Shalt Use Shape Layers Layer Styles Party Shoes for Shapes
- 46. Thou Shalt Use Shape Layers Layer Styles Party Shoes for Shapes
- 47. Thou Shalt Use Shape Layers Don't Use PS Defaults Create Your Own
- 48. V. Thou Shalt Not Erase
- 49. Thou Shalt Not Erase Types of Masks
- 50. VI. Thou Shalt Use Smart Objects
- 52. Importing Images or Logos
- 53. Reusing graphics such as bullets, buttons, etc.
- 54. VII. Thou Shalt Plan for Expansion
- 56. All elements that can expand will eventually need to transition to a Repeating Background Image or Solid Color.
- 57. VIII. Thou Shalt Use Adjustment Layers
- 59. IX. Thou Shalt Not Take Type Tools in Vain
- 61. Thou Shalt Not Take Type Tools in Vain Character Palette Inline styles
- 62. Thou Shalt Not Take Type Tools in Vain Character Palette Inline styles
- 63. Thou Shalt Not Take Type Tools in Vain Paragraph Palette Block styles
- 64. Thou Shalt Not Take Type Tools in Vain Paragraph Palette Block styles
- 65. X. Thou Shalt Use Transparency with Care
- 67. Normal is the only blend mode that translates to the web.
- 68. Only use others (multiply, screen etc.) if you're exporting a flattened image.
- 70. . . . Big ass transparent PNGs are not.
- 72. Questions?
- 74. This Session Has Ended. Go in Peace.
Editor's Notes
- 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.