Follow these steps and your output should look 100% like your PSD:

1. Use Common Layer Names

Be careful when using text layers with invalid names. Photoshop by default will use the contents of the text layer as the layer name, you will have to manually change this to ensure the layer will process correctly.

Tip: Layer names should start with a letter - read more

2. Split Your Design Into Layers

We strongly suggest that you use as many layers and folders a possible to create design elements. When designing a layout, its easy to use Photoshop to create a single text block that contains all the information you want to display, and then style that text block.

As a designer you can create a single text block in your PSD with styles, but as a developer you would need 4 objects:
(a) title
(b) date
(c) description
(d) read more link

In a live production environment, the developers would have to deal with each object individually, not as one text block. You should split your text layers (and graphics where applicable) into individual object so they are easier to work with in the output.

Consider you may need to add a link to the "read more" element.  If you add a link to a single text block, then the entire text block will become a link - where you only wanted the "read more" element.

3. Size Your Elements Accordingly

As a designer it is very easy to draw elements anywhere on the screen. There are cases where the size of the element may not affect the PSD visually, but in the output the code will cause unexpected rendering.

This mainly effects outputs with Dynamic Height enabled - including Responsive CSS

4. If all else fails, use Fail Safe Images

When individual layers do not render correctly, its best to use a fail safe image first to get a full render - then debug and fix the layers causing the issues.

Use fail safe image when:

Importing from Illustrator - read more

Using polygons or vectors

Using layer masks

Added August 13, 2014 4:04 pm