Photoshop: 5 Rules for the Web Pages Layout Preparation

Do you have to work with a design that a client sends himself/herself to you (the design that wasn’t performed in your studio)? Does it always turn out to implement a flight of imagination that is depicted on the PSD? May be you know the situation where it wasn’t possible to just technically make-up the material sent to you. Have you remembered it?

Do you wish the designer would understand the coder by still continuing to think with his artistic categories without going into details of all these ‘html’ and ‘css’? Do you wish the designer would provide the coder with a quality material for making-up? Because this material is one of the main factors affecting the layout duration and quality.

Compliance with the given five rules is enough to find a common understanding with a client and ensure a productive collaboration of the designer and coder. Give him/her the rules and explain that only in case of performing them, it is possible to ensure 100% compliance of the thing painted with that one laid out.

Rule No. 1: You should consider dynamic modification of the content in a block

Some of the design decisions limit the content length. Using such elements in the design is not rational because content is a dynamic part intending possible extension. You should be very careful when using blocks with limited space for the dynamic content. For example, the semicircle inscribed menu will limit height of the menu. Since it is impossible to stretch the semicircle, the design will be broken off by adding a few more items into the menu.

Rule No. 2: The text should be in a separate (not rasterized) layer

When converting design to HTML the coder must define all text properties (a size, a font name, letter and line spacing, a line height, etc.). When rasterizing the text layer, the text becomes a picture and therefore loses all above listed properties.

Rule No. 3: Do not use anti-aliasing and blurring for the text

Unfortunately, none of browsers support this property. Therefore, if you wish to see on your site what is really painted, don’t use anti-aliasing for the text in Photoshop (the anti-aliasing value should be set as ‘none’, i.e. the option must be disabled). The rule doesn’t apply to the design elements that are supposed to be images: logos, banners, etc.

Rule No. 4: You should use a non-standard font just for pictures

When using a non-standard font for the text, you must understand that the font may be not installed at the visitor’s PC. In this case, the text will be displayed in a standard font (which is defined in the browser settings). However, everything will be displayed on your computer as you planned (because you installed the font). Use a non-standard font only for the items that will be depicted as pictures on the site, otherwise use either the standard fonts that are included in the delivery of the Windows/Linux/Mac operating systems, or those which are possible to embed in the page with a directive @font-face.

Rule No. 5: Every design element should be in its own independent layer

Logic elements are desirable to be categorized. The making-up process sometimes requires nontrivial solutions to implement the design idea, so the elements don’t have to be glued in a single layer. Using multiple layers makes it possible to work with each component separately. To name layers according to their contents is also a good practice.

All these good practices are twice as important for the automated PSD to Web conversion service. The better you prepare PSD template the better HTML/CSS code you will get.