Loading...

PSD to HTML Crash Course

PSD to HTML conversion translates layers in your PSD to HTML elements with CSS support. If you export a basic PSD to HTML website, there very few options required to get a pixel-perfect translation.

Although your PSD to HTML conversion is a quick and simple process for a basic HTML website, most modern websites require common features such as CSS3 effects, responsive CSS and scripting support – Export Kit does it all!

IMPORTANT: This tutorial assumes you are using YOUR custom PSD that was created prior to using Export Kit, this tutorial will show you steps to map your PSD to HTML design to get a perfect PSD to HTML export.
NOTE: This tutorial assumes you DO NOT want advanced options or features, if you do then you should read our Advanced Export tutorials.
Read our step-by-step tutorial to Convert your PSD to HTML for full details + all features and options to convert your PSD to HTML.

Step 1: Organize your Content, Bottom-Up

Regardless of the project requirements, you should always organize your PSD layers in folders/groups. Because the export process works bottom-up with layers, you should ensure your layers reflect your project – header, footer and content folders.

See PSD Design Rules for more information.

Step 2: Use Correct Layer Names

Export Kit will correct layers names to ensure an accurate conversion, but there are situations where incorrect layer names will cause unwanted display errors.

DO NOT start layer names with numbers, eg. "123-456-7890", change the name to "phone number" - learn more
USE UNIQUE NAMES - learn more
See Layer Naming Rules for more information.

Step 3: Use Smart Objects

We do not currently support adjustments, complex shapes and vectors (coming soon), the quick solution is to convert the layer or folder group into a Smart Object.

Smart Objects will translate to an image, use our Obj Tag to convert the contents of the Smart Object during the export.

Step 4: Export Options

Export Kit gives you many options for delivering your project output as both a demo and a finished product.

For a quick export or client preview - press Export Now - great for when client ask "can I see how it looks so far?".

Relative Positions (Clean Code)

*Recommended*

You must enable Relative Positions to translate your folders and keep content in a parent-child relationship.

Inline Code Styles

1
<img src="../skins/sample_123/bg.png" id="bg" style="top:58px;left: -410px;width: 2003px;height: 797px;" />

Some project require CSS styles directly in the HTML elements, to do this you must enable Inline Content in your options.

Effects and Styles


You must enable Layer Effects to translate your PSD layer styles into CSS3 elements.

If your PSD design uses layer styles, then we strongly recommend you enable Layer Effects otherwise you may have display errors with some effects - learn more

Align Your Look and Feel

You can use Align Output and Hide Overflow to customize your look and feel with Flush and Fluid layouts.

Step 5: Export that Kit!

Once you have your settings ready, click Export Now.

Read our step-by-step tutorial to Convert your PSD to HTML for further details and a full list of the features and options we support for PSD to HTML.

Optimize Display Errors

All PSD designs are unique, but we have collected 100s of PSD files sent to us by users and compiled a list of the most common errors/fixes.

We recommend reading our Optimization Tips to ensure your designs export 100% pixel-perfect!
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