Beginner Guide


With Export Kit you can use any PSD design to generate your HTML5, CSS3, JavaScript, Android UI or WordPress project. There are a few rules to follow when creating your design – and changes required if you are using Free PSD Templates you find online.

Free PSD Templates

Be aware that many Free PSD Templates found online are DESIGNS ONLY, and are not structured or organized for web exports.

Read more about getting the output to look 100% like the PSD.

Working with Illustrator

If you convert your .AI document to a .PSD using a script, it is likely that your document will have a lot of layers named Clip, Group or Path.

Learn how to convert illustrator objects in your PSD to ensure you document renders as expected.

Layer Effects

Layer Effects will enhance your Output with additional rendering features in your output. You can add layer effects to any Photoshop layer element and Export Kit will render the effect directly in your output environment.

Read more about Layer Effects.

Layer Tags

Layer Tags offer additional support with your Output to make your design responsive, multi-page and dynamic in size. Layer Tags are custom names you can apply to layers in your PSD.

Read more about Layer Tags.

Using the Export Kit plugin

Export Kit is an advanced plugin for Adobe Creative Cloud. We recommend you read our tutorials on Using Export Kit Suite to learn how Export Kit works and how to use it with your projects.

Read more about Using Export Kit Suite.

Beginner How-To Videos

Considering you are new to Export Kit, watch our YouTube web series to learn what to do “Before You Export Your PSD”.

YouTube Web Series

Before You Export Your PSD (8 Videos)

Step-By-Step Tutorial Videos

Learn all you need to know before converting your PSD output. These videos will teach you about the standard support that comes with Export Kit and how layers, effects and folders are handled.

Watch more Video Tutorials.

PSD Design Rules

Considering you want to convert your PSD, we can assume you have your Photoshop design handy. Export Kit takes the headache out of the export process and will save you lots of time and budget […]

Layer Naming Rules

These are the general Layer Naming rules to follow: Rule 1: Use Clear Layer Names Your layer names will be reflective in your Output environment. Because Export Kit will render WYSIWYG (What You See Is […]

Using External Files with HTML5

Because Export Kit allows you to customize your HTML5 Content before export, you can add both custom CSS and JavaScript. This can further enhance your Output to incorporate your existing code. NOTE: All layer names […]

Add Google Fonts to HTML5

Google Fonts are very common in website designs and are often used as they are widely supported by many browsers. Export Kit makes it easy to add Google Font to your PSD design. You can […]

Before You Export Check List

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. Read our Optimization Tips to get detailed examples of […]

Create a Navigation Menu

Export Kit makes PSD Navigation Menus and links a simple task. Nav Menus are a group of anchor links used to direct users to both internal and external pages. Nav Menus are involved in all […]

WP Theme Development Crash Course

The PSD to WordPress Theme development crash course will help you gain a better understanding of WordPress themes with both your Photoshop PSD design and your WordPress theme output. This guide will explain how Export […]

The WordPress Loop

The WordPress loop is a list of all, or a limited number of post/page entries in the database. WordPress will generate content from the database based on your supplied theme page, or using the default […]

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 […]

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 […]

Create SVG Filters for Illustrator

Convert your PSD layers to Illustrator SVG filter effects. Lightning Storm makes SVG filters and effects for Illustrator a breeze with support for complex Photoshop layer effects to SVG with our exclusive Filter Flow Technology. […]

Create Reusable Design Elements

Export Kit offers the ability to easily create reusable design elements for any project using native Photoshop Smart Objects. Smart Objects allow you to create sub content directly inside Photoshop which you can edit/update outside […]

Custom WordPress Nav Menus

WordPress has great Navigation Menu support for pages, posts and custom links. WP Nav Menus are used in all theme designs and recommended as the content is controlled by the Admin, and not by the […]

AI Design Rules

Assuming you have your Illustrator design ready, Export Kit makes the natural export process quick and painless saving you lots of time and budget with your digital projects. IMPORTANT: These are the general AI Design […]

INDD Design Rules

Once you have your InDesign ready, Export Kit makes the natural export process quick and easy saving you lots of time and budget with your InDesign projects. IMPORTANT: InDesign designs will often require changes when […]

XD Design Rules

Considering you want to convert your XD, we can assume you have your Photoshop design handy. Export Kit takes the headache out of the export process and will save you lots of time and budget […]

Using the Plugin

How To Guides

Get a Free Export

Our Creative Team will export your project live and answer any questions you may have - 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

★ New XD Panel v200615 ★ - Update Now, Subscribe.