This document provides tips for designers working with developers. It suggests that designers think like developers by understanding HTML5 semantics, CSS3, JavaScript, and the content management system being used. Designers should also think like their clients by considering the client's digital literacy and platform preferences. The document recommends designing on a grid for consistency, organizing Photoshop files carefully, collaborating with developers, and saving all design iterations. It includes tips for using tools in Photoshop efficiently and provides resources for continuing to learn design skills.

1. From Photoshop to Development
steve@stephenbstarrdesign.com
www.stephenbstarrdesign.com
I hang out in:
google+ as Stephen Starr
LinkedIn as Stephen B. Starr
reddit (reddit.com/r/Wordpress/) as sbstarr
STEPHEN B. STARR DESIGN INC.

2. Right brain verses left brain
Developers are
left brained
STEPHEN B. STARR DESIGN INC.
Designers are
rightbrained

3. Choose your design tool
• Photoshop
• The browser with html/css
• InDesign (Sharlene King—
Designer at Morningstar)
• Illustrator (SVG is not quite
ready for prime time)
STEPHEN B. STARR DESIGN INC.

4. Think like a developer (as best you can)
• use HTML5 semantic terminology
header, footer, aside, nav, article, section—
(html5rocks.com)
STEPHEN B. STARR DESIGN INC.

5. Think like a developer (as best you can)
• know as much css3 as you can contain
(css3generator.com)
STEPHEN B. STARR DESIGN INC.

6. Think like a developer (as best you can)
• know about jQuery, javascript and PHP
STEPHEN B. STARR DESIGN INC.

7. Think like a developer (as best you can)
• know about the behaviors of the CMS you are using
STEPHEN B. STARR DESIGN INC.

8. Think like your client (as best you can)
• assume no knowledge of digital technology
• find about what browser, smartphone and pad device
they are using
STEPHEN B. STARR DESIGN INC.

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. Think like your client (as best you can)
• treat ALL questions with respect—
your client is never unintelligent
STEPHEN B. STARR DESIGN INC.

11. Consult with your developer before
you design
• this may be where some of your best ideas come
from—the collaboration between the designer and
the developer
STEPHEN B. STARR DESIGN INC.

12. Get as much mileage out of your
wireframe as you can
(unless being vague is your strategy)
• it will make the step into Photoshop more logical
to your client
• many issues will be resolved and you won’t have
to rehash them
STEPHEN B. STARR DESIGN INC.

13. Wireframe
STEPHEN B. STARR DESIGN INC.

14. Think mobile first
• might it be in your best interest to start designing
here first? (320px X ??)
• do your homepage and secondary
templates next
STEPHEN B. STARR DESIGN INC.

15. Use a “moodboard”
• allows you to easily reference recurring colors, styles
and other design elements while you’re using
Photoshop
STEPHEN B. STARR DESIGN INC.

16. Design on a grid
• your developer will not have to measure or guess at
your intent for pixel widths
960.gs
STEPHEN B. STARR DESIGN INC.

17. Design on a grid
• Start out with a 960px X 1200px
document, to set up a white
background, then double click on
the background layer to “unlock” it,
then change your canvas size to
1200px X 1400px.
STEPHEN B. STARR DESIGN INC.

18. Design on a grid
• your grid shows columns in pixel widths
STEPHEN B. STARR DESIGN INC.

19. Design on a grid
• use the same grid for all your templates
STEPHEN B. STARR DESIGN INC.

20. Save all iterations of your PSD designs
• find a naming convention that makes sense
ie. homepage_1.psd, homepage_2.psd,
homepage_final.psd
• you may need to move backward and you don’t want to
have to re-create something you’ve already done
STEPHEN B. STARR DESIGN INC.

21. Organize your PSD file carefully
• place all nav, header, footer, etc. items in labeled
folders
STEPHEN B. STARR DESIGN INC.

22. Organize your PSD file carefully
• show your developer hover states that can be turned
on and off with the toggle on/off switch
STEPHEN B. STARR DESIGN INC.

23. Organize your PSD file carefully
• make as many notes as you need to be clear! They can
be turned on and off as needed.
STEPHEN B. STARR DESIGN INC.

24. Give developer full access to your
design process
• save out JPEG files for your developer if needed OR
• give developer original photos that went into your
PSD file
STEPHEN B. STARR DESIGN INC.

25. PSD Tips and Tricks for designers and
developers
• auto select is your friend!
• the history palette
is your friend!
STEPHEN B. STARR DESIGN INC.

26. PSD Tips and Tricks for designers and
developers
• when creating a field of color or a button, use the
rectangular tool to easily edit the color (not the fill tool)
Go to Layer Style (fx) > Gradient overlay > click on the
gradient slider and adjust gradients quickly and easily
STEPHEN B. STARR DESIGN INC.

27. PSD Tips and Tricks for designers and
developers
• use the “Rectangular Marquis” tool along with
“fixed size” to make precise pixel width selections
STEPHEN B. STARR DESIGN INC.

28. PSD Tips and Tricks for designers and
developers
• cmd + t (Mac) or ctrl + t (Win) allows for quick drag and
resize of PSD elements
• place a large image into your PSD file as a “smart
object” and you can resize it without loss of quality
• opt + delete (Mac) or alt + backspace (Win) allows
quick color fills for PSD elements
• cmd + j (Mac) or ctrl + j (Win) duplicates a layer
quickly
STEPHEN B. STARR DESIGN INC.

29. PSD Tips and Tricks for designers and
developers
• cmd + click (Mac) or ctrl + click (Win) a content layer,
select the layer mask icon at the bottom to crop an
element within your content layer.
STEPHEN B. STARR DESIGN INC.

30. PSD Tips and Tricks for designers and
developers
• your placed item is still fully editable—
change opacity, etc.
STEPHEN B. STARR DESIGN INC.

31. PSD Tips and Tricks for designers and
developers
• adjust font size and leading
by dragging the “TT.”
STEPHEN B. STARR DESIGN INC.

32. Resources for designers
• css-tricks.com—Chris Coyier (all about css)
• csszengarden.com—David Shea (get inspired)
• feltpresence.com—Ryan Singer (User Interface)
• learn.shayhowe.com—Shay Howe (learn html &css)
• 960.gs—grid system for Photoshop
• css3generator.com—get the css3 for newer elements
• html5rocks.com—html5 features & semantic html5
• kuler.adobe.com—play with color palettes
•styletil.es—design tool for wireframe/moodboard stage
STEPHEN B. STARR DESIGN INC.