PSD to HTML Cheat Sheet

This will provide you with a quick guide to many common HTML, CSS, JavaScript and PHP functionality that you can do with Export Kit.

Image Options

This is a set of common image tasks we have found by users.

CSS Background Images

You only need to enable CSS Images and all your image tags will convert to div tags with background images.

Reusable Images (with additional image assets)

For single images, you need to both enable CSS Images and use our CSS Style Tag. You can then reuse the css class for the image anywhere.

Tutorial: //exportkit.com/plugin/environments/css/create-custom-css-class-styles-for-html5

Note: this will sill create additional assets per layer, but only use one file link

PSD Example: [ZIP FOLDER]\psd_example_files\05_advanced_layer_tags\ek126_509_css_styles.psd

Reusable Images (without additional image assets)

For single image assets, you need to use advanced CSS Styles with shapes rather than another image. Export Kit will use your custom class with the shape element to render your image.

Tutorial: //exportkit.com/learn/video-tutorials/advanced-videos/psd-to-css3-styles-and-themes

Note: Because it’s a shape, no additional assets will be used

Note: This also allows you to create your designs from Wireframes and basically add classes at runtime to render your content

Text Options

This is a set of common text options we have found by users.

Keep Paragraph Formatting

You will need to use our P Tag with your text element to maintain its inner style and formatting. This will create a div and span elements with inline styles.

Video: //exportkit.com/learn/video-tutorials/beginner-videos/convert-psd-paragraph-styles-in-html

P Tag: //exportkit.com/plugin/layer-tags/basic-layer-tags/p-tag

Adding Google Fonts

You can add Google Fonts directly in Export Kit by customizing your HTML Head or you can add it as a dynamic module to include in any project (advanced).

Tutorial: //exportkit.com/plugin/environments/html5/add-google-fonts-to-html5

Video: //exportkit.com/learn/video-tutorials/advanced-videos/virtual-scripts-for-html-css-javascript-php

Mask & Vector Options

None. Currently Export Kit v127 does not support Masks, Vectors or Complex Shapes. Support for these elements will come shortly in a future Lightning Storm release.

You must do one of the following:
(1) Rasterize the element(s)
(2) Convert the element(s) to a smart object
(3) Add an ${img} tag to the element(s)

Tutorial: //exportkit.com/answers/can-i-import-from-illustrator

Base Element Tag Options

This is a set of common element tags Export Kit supports by default.

<div>

(natural)
note: all folders, shapes and css images convert to div tags

<img>

(natural)
note: all images, smart objects, and rasterized layers convert to img tags

<a>

