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.
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
