There are a few things to look for before you export your Output to ensure you get a pixel-perfect render that looks 100% like your PSD.

Check Your Design

Export Kit will render WYSIWYG (What You See Is What You Get), so your PSD design should look like what you expect in the output.

1. Your Output Layer Order

The Export Process is a Bottom-Up process. This means Export Kit works how you would naturally create designs in Photoshop without changing your design style. Each layer is processed starting from the last or bottom layer (typically the “Background” layer), then up.

Simple Layers

Complex Layers

Organize Folders and Layers

It is important to organize your folders to target your respective output environment. There are situations where incorrect folders or layers can cause unwanted display errors in the output.

Read more about Organizing Folders and Layers.

2. Photoshop vs. Output Rendering

Photoshop and Output environments each render differently and will display object differently. Photoshop has much better support for blending, effects and graphic processing than most Output environments.

They say you can get "Photoshop-like" effects in HTML5, note the "like"!

3. What You See Is What You Get

Follow our PSD Design Rules to ensure your Output has correct dimentions and positioning.

There are situations where a designer may draw a text area, or copy another text layer with a fixed size. If the text layer (or any layer) spans beyond the document size, Export Kit will assume that’s what you wanted.

Normally when we reach the end of the document, we expect all scrolling to stop. If you have layers that are outside the document area, and you do not have Hide Overflow enabled, your content will have unexpected behavior.

Relative Element Sizes

Your elements should only be the required size, consider a developer may have to use the object after.

• DO NOT scale text
• Take care with elements that bleed OUTSIDE the document canvas

4. Layer Names Are Important

Many environments do not support incorrect layer names, mostly those that start with numbers- (see layer naming rules).

tablet 780 - CORRECT 

780 tablet - INVALID 

Use Unique Names

Export Kit will do its best to convert each layer to a unique name to prevent visual errors in the output, but you should also note your layer names and do your best not to duplicate names.

COMMON BUGS DUE TO NON-UNIQUE NAMES:
1. Incorrect images in the output
2. Elements in the wrong place
3. Elements not visible
4. IDEs complain elements "already exist"

Check Your Layer Tags

You should read the Layer Tags Crash Course before using tags. Some Layer Tags are complex in nature and require specific settings to generate the correct output.

IMPORTANT: some Layer Tags are designed for specific layers only, and will cause an error in the output if not correctly used, read our Layer Tags Crash Course.

4. Check your Links

• Is your link url valid:

  ${link:/my/server/path/} - CORRECT

  ${link://myserver.com/my/page.html} - CORRECT

  You can always test first by entering the link url in your browser

• Your link url DOES NOT contain a space, ” “

  ${link:my page.html} - INVALID

• Your Link Tag is on a layer NOT a folder

5. Check your Pages

We strongly recommend you read our guide when you Create Multiple Pages to prevent common visual errors in the output. Multiple Pages are an advanced concept and require a specific folder structure to correctly render as expected.

• You MUST enable Page Tags:

  

• You MUST have an index page:

  ${page:index}

• Is your page url valid:

  ${page:contact} - CORRECT

  ${page:about_us} - CORRECT

• Your page url DOES NOT contain a space, ” “

  ${page:about us} - INVALID

• Your page url DOES NOT contain a file extension, “.html “

  ${page:contact.html} - INVALID

• Your Page Tag is on a folder NOT a layer
• You DO NOT have empty page folders
• Your HEADER and FOOTER folders are OUTSIDE your page folders
  (they are not child folders)

6. Check your Responsive Screens

We strongly recommend you read our guide when you Create Responsive Screens to prevent common visual errors in the output.

• You MUST enable Responsive CSS:

  

• Did you create a ${css|screen:default} folder (Not required for Android)
• Did you name your screens correctly (see layer naming rules):

  ${css|screen:780} tablet 780 - CORRECT 

  ${css|screen:780} 780 tablet - INVALID 

• Did you include ALL elements in EACH SCREEN

Ready To Export

Once you have your Export Kit Settings ready, click Export Now – then watch the magic!