You can create custom PSD to CSS3 classes and styles directly in your Photoshop document. Export Kit will translate your parent-child relationship in your folders, to give you full control over your PSD to CSS classes in your output.

Your PSD to CSS3 Class Styles can be used to customize run-time designs to add different styles and effects, themes and skins, reusable images, and more.

Step 1: Create a Basic Element

Create a shape or text layer.

CSS classes in your PSD are applied directly to your Photoshop layer elements regardless of the layer type. This allows you to create global PSD to CSS styles that you can apply to any element in your HTML output.

Our CSS Styles Folder supports all HTML and CSS elements - beyond those found in Photoshop.  

You can customize the CSS style for any external CSS Library by using the CSS class name as the layer name in your CSS Styles Folder.

K.I.S.S. Basic

We support wireframe designs also to map your class elements.

Keep the basic design of your PSD layers simple. We support full Photoshop wireframe designs, as you do not need to add additional styles or effects to the element.

NOTE: All element styles will override with the CSS class style.

Step 2: Create Your Styles Group

Add layers to your ${css|styles} folder to create custom CSS classes based on the layer. All layer will maintain effects and styles in the output.

You should use "_" (underscore) with layer names and NOT " " (space).  CSS classes will output following our Layer Naming Rules.

Keep your styles visible in your PSD document so the end-designer can see what options they have in the output, and skip any labels or guides with ${skip} tag.

CSS Styles Folder

Your ${css|styles} folder will contain all the custom CSS class styles to reuse in your document. All elements added to this folder will render as a CSS class in the output using the element name, styles and effects.

Reuse Images

Make sure you have CSS Images enabled if you want to use custom CSS class images.

You can reuse the same image class an unlimited number of times in your PSD design and Export Kit will load only one image.

Step 3: Add Your Custom Style

Use ${css|style} tag with your basic element in Step 1 to customize your element. You can now use your custom CSS style anywhere in your PSD document and Export Kit will translate the custom class to that element.

Note: The name you use with your layer element, is the same name you should use with your custom style.  

Eg. If your custom CSS class name is blue_glow then your CSS style tag should be ${css|style:blue_glow}.