Embed Size (px)
DESCRIPTION
A quick look at what you can do to make sure your Photoshop files translate faithfully to live websites with minimal headaches during development.
Citation preview
The Non-Coding Web Designer
Designing Websites in Photoshop
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.
01 Typography
For dynamic content, only specify typefaces that are web safe or can be licensed for @font-face use.*
W e b S a F e S e r i F
Georgia, serif;
Palatino Linotype, Book Antiqua, Palatino, serif; Times New Roman, Times, serif;
W e b S a F e M o N o S PaC e
Courier New, Courier, monospace;
Lucida Console, Monaco, monospace;
W e b S a F e S a N S - S e r i F
Arial, Helvetica, sans-serif;
Arial Black, Gadget, sans-serif;
Comic Sans MS, cursive, sans-serif;
Impact, Charcoal, sans-serif;
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.
Use the Character and Paragraph palettes to control text and spacing.*
font-size:
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
font-family: font-weight:
letter-spacing:**
color:
line-height:
* 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.
text-indent:
padding-top:
hyphens:*
padding-left:
text-align:center
text-align:left text-align:justify
text-align:right
padding-right:
padding-bottom:
* 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.
Header 1Lorem 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.
• In voluptate velit esse cillum dolore eu fugiat nulla pariatur.
• Excepteur sint occaecat cupid.
Header 1Lorem 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.
• In voluptate velit esse cillum dolore eu fugiat nulla pariatur.
• Excepteur sint occaecat cupid.
NoT
Format with as few text boxes as possible.*
* This makes it much easier to be consistent from page to page, and to flow content into multiple page layouts for responsive designs.
02 Layout
Understand the box model.*
* 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.
padding
margin
border
content
Design on a grid.*
* Grids provide a logical structure and create a consistent framework for the design as it evolves over time.
The most amazing news story ever. 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. Met alis quas el in con num
dolor alicabo riaerferis et aped excerit aquosant, assente moluptas ipsanihil et is doloriam,
omnim eum atianiscil illupta vit voluptiunt porem et am, quaes corro maximinvent iunt ratum
el essi ideliberibus verferor andessitis aut quatem iniendae digendis que sus doluptumquo
modi od eum am nitae dis est, odigent istrum is non porit idis imint di cusandus quam
fugitatem alicia necullessi nosapicil este excepudi de laudae rem nonsequid quuntia epudae
quiatas qui aspicil es experum re dolendus sim quatem laborro ratistet ut magnimusdae.
Uptatur, officiatem velis alibus comnihi tiaeperist, consenet qui sint, si ipidit volo volupta
tiorest, qui beatin pratur sit volores edisit, sim sequia eatur re odiciendam volorem
sundandae veles doluptissit adis que ne pellace ribusamus et aut eicius eveliquia.
News
Sports
Life
Money
Tech
Travel
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.
WWW GazeTTe Home articles Gallery about
Define your text areas on the grid, and fine tune with padding*
* 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.
The most amazing news story ever. 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. Met alis quas el in con num
dolor alicabo riaerferis et aped excerit aquosant, assente moluptas ipsanihil et is doloriam,
omnim eum atianiscil illupta vit voluptiunt porem et am, quaes corro maximinvent iunt ratum
el essi ideliberibus verferor andessitis aut quatem iniendae digendis que sus doluptumquo
modi od eum am nitae dis est, odigent istrum is non porit idis imint di cusandus quam
fugitatem alicia necullessi nosapicil este excepudi de laudae rem nonsequid quuntia
epudae quiatas qui aspicil es experum re dolendus sim quatem laborro ratistet ut
magnimusdae. Uptatur, officiatem velis alibus comnihi tiaeperist, consenet qui sint, si ipidit
volo volupta tiorest, qui beatin pratur sit volores edisit, sim sequia eatur re odiciendam
News
Sports
Life
Money
Tech
Travel
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.
WWW GazeTTe Home articles Gallery about
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.
03 imagery
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.
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.
NoT
ARTART
avoid blending modes where elements will interact.*
* Opacity is still fair game, and you can use any blending mode as long as it can be flattened as part of an image.
Opacity: 75% Blending Mode: Overlay
04 organization
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.
Don’t forget to show interactions.*
* 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.
SUbMiT SUbMiT SUbMiT
a:link a:hover a:active
ready to learn HTML and CSS? Here are some great places to start.
HTML and CSS: Design and build Websites
by John Ducket
ISBN 978-1118008188
Don’t Fear the internet
dontfeartheinternet.com
Codecademy Web Fundamentalscodecademy.com/tracks/web
Tim Madle, Associate Creative [email protected]
v1 November 22, 2013 10:46 AM
11 Stanwix Street Pittsburgh, PA 15218
412.995.9500brunnerworks.com
