from photoshop to development

From Photoshop to Development

[email protected]

I hang out in:google+ as Stephen StarrLinkedIn as Stephen B. Starrreddit (reddit.com/r/Wordpress/) as sbstarr

STEPHEN B . STARR DESIGN INC .

Right brain verses left brain

Developers are left brained


Designers are right brained

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)


Think like a developer (as best you

can) • use HTML5 semantic terminology header, footer, aside, nav, article, section— (html5rocks.com)



can) • know as much css3 as you can contain (css3generator.com)



can) • know about jQuery, javascript and PHP



can) • know about the behaviors of the CMS you are using


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



can) • know they will respond to what they SEE— the EYE/BRAIN connection rules! (courtesy of Ryan Singer)



can) • treat ALL questions with respect— your client is never unintelligent


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


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


Wireframe


Think mobile first

• might it be in your best interest to start designing here first? (320px X ??)• do your homepage and secondary templates next


Use a “moodboard”

• allows you to easily reference recurring colors, styles and other design elements while you’re using Photoshop


Design on a grid

• your developer will not have to measure or guess at your intent for pixel widths

960.gs


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.


Design on a grid

• your grid shows columns in pixel widths


Design on a grid

• use the same grid for all your templates


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


Organize your PSD file carefully

• place all nav, header, footer, etc. items in labeled folders



• show your developer hover states that can be turned on and off with the toggle on/off switch



• make as many notes as you need to be clear! They can be turned on and off as needed.


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


PSD Tips and Tricks for designers and developers• auto select is your friend!• the history palette is your friend!


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


PSD Tips and Tricks for designers and developers• use the “Rectangular Marquis” tool along with “fixed size” to make precise pixel width selections


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


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.


PSD Tips and Tricks for designers and developers• your placed item is still fully editable— change opacity, etc.


PSD Tips and Tricks for designers and developers• adjust font size and leading by dragging the “TT.”


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


from photoshop to development

Technology

starr design

design elements

developer beforeyou

design tool photoshop

psd tips

psd designs

psd elements cmd

designers anddevelopers