Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

The 10 Commandments of Photoshop Mockups

2.724 visualizaciones

Publicado el

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.

  • Inicia sesión para ver los comentarios

The 10 Commandments of Photoshop Mockups

  1. 2. John Ferris pixelwhip pixelwhip pixel_whip [email_address]
  2. 3. Pixel Whip http://pixel-whip.com
  3. 4. Who are you?
  4. 5. What is this all about?
  5. 6. Why Photoshop?
  6. 8. Nondestructive Design <ul><li>“ 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.”
  7. 9. -Adobe Documentation </li></ul>
  8. 10. Nondestructive Design <ul><li>“ You can f--- up and it will be OK”
  9. 11. - John Ferris </li></ul>
  10. 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
  11. 14. Thou Shalt Organize Thy File
  12. 15. Thou Shalt Organize Thy File VS
  13. 16. Thou Shalt Organize Thy File <ul><li>How to Organize </li><ul><li>Group Layers
  14. 17. Name Groups so they loosely mimic the HTML Structure of the page
  15. 18. Name Layers
  16. 19. Collapse Groups when Finished </li></ul></ul>
  17. 20. Thou Shalt Organize Thy File HOT TIP Turn off “Add 'copy' to Copied Layers and Groups”
  18. 21. II. Thou Shalt Use a Grid
  19. 22. Thou Shalt Use a Grid <ul><li>Why?
  20. 23. Grids introduce order into chaos.
  21. 24. Grids reduce the guesswork involved with size and placement.
  22. 25. Grids are made of boxes . . . conveniently, so are web pages. </li></ul>
  23. 26. Thou Shalt Use a Grid http://blackestate.co.nz http://drupal.org
  24. 27. Thou Shalt Use a Grid http://blackestate.co.nz http://drupal.org
  25. 28. Thou Shalt Use a Grid <ul><li>Common Grid Frameworks </li><ul><li>960gs http://960.gs/
  26. 29. Blueprint http://www.blueprintcss.org/
  27. 30. YUI Grids http://developer.yahoo.com/yui/grids/ </li></ul></ul>
  28. 31. Thou Shalt Use a Grid <ul><li>Grid Creation Tool
  29. 32. https://github.com/danclien/photoshop-grid-layout-generator </li></ul>
  30. 33. III. Thou Shalt Snap to Pixels
  31. 34. Thou Shalt Snap to Pixels <ul><li>Whole Pixels </li></ul><ul><li>Sloppy Pixels </li></ul>
  32. 35. Thou Shalt Snap to Pixels Setting Your File Snap to Pixels
  33. 36. Thou Shalt Snap to Pixels Setting Your File Snap to Everything Else
  34. 37. Thou Shalt Snap to Pixels Setting Your File Set Your Units to Pixels
  35. 38. Thou Shalt Snap to Pixels <ul><li>Feel Free to Eyeball Transforms
  36. 39. . . . then go back and manually enter whole pixel values </li></ul>
  37. 40. IV. Thou Shalt Use Shape Layers
  38. 41. Thou Shalt Use Shape Layers Buttons Navigation Borders Forms
  39. 43. Thou Shalt Use Shape Layers <ul><li>Compound Shapes </li></ul>
  40. 44. Thou Shalt Use Shape Layers Rounded Corners Scalin' ain't easy
  41. 45. Thou Shalt Use Shape Layers Layer Styles Party Shoes for Shapes
  42. 46. Thou Shalt Use Shape Layers Layer Styles Party Shoes for Shapes
  43. 47. Thou Shalt Use Shape Layers Don't Use PS Defaults Create Your Own
  44. 48. V. Thou Shalt Not Erase
  45. 49. Thou Shalt Not Erase Types of Masks
  46. 50. VI. Thou Shalt Use Smart Objects
  47. 51. Thou Shalt Use Smart Objects <ul><li>Use Smart Objects for
  48. 52. Importing Images or Logos
  49. 53. Reusing graphics such as bullets, buttons, etc. </li></ul>
  50. 54. VII. Thou Shalt Plan for Expansion
  51. 55. Thou Shalt Plan for Expansion <ul><li>Web Pages are Dynamic
  52. 56. All elements that can expand will eventually need to transition to a Repeating Background Image or Solid Color. </li></ul>
  53. 57. VIII. Thou Shalt Use Adjustment Layers
  54. 58. Thou Shalt Use Adjustment Layers <ul><li>Non-Destructive Image Adjustments </li></ul>
  55. 59. IX. Thou Shalt Not Take Type Tools in Vain
  56. 60. Thou Shalt Not Take Type Tools in Vain <ul><li>Paragraph Type Point Type </li></ul><ul><li>Dummy text courtesy of http://www.lorizzle.nl </li></ul>
  57. 61. Thou Shalt Not Take Type Tools in Vain Character Palette Inline styles
  58. 62. Thou Shalt Not Take Type Tools in Vain Character Palette Inline styles
  59. 63. Thou Shalt Not Take Type Tools in Vain Paragraph Palette Block styles
  60. 64. Thou Shalt Not Take Type Tools in Vain Paragraph Palette Block styles
  61. 65. X. Thou Shalt Use Transparency with Care
  62. 66. Thou Shalt Use Transparency with Care <ul><li>Watch Your Blend Modes
  63. 67. Normal is the only blend mode that translates to the web.
  64. 68. Only use others (multiply, screen etc.) if you're exporting a flattened image. </li></ul>
  65. 69. Thou Shalt Use Transparency with Care <ul><li>Transparent PNGs are awesome
  66. 70. . . . Big ass transparent PNGs are not. </li></ul>
  67. 71. Thou Shalt Use Transparency with Care <ul><li>24bit PNG 149 KB </li></ul><ul><li>JPG 33 KB </li></ul>
  68. 72. Questions?
  69. 73. Survey Says? http://dcco.us/n/76
  70. 74. This Session Has Ended. Go in Peace.

×