from photoshop to development

From Photoshop to Development

steve@stephenbstarrdesign.comwww.stephenbstarrdesign.com

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

STEPHEN B . STARR DESIGN INC .

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)

STEPHEN B . STARR DESIGN INC .

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 .

Think like a developer (as best you

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

STEPHEN B . STARR DESIGN INC .

Think like a developer (as best you

can) • know about jQuery, javascript and PHP

STEPHEN B . STARR DESIGN INC .

Think like a developer (as best you

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

STEPHEN B . STARR DESIGN INC .

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 .

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 .

Think like your client (as best you

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

STEPHEN B . STARR DESIGN INC .

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 .

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 .

Wireframe

STEPHEN B . STARR DESIGN INC .

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 .

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 .

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 .

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 .

Design on a grid

• your grid shows columns in pixel widths

STEPHEN B . STARR DESIGN INC .

Design on a grid

• use the same grid for all your templates

STEPHEN B . STARR DESIGN INC .

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 .

Organize your PSD file carefully

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

STEPHEN B . STARR DESIGN INC .

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 .

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 .

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 .

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

STEPHEN B . STARR DESIGN INC .

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 .

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 .

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 .

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 .

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

STEPHEN B . STARR DESIGN INC .

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

STEPHEN B . STARR DESIGN INC .

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 .