Loading...

Organize Folders and Layers

You Photoshop folder and layer structure is key to all designs as different environments have different requirements. There are situations where incorrect folders or layers can cause unwanted display errors in the output.

It is important to plan your design and follow our guides related to your target environment.
Read our guides to learn how to export Multiple Pages and Responsive Screens.

Single Page View

If you are exporting a basic design WITHOUT additional Output Options, then there are not many rules to follow.

Basic designs convert as-is.

All designs should follow our PSD Design and Layer Naming rules to ensure your design has standard elements. Regardless of the your personal design, all designs should generally have a [HEADER], [CONTENT], and [FOOTER] folder – with an optional Background layer.

Background layers should be bottom most layer in your PSD.

Static Multiple Pages

If you are exporting a multi-page design WITHOUT Dynamic Height, then you can place your background normally.

Background layers should be bottom most layer in your PSD.

It is important to organize your [HEADER], [CONTENT], and [FOOTER] folders with pages and ensure your page contents are in their respective folders.

Dynamic Multiple Pages

If you are exporting a multi-page design WITH Dynamic Height, then you must place your background layers respective to their containers.

Your [HEADER], [CONTENT], and [FOOTER] folders will EACH require an individual Background layer.
QUICK ERROR FIX: If your output does not look right with Dynamic Height, wrap all your content in respective folders - eg. [HEADER CONTENT], [BODY CONTENT], and [FOOTER CONTENT].

Relative Backgrounds

Dynamic Height will measure each Level 1 layer in the output, if you do not place your layers correctly inside folders – you WILL have unexpected display errors.

Responsive Target Screens

All Responsive Designs are similar to Dynamic Multiple Pages with additional conditions.

1. All content including pages must be placed inside your screen folder, or they will be considered static
2. You MUST have the same folder/layer structure in ALL screens
3. DO NOT change the names of layers in different screens
LOGIN NOW: Get instant access to our free Online Training - click here.

Using the Plugin

How To Guides

Help Us Improve


We aim to keep our content relevant with useful information, examples, samples and links. Tell us what you think!

I found the content:

Helpful
Confusing
Outdated
Broken Links
Bad Spelling
Too Short
Too Long

This page needs:

Nothing
Better Content
Links
Examples
Videos

Free Download


Cheat Sheet

A full sample of our support for text, shapes, images and effects.

Start Your 14 Day Free Trial

Get instant access to your 14 Day Free Trial and Free Online Training. We guarantee your first conversion will 100% work - we work with you to ensure this, Contact Us or check the Community FAQs for assistance.

Connect With Us