Designing Websites in Photoshop

2,081 views

Published on

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

Published in: Design, Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,081
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
15
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Designing Websites in Photoshop

  1. 1. The Non-Coding Web Designer Designing Websites in Photoshop
  2. 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. 3. 01 Typography
  4. 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. 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. 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. 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. 8. 02 Layout
  9. 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. 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. 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. 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. 13. 03 Imagery
  14. 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. 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. 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. 17. 04 Organization
  18. 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. 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. 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. 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

×