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: You need to login so your progress is tracked with Online Training - click here.

Products For Web Professionals


web_templates_2

Web-Templates 2.0

webmaster_pack

Webmaster

webmaster_pack

Webmaster (6 Months)

Need a custom solution?

Try our Shop!

Using the Plugin

Layer Support

Layer Tags

How To Guides

Optimization Tips

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


Responsive Multi-Page Website

A clean responsive website with multiple pages +target screens.

Start Your 14 Day Free Trial

New users get instant access to the 14 Day Free Trial with all features enabled, and Free Online Training. We guarantee your first conversion will 100% work - we work with you to ensure this, contact us or check our FAQs for assistance.

Connect With Us

Top
Lightning Storm version v17.0216.05 releasedLearn More