[null, {"document_url": "http://exportkit.com/kits/export-kit/export-kit-tutorials/psd-design-rules", "unformatted_src": "/resources/skins/misc/use_lots_of_layers.png", "src": "https://exportkit.com/resources/skins/misc/use_lots_of_layers.png", "formatted_filename": "use lots of layers"}, null, {"document_url": "http://exportkit.com/kits/export-kit/export-kit-tutorials/psd-design-rules", "unformatted_src": "/resources/skins/misc/group_similar_layers.png", "src": "https://exportkit.com/resources/skins/misc/group_similar_layers.png", "formatted_filename": "group similar layers"}, null, {"document_url": "http://exportkit.com/kits/export-kit/export-kit-tutorials/psd-design-rules", "unformatted_src": "/resources/skins/misc/background/psd_stacked_design.png", "src": "https://exportkit.com/resources/skins/misc/background/psd_stacked_design.png", "formatted_filename": "psd stacked design"}, null, {"document_url": "http://exportkit.com/kits/export-kit/export-kit-tutorials/psd-design-rules", "unformatted_src": "/resources/skins/misc/background/psd_layout_design.png", "src": "https://exportkit.com/resources/skins/misc/background/psd_layout_design.png", "formatted_filename": "psd layout design"}, null, {"document_url": "http://exportkit.com/kits/export-kit/export-kit-tutorials/psd-design-rules", "unformatted_src": "/resources/skins/misc/background/document_too_wide.png", "src": "https://exportkit.com/resources/skins/misc/background/document_too_wide.png", "formatted_filename": "document too wide"}, null, {"document_url": "http://exportkit.com/kits/export-kit/export-kit-tutorials/psd-design-rules", "unformatted_src": "/resources/skins/misc/background/content_margin.png", "src": "https://exportkit.com/resources/skins/misc/background/content_margin.png", "formatted_filename": "content margin"}, null, {"document_url": "http://exportkit.com/kits/export-kit/export-kit-tutorials/psd-design-rules", "unformatted_src": "http://exportkit.com/resources/skins/campaigns/convert-a-psd-to-html5/layer-processing.jpg", "src": "http://exportkit.com/resources/skins/campaigns/convert-a-psd-to-html5/layer-processing.jpg", "formatted_filename": "layer processing"}, null, {"document_url": "http://exportkit.com/kits/export-kit/export-kit-tutorials/psd-design-rules", "unformatted_src": "http://exportkit.com/resources/skins/v128/organize_layers_folders/exportkit_relative_content.png", "src": "http://exportkit.com/resources/skins/v128/organize_layers_folders/exportkit_relative_content.png", "formatted_filename": "exportkit relative content"}, null, null, null, null, null, null, null, null, null, null, null, {"document_url": "http://exportkit.com/kits/export-kit/export-kit-tutorials/psd-design-rules", "unformatted_src": "http://exportkit.com/resources/skins/kits/dropdown_menu_with_rollover.png", "src": "http://exportkit.com/resources/skins/kits/dropdown_menu_with_rollover.png", "formatted_filename": "dropdown menu with rollover"}, null, null, null, null, null, null]
Home   »   Posts   »   Learn   »   How To   »   Beginner Guide   »   PSD Design Rules

These are the general PSD Design Rules to follow, we also recommend you read: Getting the Output to look 100% like the PSD for pixel-perfect design tips.

Rule 1: No Empty Layers

You cannot have empty layers in Export Kit, otherwise the export will stop on that layer. Here is a list of empty layers:

Having any of these layers will cause Export Kit to cancel the export.

Rule 2: Use as many Layers as possible

We encourage you to use as many layers to design your PSD as possible. The more layers the better. The Export Process will translate each individual layer to its native type, so the more layers you use – the more control you have over the output.

Rule 3: Organize Layers into Folders 


What You See Is What You Get! If you zoom in to 100%, what you see in your PSD – is what you will see in the output. You should always build your default export first (what you expect to see), then customize your final output.

Read Getting the Output to look 100% like the PSD for additional tips.

Export Design 

Preview Print Design The best way to approach this is to avoid it! When designing for print or client preview, it is very easy to create a side-by-side layout to preview all content at once – this is a preview print design, and will export as-is.

PSD Document Too Wide Your document size should reflect the size you expect in your output. If you are creating a website and your target device is a desktop, then the size of your design should reflect your target screen.

Content Margin Space 

Rule 5: Layer Ordering is Important! Export Kit is a Bottom-Up process. This means Export Kit works how you would naturally create designs in Photoshop wihtout changing your design style. Each layer is processed starting from the last or bottom layer (typically the “Background” layer), then up. Read more about Organizing Folders and Layers.

Dynamic Layer Order 

Using the Plugin

How To Guides

Help Us Improve

Recently Updated Installation XD CC Using Export Kit with XD XD Design Rules Installation CC2015 – CC2019 Organize Content Blocks Batch Process Multiple PSD Files Maintain Responsive Layer Names Do Not Nest Pages Visual is Not Always Actual

Free Download Dropdown +Rollover Menus

Professional dropdown menus with full CSS rollover support.



Start Your 14 Day Free Trial












Are You An Export Kit Member?



Why Register with Export Kit?

Is Registration Free?

Enter Your Email to Download

Members can login now to skip this step.

Save Time and Money Lightning Storm CC Export Kit Suite

From Design to Interactive in Minutes

Select a tutorial to start your first export now. 14 Day Free Trial | Need Help?We use cookies! Save Time and Money!


The Ultimate Creative Cloud plugin

Work Smart not Hard

Go from creative to functional instantly

Prototype feature-rich apps Create Anything Digital

Web mobile and dekstop from your design

Get Started Now

instant access to your 14 Day Free Trial

We use cookies!