(layer tag)
layer: ${link://google.com}
-- <a href="//google.com" />
folder: ${class|a:href="//google.com" title="google link"}
-- <a href="//google.com" title="google link" />
[link tag]: //exportkit.com/plugin/layer-tags/basic-layer-tags/link-tag
[class tag]: //exportkit.com/plugin/layer-tags/advanced-layer-tags/class-tag

<p>

(layer tag)
folder: ${class|p}
-- <p />
[class tag]: //exportkit.com/plugin/layer-tags/advanced-layer-tags/class-tag

<span>

(layer tag)
layer: ${p}
folder: ${class|span}
-- <span />
[p tag]: //exportkit.com/plugin/layer-tags/basic-layer-tags/p-tag
[class tag]: //exportkit.com/plugin/layer-tags/advanced-layer-tags/class-tag

Extended Element Tag Options

You can further customize your output with any HTML5 element using our Class Tag with your folders. All elements support custom properties so you can map them any way you like.

Class Tag: //exportkit.com/plugin/layer-tags/advanced-layer-tags/class-tag

Note: You can create ANY element including iframe, canvas and object, the following are just examples.

<ul>

(layer tag)
folder: ${class|ul:class="menu nav"}
-- <ul class="menu nav" />
[class tag]: //exportkit.com/plugin/layer-tags/advanced-layer-tags/class-tag

<li>

(layer tag)
folder: ${class|li:class="nav nav-item"}
-- <li class="nav nav-navitem" />
[class tag]: //exportkit.com/plugin/layer-tags/advanced-layer-tags/class-tag

<table>

(layer tag)
folder: ${class|table:id="mycart" class="items cart-items"}
-- <table id="mycart" class="items cart-items" />
[class tag]: //exportkit.com/plugin/layer-tags/advanced-layer-tags/class-tag

<section>

(layer tag)
folder: ${class|section:role="content" data="val1"}
-- <section role="content" data="val1" />
[class tag]: //exportkit.com/plugin/layer-tags/advanced-layer-tags/class-tag

CSS3 Options

You will need to use both our CSS Style layer tag and CSS Styles folder tag to create custom class styles for your PSD.

Button States

Tutorial: //exportkit.com/plugin/environments/css/add-css-rollover-hover-effects

Custom CSS Styles

Tutorial: //exportkit.com/plugin/environments/css/create-custom-css-class-styles-for-html5

Bootstrap 3x

Tutorial: //exportkit.com/plugin/environments/css/psd-to-bootstrap-3x-css-child-themes

Pseudo Classes

Video: //exportkit.com/learn/video-tutorials/advanced-videos/psd-to-css3-pseudo-classes-and-selectors

CSS3 Theme Engine (advanced)

Video: //exportkit.com/learn/video-tutorials/advanced-videos/psd-to-css3-styles-and-themes

Adding External Files

You can add both links to external files or the code content directly in Export Kit and render your entire project, all from Photoshop.

External Links

Tutorial: //exportkit.com/plugin/environments/html5/using-external-files-with-html5

Customize HTML Content

Tutorial: //exportkit.com/plugin/environments/html5/html5-content

Inline Code (HTML, CSS, JS, PHP)

This is for text layers only, use ${code} tag.

Tutorial: //exportkit.com/plugin/layer-tags/basic-layer-tags/code-tag

External Components, Plugins, Modules and Scripts

Using external/internal files with your PSD can further extend your output functionality beyond only Export Kit. An example of this is animations or fixed menus. By nature, the current version of Export Kit does not support these features. But adding the code externally/internally and using our CSS Styles or Class tags, you can easily add additional functionality to your PSD.

These are common "extras" users ask for, ask us for more!

CSS / JavaScript Animations

Steps:
1: Add your code externally/internally
2: Add your required elements based on the code
-- eg. if JavaScript is looking for a layer named "slideshow", add a layer/folder and name it "slideshow"
-- eg. if the CSS animation is looking for a class called "ball-bounce" and "bat-swing", add layers named "${css|style:ball-bounce} my ball" and "${css|style:bat-swing} the bat"
-- refer: Layer Naming Rules

Full Screen Backgrounds

Tutorial: //exportkit.com/learn/how-to/advanced-guide/create-a-full-screen-background

Web Forms and Inputs

Note: this requires a server-side script, or Ajax (for web) to process the data.

Tutorial: //exportkit.com/learn/how-to/advanced-guide/building-web-forms

Nav Menus

Tutorial: //exportkit.com/kits/export-kit/export-kit-tutorials/create-a-navigation-menu

Static Menus

Tutorial: //exportkit.com/answers/can-i-create-a-static-menu-that-stays-on-top

Dropdown Menus

Tutorial: //exportkit.com/plugin/environments/html5/create-a-pure-css-dropdown-menu

JavaScript/jQuery Slideshow

Tutorial: //exportkit.com/plugin/environments/html5/instant-psd-to-javascript-or-jquery-slideshow

Lightbox Popup

Tutorial: //exportkit.com/answers/can-i-create-a-css-javascript-lightbox-popup

Media Elements (youtube, video, audio, etc.)

Tutorial: //exportkit.com/plugin/environments/html5/add-media-audio-video-swf-to-html5

Vimeo (and others): //exportkit.com/answers/can-i-add-vimeo-videos-similar-to-youtube

Does WordPress include these features?

Yes! Anything you can create in HTML5 works equally with WordPress.

[Responsive info to come...]