Your Interactive Tool Belt

Convert a PSD To HTML5

Last updated on February 17, 2017

Convert a PSD to HTML5 in a few clicks. Export Kit makes PSD to HTML5 and CSS websites quick, easy and painless from any Photoshop PSD to provide advanced HTML and CSS features. In minutes you can have clean and valid PSD to HTML5 conversion from Photoshop using Export Kit.

By hand, the PSD to HTML5 export process can take a couple days for a simple design, and up to several months for a complex PSD to HTML5 design – who wants to work that hard, when you can work smart with Export Kit!

PSD to HTML5 exports have full CSS support for with layer effects with both text and shape elements. You can directly convert your Photoshop PSD to HTML and CSS using Export Kit in a few minutes. Advanced users can also add JavaScript and PHP support directly inside Photoshop using our Layer Tags.

Try our PSD to HTML Cheat Sheet for a quick reference to many unique features Export Kit supports with PSD to HTML and CSS conversion.

Step 1: Your PSD Design

Considering you want to convert your PSD to HTML5 we can assume you have your Photoshop design handy. Normally the task of converting a PSD to HTML5 can be a difficult one, requiring a basic level of knowledge for clean and valid code. Export Kit takes the headache out of the export process and will save you lots of time and budget with your web projects.

IMPORTANT: Use RGB color settings, this is the default for most environments - learn more.

Test As You Go

It is important to test your design as you go – do not make changes to the entire PSD – then export and wonder “what went wrong”. This is no different than a developer who codes an entire website (without testing and compiling), then opens the browser and wonders… “What went wrong?”

Using Free Online PSD Templates

With Export Kit you can use any Free PSD Template you find online to generate your HTML5 and CSS3 website. Free online PSD templates will require some changes to ensure a correct HTML5 web export that visually maintains its consistency with Photoshop.

Free is Not Always Easy

Be aware that many Free PSD Templates are DESIGNS ONLY, and are not structured or organized for web exports. It is impossible to tell how another Designer may design their layout but there are some common things you can do to ensure the PSD is usable.

Get the Output working first if you find Warnings and Errors

Remove empty folders and empty layers

Do not get complex with a free PSD until you have it visually stable

Group similar content and reorganize them as required

Re-draw bad text layers with the type tool, do not duplicate the text

Changes are Expected

Free online PSD templates will require some changes to ensure a correct PSD to HTML5 web export, that visually maintains its consistency with Photoshop. You will likely also want to include Layer Tags to make your PSD design responsive, add multiple pages and more.

Use Smart Objects Often

Use Smart Objects a lot, if you find an area in the PSD template causes errors, convert the element or the parent folder to a Smart Object – avoid the headache. Once your element is a Smart Object, you can reference the contents later in your export using Smart Object Tag.

Importing Illustrator .AI And Objects

You can easily cut-and-paste any Illustrator object into Photoshop and it will convert into a smart-object. Smart-objects will then render in the output as Smart Ojbect Images.

Illustrator AI Document

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. These are common Illustrator layers which you will need to convert to ensure you document renders as expected.

NOTE: Once you convert these layers to a respected smart object, image or folder - your export will render 100% as expected.

TIP: You can (a) remove the link mask of elements, or (b) create a new folder and drag the contents of the Group to the new folder - then delete the old Group.

Step 2: Working With Layers

HTML5 goes hand-in-hand with CSS3 allowing for full Layer Support with web shapes and text in your Output. With web-based content, you may not always want to use an image for a background with a solid color; as this will cause unnecessary longer page-load times. You may not require a text image, considering new web-based font support for CSS3.

Export Kit has full support for images, text, shapes, folders and layer effects in Photoshop without Layer Tags. All functionality is built-in to Export Kit so… just be the creative you! All layers and effects supported work in most common environments.

Layer Output Order

The Layer Process (part of the export process) for Export Kit is a Bottom-Up process. This means Export Kit works how you would naturally create designs in Photoshop wihtout changing your design style.

NOTE: Each layer is processed starting from the last or bottom layer (typically the "Background" layer), then up.

When new layers or folders are added in Photoshop, the newly created element will be nested on-top of the currently selected layer. So if you were to create a website template, you would start with the Header, then Content, then Footer. You can naturally design and Export Kit will handle the rest.

Websites with a Fixed/Static Height

Changing your layer order will not affect your visual output when Dynamic Height is not enabled.

Websites with a Dynamic Height

Incorrect layer order will affect your visual output when Dynamic Height is enabled. This will stack your content similar to table rows, you will need to have the correct content folders in the correct order – or you will have display errors.

Use Clear Layer Names

Your layer names will be reflective in your Output. Because Export Kit will render WYSIWYG, you will need clear layer names to further customize your HTML or CSS after the export. The export process will convert layers regardless of their names, but having clear layer names will optimize the time it takes you to find your layer in your code.

Use Common Names For Elements

We recommend using common names for elements to both keep consistency with coding practices, and to make it easier on yourself to find elements in the code output.

IMPORTANT: When elements are clearly labeled, you can easily add scripts to manipulate objects in the output.

Header

Footer

Content

Section

Nav

Button

etc..

Use Valid Layer Names

You should always use valid and common layer names with your content to ensure readable output. When you use incorrect layer names, most environments will throw errors as not all naming conventions are valid.

Use Unique Layer Names

All code environments require elements with unique names for correct rendering. Export Kit will do its best to add a unique identifier to each element (if the element name was previously used), but this is not 100% guaranteed.

No Empty Layers

You cannot have empty layers in Export Kit, otherwise the export will stop on that layer.

A layer with no name

A layer with no image/shape

A text layer with no text

A folder with no child layers

You will need to (1) remove the layer from your PSD or (2) add content to the layer.

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. Organized designs also provide organized output, which is what your client wants!

