Documentation

Read the documentation carefully to get the best results.

Contents

PSDtoHTMLCSSConverter common behaviors

HTML classes

Every Photoshop layer is converted to an HTML tag based on the type of layer (for example, shapes and groups are converted to <div>, texts are converted to <p> or any alternative tag, and images are converted to <img>). The names of layers are used as the classes of those HTML tags. But there is an exception. The image layer names are used as the name of the image while saving the image file and a unique class generated by the system is attached to the <img> tag.

HTML structure

While PSDtoHTMLCSSConverter's smart algorithm can logically reorder layers to generate correct HTML structure it is highly recommended to group layers logically like how HTML tags are nested. Here is a simple example. Look at the following image:

HTML structure
Example 1

Even the order of the layers inside the "Feature" layer group is incorrect from the HTML structure perspective (for example, the "Digital Marketing" layer is coming first out of all other layers while it is after the "Ellips" layer in the design) PSDtoHTMLCSSConverter generates the following correct HTML tags order:


                   
               

Backgrounds

PSDtoHTMLCSSConverter accepts the layer which height and width equal to or greater than its parent layer group height and width as the background of it. And PSDtoHTMLCSSConverter copies all styles of the layer that accepted as background to its parent layer group and skips it while generating HTML code. For example, look at the "Example 1" image and the generated code above. You can see the "Background" layer is missing in the generated code and its styles are copied to the "Feature" layer group. If the background layer height or width is less than it is parent height or width and you still want it to be a background, then just attach ".bg" hint to its name. To know more about hints click here.

Layers visiblity

PSDtoHTMLCSSConverter just skips the layers that visibility is hidden while generating HTML and CSS code.

Images

Complex image with multiple layers

Sometimes multiple layers are used to represent a single image (or illustration). To save all layers as a single image just convert all layers which are used to represent the image to a single "Smart Object".

Images with masks

Sometimes images are masked with another layer. You can see only a certain area of the image is visible but actually, the image size is much bigger than it appears in the design. Look at the following image, the image layer selected and in the design the Photoshop "Move" tool is showing how big it really is. To save only the visible area of the image within the mask just convert the image and its mask to a single "Smart Object". If you do not convert images that have masks it may also cause some incorrect HTML code generation.

HTML structure
Example 2

Semantic HTML tags

You can tell PSDtoHTMLCSSConverter to convert a certain layer to a certain HTML tag by attaching a hint to the layer's name. For example, if you attach the "section" hint to the "Feature" layer group (shown in "Example 1" image) it will be converted to a <section> instead of <div> and its name will be "Feature .section". Hints should always be prepended with a "." and it does not matter if you attach a hint at the beginning, in middle, or at the end of the layer name. Here is the list of currently available hints:

  • article - converts to <article> tag.
  • aside - converts to <aside> tag.
  • details - converts to <details> tag.
  • figcaption - converts to <figcaption> tag.
  • figure - converts to <figure> tag.
  • footer - converts to <footer> tag.
  • header - converts to <header> tag.
  • main - converts to <main> tag.
  • mark - converts to <mark> tag.
  • nav - converts to <nav> tag.
  • section - converts to <section> tag.
  • summary - converts to <summary> tag.
  • time - converts to <time> tag.
  • h1 - converts to <h1> tag.
  • h2 - converts to <h2> tag.
  • h3 - converts to <h3> tag.
  • h4 - converts to <h4> tag.
  • h5 - converts to <h5> tag.
  • h6 - converts to <h6> tag.
  • ul - converts to <ul> tag.
  • ol - converts to <ol> tag.
  • a - converts to <a> tag.
  • button - converts to <button> tag.
  • form - converts to <form> tag.
  • text - converts to <input type="text"> tag.
  • email - converts to <input type="email"> tag.
  • password - converts to <input type="password"> tag.
  • checkbox - converts to <input type="checkbox"> tag.
  • radio - converts to <input type="radio"> tag.
  • file - converts to <input type="file"> tag.
  • submit - converts to <input type="submit"> tag.
  • textarea - converts to <textarea> tag.