From Photoshop to Development


Published on

Chicago Web Professionals presentation 5/14/13

Published in: Technology, Art & Photos
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

From Photoshop to Development

  1. 1. From Photoshop to Developmentsteve@stephenbstarrdesign.comwww.stephenbstarrdesign.comI hang out in:google+ as Stephen StarrLinkedIn as Stephen B. Starrreddit ( as sbstarrSTEPHEN B. STARR DESIGN INC.
  2. 2. Right brain verses left brainDevelopers areleft brainedSTEPHEN B. STARR DESIGN INC.Designers arerightbrained
  3. 3. Choose your design tool• Photoshop• The browser with html/css• InDesign (Sharlene King—Designer at Morningstar)• Illustrator (SVG is not quiteready for prime time)STEPHEN B. STARR DESIGN INC.
  4. 4. Think like a developer (as best you can)• use HTML5 semantic terminologyheader, footer, aside, nav, article, section—( B. STARR DESIGN INC.
  5. 5. Think like a developer (as best you can)• know as much css3 as you can contain( B. STARR DESIGN INC.
  6. 6. Think like a developer (as best you can)• know about jQuery, javascript and PHPSTEPHEN B. STARR DESIGN INC.
  7. 7. Think like a developer (as best you can)• know about the behaviors of the CMS you are usingSTEPHEN B. STARR DESIGN INC.
  8. 8. Think like your client (as best you can)• assume no knowledge of digital technology• find about what browser, smartphone and pad devicethey are usingSTEPHEN B. STARR DESIGN INC.
  9. 9. Think like your client (as best you can)• know they will respond to what they SEE—the EYE/BRAIN connection rules!(courtesy of Ryan Singer)STEPHEN B. STARR DESIGN INC.
  10. 10. Think like your client (as best you can)• treat ALL questions with respect—your client is never unintelligentSTEPHEN B. STARR DESIGN INC.
  11. 11. Consult with your developer beforeyou design• this may be where some of your best ideas comefrom—the collaboration between the designer andthe developerSTEPHEN B. STARR DESIGN INC.
  12. 12. Get as much mileage out of yourwireframe as you can(unless being vague is your strategy)• it will make the step into Photoshop more logicalto your client• many issues will be resolved and you won’t haveto rehash themSTEPHEN B. STARR DESIGN INC.
  13. 13. WireframeSTEPHEN B. STARR DESIGN INC.
  14. 14. Think mobile first• might it be in your best interest to start designinghere first? (320px X ??)• do your homepage and secondarytemplates nextSTEPHEN B. STARR DESIGN INC.
  15. 15. Use a “moodboard”• allows you to easily reference recurring colors, stylesand other design elements while you’re usingPhotoshopSTEPHEN B. STARR DESIGN INC.
  16. 16. Design on a grid• your developer will not have to measure or guess atyour intent for pixel widths960.gsSTEPHEN B. STARR DESIGN INC.
  17. 17. Design on a grid• Start out with a 960px X 1200pxdocument, to set up a whitebackground, then double click onthe background layer to “unlock” it,then change your canvas size to1200px X 1400px.STEPHEN B. STARR DESIGN INC.
  18. 18. Design on a grid• your grid shows columns in pixel widthsSTEPHEN B. STARR DESIGN INC.
  19. 19. Design on a grid• use the same grid for all your templatesSTEPHEN B. STARR DESIGN INC.
  20. 20. Save all iterations of your PSD designs• find a naming convention that makes senseie. homepage_1.psd, homepage_2.psd,homepage_final.psd• you may need to move backward and you don’t want tohave to re-create something you’ve already doneSTEPHEN B. STARR DESIGN INC.
  21. 21. Organize your PSD file carefully• place all nav, header, footer, etc. items in labeledfoldersSTEPHEN B. STARR DESIGN INC.
  22. 22. Organize your PSD file carefully• show your developer hover states that can be turnedon and off with the toggle on/off switchSTEPHEN B. STARR DESIGN INC.
  23. 23. Organize your PSD file carefully• make as many notes as you need to be clear! They canbe turned on and off as needed.STEPHEN B. STARR DESIGN INC.
  24. 24. Give developer full access to yourdesign process• save out JPEG files for your developer if needed OR• give developer original photos that went into yourPSD fileSTEPHEN B. STARR DESIGN INC.
  25. 25. PSD Tips and Tricks for designers anddevelopers• auto select is your friend!• the history paletteis your friend!STEPHEN B. STARR DESIGN INC.
  26. 26. PSD Tips and Tricks for designers anddevelopers• when creating a field of color or a button, use therectangular tool to easily edit the color (not the fill tool)Go to Layer Style (fx) > Gradient overlay > click on thegradient slider and adjust gradients quickly and easilySTEPHEN B. STARR DESIGN INC.
  27. 27. PSD Tips and Tricks for designers anddevelopers• use the “Rectangular Marquis” tool along with“fixed size” to make precise pixel width selectionsSTEPHEN B. STARR DESIGN INC.
  28. 28. PSD Tips and Tricks for designers anddevelopers• cmd + t (Mac) or ctrl + t (Win) allows for quick drag andresize of PSD elements• place a large image into your PSD file as a “smartobject” and you can resize it without loss of quality• opt + delete (Mac) or alt + backspace (Win) allowsquick color fills for PSD elements• cmd + j (Mac) or ctrl + j (Win) duplicates a layerquicklySTEPHEN B. STARR DESIGN INC.
  29. 29. PSD Tips and Tricks for designers anddevelopers• cmd + click (Mac) or ctrl + click (Win) a content layer,select the layer mask icon at the bottom to crop anelement within your content layer.STEPHEN B. STARR DESIGN INC.
  30. 30. PSD Tips and Tricks for designers anddevelopers• your placed item is still fully editable—change opacity, etc.STEPHEN B. STARR DESIGN INC.
  31. 31. PSD Tips and Tricks for designers anddevelopers• adjust font size and leadingby dragging the “TT.”STEPHEN B. STARR DESIGN INC.
  32. 32. Resources for designers•—Chris Coyier (all about css)•—David Shea (get inspired)•—Ryan Singer (User Interface)•—Shay Howe (learn html &css)•—grid system for Photoshop•—get the css3 for newer elements•—html5 features & semantic html5•—play with color palettes•—design tool for wireframe/moodboard stageSTEPHEN B. STARR DESIGN INC.