Read our Optimization Tips to get detailed examples of user cases and common errors/fixes.
Follow these steps and your output should look
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
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
Consider you may need to add a link to the "read more" element. If you add a link to a
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
Share Your Knowledge!
Contribute to the community and help other users to benefit from your answer with experience and knowledge.