Designing Websites in Photoshop

67 %
33 %
Information about Designing Websites in Photoshop
Design

Published on November 22, 2013

Author: SmarterFaster

Source: slideshare.net

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.

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.* 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.

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.

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.

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.

02 Layout

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.

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.

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.

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.

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

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.* 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.

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

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

Add a comment

Related presentations

Related pages

48 Excellent Tutorials for Designing Websites in Photoshop

Here are 48 of the best tutorials for designing websites in Photoshop. Check out all the designs and layouts, representing a variety of styles and...
Read more

Photoshop Tutorials > Your First Day Designing Websites in ...

Photoshop can be an intimidating program, there’s no doubt about it. If you find yourself tasked with mocking up a website for the first time and have ...
Read more

A Photoshop Web Design in 5 Minutes - YouTube

Thought I'd record myself designing in Photoshop and then speed it up so you see the action take place in 5 minutes!
Read more

Designing a Website in Photoshop : Adobe Photoshop Tutorial

Designing a Website in Photoshop This Adobe Photoshop tutorial will show and discuss how to use Photoshop to design a web site that will be exported as ...
Read more

Designing Websites In Photoshop Illustrator? – Smashing ...

So you have done some initial sketches for the look of your new design. Now it's time to develop these ideas. So let's jump into Photoshop. Stop! Wait just ...
Read more

How to design a website layout in Photoshop - EntheosWeb

How to design a website layout in Photoshop. ... Tutorial 1 : Creating a unique website header Tutorial 2 : Designing your website layout in Photoshop
Read more

Design a Flat Website Mockup in Photoshop - SitePoint

Design a Flat Website Mockup in Photoshop. ... She has worked doing various jobs from designing logos to filming commercials and animating music videos ...
Read more

Designing Websites with Photoshop - Hongkiat.com

Designing Websites with Photoshop – The Ultimate Roundup. Kay Tan ... In this Photoshop web design tutorial, ...
Read more

Photoshop | Web Design Library

Photoshop is an amazing tool, you can create anything visual with it. ... How to Create a Clean Website Layout in Photoshop. Web Layout. May 24, 2013.
Read more

Designing Websites Using Photoshop | Adobe Education Exchange

Enter email addresses to invite your peers to join the Education Exchange.
Read more