IMPORTANT: We encourage you to use as many layers and folders to design your PSD as possible. The more layers the better! You should always group your layers into folders if they are related.

Content Blocks

Inner Content

Once your group your containers, go further by organizing your inner content into additional groups. This will result in much cleaner code.

Step 3: Layer Type Support

HTML5 goes hand-in-hand with CSS3 allowing for full Layer Support with web shapes and text in your Output. With web-based content, you may not always want to use an image for a background with a solid color; as this will cause unnecessary longer page-load times.

You may not require a text image, considering new web-based font support for CSS3. These are examples where shapes and text will come in handy as it “draws” on the webpage rather than loading external content; such as a large image.

IMPORTANT: It is impossible to create a webpage without using both shapes and text in a modern website, on the other hand HTML5 CANNOT process shapes or styles without CSS or SVG.

Shape Support

Export Kit has great Shape Support with optional vectors also. There are no special settings required for processing shapes, simply use the shape tool and choose your shape, along with your desired shape options; Export Kit will do the rest.

Google Font Autoloader Script v2

We have a custom JavaScript for adding Google Fonts to any project or website without additional dependencies. The script is open-source and free as air, so use it any way you feel. Once the script links are added, there are no other options to configure. Google fonts will now auto-load.

Step 4: Working With Layer Effects

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

NOTE: HTML5 and CSS3 DOES NOT support all Photoshop layer effects.

IMPORTANT: Depending on your effect and the angle, your element size may change to reflect the effect applied to the element - learn more.

Shape Effects

SVG Effects

Text Effects

HTML5 and CSS3 have poor text effects support for glow, stroke, and gradient fill.

Image Effects

All image layers are rasterized.

Step 5: Using Layer Tags

Layer Tags Tags are custom names you can apply to elements in your document to convert them to respective objects in each environment. Layer Tags are very powerful and allow you to enhance your interactive output with common environment elements out-of-the-box.

Skip Tag

${skip} - ALL LAYERS

This tag can be used on both layers and folders to skip the element from processing during the export. This tag is great for keeping notes or custom elements within your document, used for reference rather than output.

Image Tag

${img} or ${image} - LAYERS ONLY (NOT FOLDERS)

This tag will rasterize the contents of both layers and folders, converting the element to an image in the output. This will both save the image as the default image type and render the native environment image element.

NOTE: To render a folder as an image we recommend converting the folder to a Smart Object - learn more.

Link Tag

${link:[URL_ADDRESS]} - TEXT LAYERS ONLY

This tag will create a web link element, respective to the environment, to open a new browser page or tab – using the web address in the args. This tag is individually processed by each environment to open a web link only. The args must be a valid url, anchor or web script.

Paragraph Tag

${p} - TEXT LAYERS ONLY

When using this tag, all layer effects are rendered with each range of the text element as a span element in the output. The text ranges are converted to inline HTML styles and not in the CSS. Styles within a text block are just that – inline.

NOTE: Adding span styles to the CSS file is pointless, as you will likely use the style once.

Object Types

Form Tag

${form|[TYPE]:[URL_ADDRESS]} - FOLDERS ONLY

This will allow you to wrap the document folder contents into a Form element respective of the output environment. The Form element will enhance your interactive outputs adding the ability to build data-driven interactive applications from a single PSD file.

Code Tag

${code} - TEXT LAYERS ONLY

This tag will allow you to add raw code/script within the PSD Text Layer contents. You can draw any paragraph text layer in your PSD, but you should try to keep the size and position of your code layer relative to your design.

Page Tag

${page:[PAGE_NAME]} - FOLDERS ONLY

This tag allows you to create additional pages from your document based on the output type. The Page tag will accept an args value which it will use to create the new page. Great for use with the Link tag to connect content!

NOTE: You can export unlimited pages, but multiple pages will increase the export time.

CSS Screen Tag

${css|screen:[SCREEN_SIZE]} - FOLDERS ONLY

CSS Screen Tags give you the power to create responsive HTML5 and CSS3 websites from your PSD file. You can define multiple screen sizes to support any number of devices including desktop, tablet and mobile.

Common Screen Sizes

${css|screen:default} widescreen layout

${css|screen:1280} desktop layout

${css|screen:760} tablet layout

${css|screen:320px} mobile layout

NOTE: You can export unlimited screen sizes, but multiple screen sizes will increase the export time.

Align Your Look And Feel

Optimize your CSS

Export Kit has a powerful CSS rendering engine which supports pseudo, selectors, skins and themes. You can control any CSS library and custom Photoshop styles to reuse images, create custom templates from a single PSD and add states to elements.

Export Kit allows you to create wireframe designs and the custom skins for elements which are generated in the output.

Packaging For Clients

If your PSD design is for a client, we have a few features which can make your client very happy with the project package you deliver. Export Kit can generate all the assets your client will need to feel empowered when using/modifying your Output files.

Step 8: After You Export

All browsers and devices render content, objects and effects differently – this means you may have to tweak your output to meet your project requirements.

Test With: IE, Chrome, FireFox, Smartphones, Tablet, etc...

It also helps to see how each device and browser processes HTML and how each renders it’s elements.

Try our HTML5 Cheat Sheet for a quick reference to many of the unique features Export Kit supports with PSD to HTML and CSS conversion.

Things We Found While Testing

Export Kit is the ultimate PSD plugin… 😉

IE has the best font rendering

IE has the best form rendering

Chrome has the best css font support

IE has poor CSS3 support

IE fonts are smaller than others

Chorme font styles are wider than others

FireFox character styles are wider than others

If you want to test supporting all browsers and devices – go figure, download our Photoshop vs. Environment Rendering free PSD templates. This will give you all tools required to test all devices and browsers.