GetDevDone Best Practices: Tips for Optimal PSD Slicing Results

At GetDevDone, our main goal is to provide our clients with the best results with total customer satisfaction. We are happy to give you some tips on how to get the best HTML file based on your PSD layout. These are merely recommendations and are not requirements.

Content Requirements

Please do not use the rasterized layers for the content, since it gets difficult for us to visually define the font type used.
If you have a non-standard font, please send the source file for it along with your design.
Non-standard fonts are not recommended for use in the content of the page.

If you do not use the web font for your design, please:

1. Substitute images for the fonts
2. Utilize them by using the Cufon technique
3. Utilize them by using the sIFR technique
4. Utilize them by using the @font-face technique

If you want to use Cufon or @font-face, please remember that the EULA (End User Licensing Agreement) of these fonts have to allow web embedding. If web embedding is not permitted by the particular font’s EULA, we must use sIFR or image replacement for those fonts.

If you have decided to use non-standard web fonts, we recommend using sIFR and Cufon in headings only, preferably one-lined, as it is rather difficult to generate multi-line headings using these techniques.

Please do not use the faux bold effect for text elements when using Photoshop since it cannot be rendered in the markup.

Anti-aliasing in various web browsers visually differ from its appearance in Photoshop. Therefore, if you decide to use anti-alias in your design, the text in the markup will look slightly different. We encourage you to test this in your browser by using a similar font with Firebug or any other online typography testing tool prior to submitting your design to us.

Elements Requirements

Please avoid using the blending modes such as “multiply” with the exception of the “normal” mode for any design layer if it is intended to be separated and transparent in the markup. The reason is it is impossible to “cut out” the transparent element when the blending modes are applied. Failure to avoid the blending modes will result in the need to create these elements intuitively since we will not be able to take them from the source file.

Please aim for consistency by using the same margins and paddings for similar elements across multiple pages. We prefer that you specify the main margins in px/pixels in your design notes.

We also prefer that you align the elements by the horizontal or vertical rulers so that elements of the same type or in the same level are organized.

Please avoid using too many guides. Only the main ones should be left in the design so that our markup developers can see the alignments and logical structures of the blocks.

Providing as much information as possible is greatly appreciated, especially when it comes to the following issues:

• when the elements are stretched in any way (width or height)
• when the background changes with a rollover or a click, or any other enhancements

Please do not rasterize and do not merge any transparent blocks (or blocks with shadows) with other elements as we will have to recreate them from scratch.

Please provide the styles for all necessary elements of the pages in the content. Some of these necessary styles include: H1-H6, <p>, <ul>, <strong>, <em>, default/hover/active links, quotes, and other HTML elements.

If you do not want your page to have a horizontal scroll bar under the resolution of 1024×768, please keep the width smaller than 1003 pixels.

When you create similar elements, please do not create them from scratch. Instead, copy them and then update them. This keeps minor differences between the same elements to a bare minimum. Using a well thought-out system in your layout will help your designs become clean and easily understandable.

Before completing design work, please consider that your website may be accessed from larger screens. The background should be completed clearly or have either a texture or design that can be easily tiled.

Layer Naming

When submitting your design, please organize your layers in the appropriate folders. For example, all elements for the header should be in the folder titled “header,” all elements for the content should be in the “content” folder, etc.

Please place each widget or block in a separate group. We recommend identifying those groups by the widget or block title.

Please use the title “rollovers” for hover states. All hover and active states should be separated into a group that can be easily switched on and off. Such groups should be located near the corresponding elements so that a developer could easily visualize the requested styles.

If the hover states for the menu elements are different for different elements, please design all of them.

This list is a living document so please check back frequently for other tips to make your GetDevDone experience a pleasant one.

Last updated: November 4, 2010