HTML Cheatsheet? or some in-depth videos?« Back to Questions List

Is there any in-depth video tutorials on how to get started with the HTML5 & Wordpress outputs? Or perhaps a cheatsheet to get you started with the HTML5 Commands & Wordpress Commands?
Asked by riius
Added January 28, 2015 2:46 pm

New PSD to HTML5 Manual

Try our new Comprehensive PSD to HTML5 Manual. Read this guide with full concepts, examples, guides, tips, tricks and more + you will become a Webmaster in the next 24 hours.

View the PSD to HTML5 Manual Now

Posted by admin
Answered On October 7, 2015 1:44 pm #

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: http://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: http://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: http://exportkit.com/learn/video-tutorials/beginner-videos/convert-psd-paragraph-styles-in-html
P Tag: http://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: http://exportkit.com/plugin/environments/html5/add-google-fonts-to-html5
Video: http://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: http://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:http://google.com}
-- <a href="http://google.com" />
folder: ${class|a:href="http://google.com" title="google link"}
-- <a href="http://google.com" title="google link" />
[link tag]: http://exportkit.com/plugin/layer-tags/basic-layer-tags/link-tag
[class tag]: http://exportkit.com/plugin/layer-tags/advanced-layer-tags/class-tag

<p>

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

<span>

(layer tag)
layer: ${p}
folder: ${class|span}
-- <span />
[p tag]: http://exportkit.com/plugin/layer-tags/basic-layer-tags/p-tag
[class tag]: http://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: http://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]: http://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]: http://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]: http://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]: http://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: http://exportkit.com/plugin/environments/css/add-css-rollover-hover-effects

Custom CSS Styles

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

Bootstrap 3x

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

Pseudo Classes

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

CSS3 Theme Engine (advanced)

Video: http://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: http://exportkit.com/plugin/environments/html5/using-external-files-with-html5

Customize HTML Content

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

Inline Code (HTML, CSS, JS, PHP)

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

Tutorial: http://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: http://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: http://exportkit.com/learn/how-to/advanced-guide/building-web-forms

Nav Menus

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

Static Menus

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

Dropdown Menus

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

JavaScript/jQuery Slideshow

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

Lightbox Popup

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

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

Tutorial: http://exportkit.com/plugin/environments/html5/add-media-audio-video-swf-to-html5
Vimeo (and others): http://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...]

Posted by admin
Answered On January 29, 2015 6:53 pm #

Hi Riius,

This is a great request and we are in the midst of creating one. We will use this page as the ”Unofficial Cheat Sheet” until we complete the actual page.

[Info to come...]

Posted by admin
Answered On January 29, 2015 4:42 pm #
Asked by riius
5447 views
3 answers
Last Answered 1 year ago by admin

Categories

Recent Answers


Post your Answer

Login now to post your answer to this question - click here.