A quick look at what you can do to make sure your Photoshop files translate faithfully to live websites with minimal headaches during development.

1. The Non-Coding Web Designer
Designing Websites
in Photoshop

2. While there’s no replacement for learning to build
your own designs, The Non-Coding Web Designer
series tries to make things go as smoothly as
possible for those not quite ready to take the leap.

3. 01
Typography

4. For dynamic content, only specify typefaces that are
web safe or can be licensed for @font-face use.*
Web Safe Serif
W e b S a f e S a ns - S e r i f
Georgia, serif;
Arial, Helvetica, sans-serif;
Palatino Linotype, Book Antiqua, Palatino, serif;
Times New Roman, Times, serif;
Arial Black, Gadget, sans-serif;
Comic Sans MS, cursive, sans-serif;
Impact, Charcoal, sans-serif;
W e b S a f e M o n o sp a c e
Courier New, Courier, monospace;
Lucida Console, Monaco, monospace;
Lucida Sans Unicode, Lucida Grande, sans-serif;
Tahoma, Geneva, sans-serif;
Trebuchet MS, Helvetica, sans-serif;
Verdana, Geneva, sans-serif;
* Try to limit @font-face fonts to around 3–4 per site to keep load times reasonable. Unfortunately, this includes different weights of the same font.

5. Use the Character and Paragraph palettes
to control text and spacing.*
font-family:
font-weight:
font-size:
line-height:
letter-spacing:**
color:
font-weight:bold
font-style:italic
text-transform:uppercase
font-variant:small-caps
text-decoration:underline
text-decoration:line-through
vertical-align:super
vertical-align:sub
* Only use integer values when specifying text and spacing. For example, browsers cannot display 14.5px type, and will round the value.
** A value of 1000 in Photoshop translates to roughly 1em in CSS. Please note that letter-spacing can be a little tricky and will vary from browser to browser.

6. text-align:right
text-align:center
text-align:left
padding-left:
text-align:justify
padding-right:
text-indent:
padding-top:
padding-bottom:
hyphens:*
* hyphens is a CSS3 property with currently poor browser support. This box should generally be left unchecked.
** Without hyphenation, justified text is difficult to do well. Avoid text-align:justify unless the column is wide enough to handle it.

7. Format with as few text boxes as possible.*
Header 1
Header 1
Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor in
cididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam.
Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor in
cididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam.
• Duis aute irure dolor in reprehenderit.
NOT
• Duis aute irure dolor in reprehenderit.
• In voluptate velit esse cillum dolore
eu fugiat nulla pariatur.
• In voluptate velit esse cillum dolore
eu fugiat nulla pariatur.
• Excepteur sint occaecat cupid.
• Excepteur sint occaecat cupid.
* This makes it much easier to be consistent from page to page, and to flow content into multiple page layouts for responsive designs.

8. 02
Layout

9. Understand the box model.*
margin
border
padding
content
* Sorry, there’s no getting around this one. Every website you design will eventually be built using this concept, so they should be designed with it in mind.

10. Design on a grid.*
WWW
Gazette
News
Home
Articles
Gallery
About
The most amazing news story ever.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor in cididunt
Sports
ut labore et dolore magna aliqua. Ut enim ad minim veniam. Met alis quas el in con num
Life
omnim eum atianiscil illupta vit voluptiunt porem et am, quaes corro maximinvent iunt ratum
Money
modi od eum am nitae dis est, odigent istrum is non porit idis imint di cusandus quam
Tech
quiatas qui aspicil es experum re dolendus sim quatem laborro ratistet ut magnimusdae.
Travel
tiorest, qui beatin pratur sit volores edisit, sim sequia eatur re odiciendam volorem
dolor alicabo riaerferis et aped excerit aquosant, assente moluptas ipsanihil et is doloriam,
el essi ideliberibus verferor andessitis aut quatem iniendae digendis que sus doluptumquo
fugitatem alicia necullessi nosapicil este excepudi de laudae rem nonsequid quuntia epudae
Uptatur, officiatem velis alibus comnihi tiaeperist, consenet qui sint, si ipidit volo volupta
sundandae veles doluptissit adis que ne pellace ribusamus et aut eicius eveliquia.
Opinion
Weather
Uptatur, officiatem velis alibus comnihi
tiaeperist, consenet qui sint, si ipidit volo.
Uptatur, officiatem velis alibus comnihi
tiaeperist, consenet qui sint, si ipidit volo.
* Grids provide a logical structure and create a consistent framework for the design as it evolves over time.

11. Define your text areas on the grid,
and fine tune with padding*
WWW
Gazette
News
Home
Articles
Gallery
About
The most amazing news story ever.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor in cididunt
Sports
ut labore et dolore magna aliqua. Ut enim ad minim veniam. Met alis quas el in con num
Life
omnim eum atianiscil illupta vit voluptiunt porem et am, quaes corro maximinvent iunt ratum
Money
modi od eum am nitae dis est, odigent istrum is non porit idis imint di cusandus quam
Tech
epudae quiatas qui aspicil es experum re dolendus sim quatem laborro ratistet ut
Travel
volo volupta tiorest, qui beatin pratur sit volores edisit, sim sequia eatur re odiciendam
dolor alicabo riaerferis et aped excerit aquosant, assente moluptas ipsanihil et is doloriam,
el essi ideliberibus verferor andessitis aut quatem iniendae digendis que sus doluptumquo
fugitatem alicia necullessi nosapicil este excepudi de laudae rem nonsequid quuntia
magnimusdae. Uptatur, officiatem velis alibus comnihi tiaeperist, consenet qui sint, si ipidit
Opinion
Weather
Uptatur, officiatem velis alibus comnihi
tiaeperist, consenet qui sint, si ipidit volo.
Uptatur, officiatem velis alibus comnihi
tiaeperist, consenet qui sint, si ipidit volo.
* This will show a developer what your intent is, which won’t necessarily be clear from a few pages of sample text, and help you be consistent from page to page.

12. Be exact.*
NOT
* Browsers round to whole pixels, and your designs should reflect this. If edges straddle multiple pixels, your intent will be unclear to others.

13. 03
Imagery

14. Use smart objects for imagery.*
NOT
* To account for high pixel density screens, make sure the resolution is at least twice what you’re using in the design.

15. Mask images instead of erasing.*
* Elements like rounded corners are typically achieved through CSS, so it’s best not to completely remove that information from your file.

16. Avoid blending modes where elements will interact.*
NOT
ART
Opacity: 75%
ART
* Opacity is still fair game, and you can use any blending mode as long as it can be flattened as part of an image.
Blending Mode: Overlay

17. 04
Organization

18. Clearly label your layers.*
NOT
* There’s no specific standard for organization. The goal is simply that someone else can easily find elements in your file.

19. Don’t forget to show interactions.*
a:link
SUBMIT
a:hover
a:active
SUBMIT
SUBMIT
* Show enough to communicate how you want the site to behave. This can be done in a clearly labeled folder, with Layer Comps, or in a separate document.

20. Ready to learn HTML and CSS?
Here are some great places to start.
HTML and CSS:
Design and Build Websites
Don’t Fear
the Internet
Codecademy
Web Fundamentals
by John Ducket
ISBN 978-1118008188
dontfeartheinternet.com
codecademy.com/tracks/web

21. 11 Stanwix Street
Pittsburgh, PA 15218
412.995.9500
brunnerworks.com
Tim Madle, Associate Creative Director
tmadle@brunnerworks.com
v1 November 22, 2013 10:46 AM