Loading...

Testing with the PSD Templates

Before you begin your Export Kit journey, we strongly recommend you test our PSD Templates to both see how you design should be organized, and to test how your design renders in your respective environment.

We have a large collection of PSD Templates and cover many different features and aspects of Export Kit. Our PSD Templates will demonstrate all aspects of converting your design, from fundamentals to high-level concepts.

Download all PSD Templates to get started.

Shapes

With normal exports you will get native shape elements, but web-based outputs offer additional support for dynamic CSS classes with shapes.

Support: 101 Shapes
Vectors: 104 Vector
Effects: 301 Shape Effects
Blackout Bug: 401 Blackout Bug
CSS Support: 510 CSS Styles

Text and Fonts

All environments support native text elements, but all environments also render both text and fonts differently.

Support: 102 Text
HTML Links: 103 Auto Text Links
Font Style Bug: 402 Font Style Bug
Native Render Bug: 403 Native Render Bug
CSS Fonts: 201 CSS Fonts
Text Rendering: 202 Font Text Rendering
Effects: 302 Text Effects
Paragraph Styles: 512 Paragraph
Line Height: 513 Paragraph Line Height
Language Characters: 519 Char

CSS

Export Kit has a powerful CSS rendering engine which supports many advanced CSS features and options for dynamic styles. CSS styles can quickly encompass many layers to create the perfect style sheet – this is normal.

Effects: 303 Layer Effects
Styles: 509 CSS Styles
Themes: 510 CSS Styles Advanced
Selectors: 511 CSS Selectors
Bootstrap: 516 CSS Bootstrap
Image Patterns: 523 CSS Image Patterns

Web Forms

Web forms have many uses, but almost always require a server-size script to process the form data. Try the PSD Templates and follow our guide to Create Web Forms.

Support: 505 Form
Input: 506 Input
Input Styles: 517 Input Styles
Form Handler: 604 Form Handler

Design and Layout

You can export any PSD to your selected environment but depending on your project requirements, your PSD may require layer organization. Ensure you follow our PSD Design and Layer Naming rules.

Single Page: 602 Webpage Fixed
One Pager Website: 701 One Pager

Multiple Pages

Multiple pages require layers and folders to be organized following our guide for Creating Multiple Page and Files.

Layer Tag: 504 Page Tag
Multi-page Fixed Height: 702 Multi-page Fixed
Multi-page Dynamic Height: 802 Multi-page Dynamic

Responsive Screens

Responsive requires layers and folders to be organized following our guide for Creating Responsive Target Screens.

Layer Tag: 508 CSS Screen
Responsive Page: 801 Webpage Responsive
Responsive Multi-page Website: 803 PSD to HTML5

WordPress

WordPress is an advanced export and will require layers and folders to be specific and organized following our guide for Creating a WordPress Theme.

Complete Theme: 1001 WP Blue Box
One Pager Theme: 1002 WP One Pager
Responsive Theme: 1001 WP Responsive Theme
Basic WordPress: All Basic WordPress PSDs

Android

Android UI requires layers and folders to be organized following our guide for Creating an Android UI App.

Multi-activity App: 1101 Android Res
Multi-screen App: 1102 Android Screens
Widgets: 1103 Android Widgets

High-level Concepts

Raw HTML/CSS/PHP/JavaScript: 514 Code
Design Modules: 515 Obj
Custom Elements: 518 Class
Fixed Menu: 521 Fixed Menu
CSS/JS Lightbox: 522 CSS JS Lightbox

Misc

Sprite Sheets: 205 Sprite Sheets
LOGIN NOW: Get instant access to our free Online Training - click here.

02. Using The Plugin

03. Layer Support

04. Basic Exports

05. Layer Tags

06. Optimization Tips

07. Complete Exports

DOWNLOAD NOW
🚀 Start saving time and money!