Documentation of the online PSD to CSS conversion service

On this page you will find how the online PSD to HTML Converter service works and a detailed description of all its capabilities. In couple of minutes you will get know how to easily make a web page and create your own web site almost for free.

Subtleties of Photoshop to CSS/HTML conversion

Please, be sure you know following subtleties of Photoshop layers. You will need it to use PSD to HTML Converter service effectively.

Photoshop layers always have a rectangular shape. Size of a layer is defined by size of its content. Some areas of the layer may be transparent. For example, layer that contains only single pixel has dimension of 1x1 pixel. Layer that contain two pixels, one at the upper left corner and another in the lower right corner, will be as big as the whole document (but all other pixels except these two will be transparent).
Layers may overlay each other. The Z-order of layers in the document is defined by their order in the layers palette. If one layer is higher than another layer in the layers palette then content of the first layer's will overlay content of the second layer. Z-order of Photoshop layers is preserved for CSS layers in the converted HTML layout.
If one layer overlays another layer, then the latter layer's content will not be accessible by mouse (you will not be able to press a link or select a text). So, avoid layers in Photoshop that cover text layers or layers that should be interactive elements (like links, input forms, etc.) in the resulting HTML/CSS page.
Layers can be organized into layers groups. They are displayed as folders in the Layers palette.
Size of the layer group area is defined by a rectangular area which covers all the layers of the group. Layer group is also a layer, so the same Z-order and mouse accessibility rules apply with regard to it.
To change a Z-order of layers simply drag and drop them in the layers palette or use shortcuts "Ctrl [" and "Ctrl ]".
To change a name of any layer double click the name in the layers palette. You will need that to assign tags (hints) to some of Photoshop layers in your design.
Do not use Ajustment layers in your design, they are not supported by the PSD to HTML Converter service.

Rules according to which we convert PSD template to the HTML/CSS markup

Layers visibility

Any Photoshop file consists of layers. Any HTML markup also consists of HTML/CSS layers. In the conversion process each visible PSD layer is transformed into HTML/CSS layer. Image layers are converted into HTML image blocks, text layers are converted into HTML text blocks.

HTML is quite reach language and CSS/HTML markup usually consists of not only text and images but also from links, various input forms, text forms, lists, tables and other HTML elements. For us to automatically create such HTML elements we need to have more information than the PSD template initially has. The greatest way to convey such information is to include a hint in the Photoshop Layer Name. In any Photoshop layer name, in any place of the name you can put one or more tags, which we will interpret in the way that is described below.

Creating HTML elements

If a layer or a Layer Group in the PSD layout has an "invisible" attribute then it will be skipped and will not fall into HTML/CSS markup. Thus, using the service of automatic PSD to HTML conversion you will always get what you see in the PSD template (WYSIWYG - What You See Is What You Get).

Each layer in the HTML/CSS layout will have the same name it has in the PSD template (although, without the tags, we will remove them from layer names). Also, you do not need to think about layers names uniqueness, we will care about it for you.

Complex images that consist of several layers

As we have mentioned earlier, each PSD template layer is transformed into separate HTML/CSS layer. If you are using (as most of the designers do) several Photoshop layers to represent one image (for example, you use 10 layers for one logo/background/etc.) it would be better if you convert them into one layer. Otherwise, you will get a lot of image layers in your HTML markup. That's redundant and not good for your website.
It is quite easy to deal with such a problem. You should choose one of two non-destructive methods:

Group these layers into one Layer Group and mark that group with the #merge tag. Such a group will be automatically merged into one layer in the process of PSD to HTML conversion.
Convert these layers into a single Smart Object. To do that select desired layers in the Layers palette and run "Layer" -> "Smart Objects" -> "Convert to Smart Object" command.

Following HTML5/CSS3 standards

Psd to html conversion if performed according to HTML5 and CSS3 standards.
You can see an example of CSS3 code generated for Flat Design UI Components.psd template. You can either download generated code or view the page. Note, that this markup serves only as example of generated CSS3 code. PSD template was not prepared correctly (it contains text layers which intersect with images), so generated structure has a lot of drawbacks.

Creation of CSS and HTML layout for text layers

All the text layers in your PSD layout will be converted into HTML/CSS text blocks in the final markup. In the conversion process we will try to save as much as possible of the following text and paragraph styles:

Font
Font size
Text color
Text shadow effect
Text alignment (left, centered, right, justify)
Space before the paragraph
Space after the paragraph
Line spacing
Subscript/superscript text
Text direction (LTR or RTL)

Service automatically embeds all (650+) Google web fonts.

Text that uses fonts that are not standard for WEB will be converted into an image with an alternative text set to the text of the Photoshop text layer. Service will generate a warning message if you use any non-standard fonts.

In case you want to convert layer with non-standard font into a text and then connect the font using @font-face directive than you should mark text layer with the #text tag. After conversion is finished do not forget to manually add @font-face to the css file generated by service. Note, that since on our server we do not have non-standard fonts then fallback to some standard font will occur and your layout may look broken on the generated preview.
In case you have many text layers with non-standard fonts you might want to use a "Convert ALL text layers to text" option for the PSD to HTML conversion.

For the Photoshop text layers it is allowed to use only the following layer effects (Blending Options):

Drop Shadow
Color Overlay

Only these effects can be converted to CSS. Text layers that use layer effect other than these will be converted into images.

To create headers of various nesting levels use tags #h1, #h2, #h3, #h4, #h5, #h6.

Size of area occupied by the text may vary in Photoshop and different browsers. For the precise control of text boundaries edit text layers in the "Paragraph Text" mode, not in the "Point Text" mode. In this editing mode you will be able to set the boundaries for the text. To change an edit mode right click on the text layer in the layers panel and choose the right option - either "Convert to Paragraph Text" or "Convert to Point Text".

Always set antialiasing of text layers to 'None'. CSS does not support antialiasing, that's why even in case if hand coding it is not possible to create a text of the same shape and size as the Photoshop text layer with antialiasing has.

Supported layer's tags

Tag is just a text mark in a layer or layer group name. Marking a layer or layer group with a tag tells the service that the layer should be converted into something more complex than an image or a text block. There are several ways to add tag to a layer:

prepend tag name with hash '#' sign, for example: #bg,
prepend tag name with minus '-' sign, for example: -bg.
enclose tag name with '$' signs, for example: $bg$.

Any layer or layer group in your PSD template can be marked with a tag. It is very easy to add a tag into a Photoshop design template. Just add a tag to any place in the layer's or layer group's name. For example, if you have a layer with name "Layer 1" and you want to create a link from it, then put a #link tag into its name in any of the following ways: "Layer 1#link" or"La$link$yer 1" or "-link Layer 1", etc. In any case, the resulting HTML class for the layer will be: class="layer_1".

Clipping Mask layers should not be marked with tags. Instead, a base layer to which Clipping Masks are applied should be marked with tags.

At the moment you can use following tags in layers' names:

#header, #footer, #section, #nav, #article, #aside - groups marked with these tags would be converted into corresponding HTML5 blocks. Example of usage in the PSD file: html tags.psd. Conversion result: html5 tags.zip.
#id{identifier_name} - layer or group marked with this tag will have identifier instead of class. If optional identifier_name is specified then this name will be used as identifier. Otherwise, it will be generated based on the layer's name. Example: 1) for layer name "layer#id{head}" service will generate id="head", 2) for layer name "layer#id" service will generate id="layer".
#merge - contents of a layer group marked with this tag will be merged into one layer in the resulting html markup. Use this non-destructive technique for those images which are represented with several layers: it might be background, logo, etc. Not only it will improve quality of the resulting html layout, but also it will make structure and readability of your PSD file much better. Also, see the #bg tag.
#alt{alternative text} - if an image layer is marked with this tag then in the resulting markup image will have alternative text set to the specified value. Example: "Logo#alt{My company}".
#link - if a single layer is marked with this tag then it will be converted into a hyperlink. If a layer group is marked with this tag then each layer of the group will be converted into a hyperlink.
#link{hyperlink} - if you pass a link as tag's parameter then it will be used as a hyperlink in the generated code. Example: #link{http://psd2htmlconverter.com}.
#nolink - layer's text or part of the text that has underlined style will not be automatically converted into hyperlink. By default, any underlined text is converted into hyperlinks.
#bg - it is a hint to convert an image as a background property of the enclosing layer group. If several layers in one layer group are marked with #bg tag then they will be merged into one image. Also, you can mark a whole Layer Group with #bg tag. In this case the whole group contents will be merged into one image layer and it will be used as a background for the layer group it belongs to.
It is not necessary to mark single layer in a group with this tag, because service automatically finds a layer to use as a background. Usually, it is an image layer of the biggest size in the given group.
#bg{[repeat type]}, where [repeat type] is:
- repeat-x or rx - bg will be repeated by x axe
- repeat-y or ry - bg will be repeated by y axe
- repeat or r or repeat-xy - bg will be repeated by x and y axes
Examples: #bg{rx}; #bg{ry}, #bg{repeat}.
#bg-size{[size]} - allows to set custom background-size css style for the bg layer.
Parameter size is either 'cover', or 'contain', or pair of valuies in px or %.
Examples:
#bg-size{cover}
#bg-size{contain}
#bg-size{100%, 500px}
#bg-pos{[HorizontalPosition], [VerticalPosition]} - allows to set custom background-position css style for the bg layer.
Parameter [HorizontalPosition] is one of: left, right, center.
Parameter [VerticalPosition] is one of: top, bottom, center.
Examples:
#bg-pos{center, top}
#bg-pos{center, center}
#h1, #h2, #h3, #h4, #h5, #h6 - text or image will be converted into a header of 1st, 2, 3, 4, 5 or 6th level. For the text layer it is mandatory to consist of only one paragraph.
#h1{alt text}, ... , #h6{alt text} - image layer will be converted into a header of 1st, 2, 3, 4, 5 or 6th level and specified text will be set as image's alternative text. Example: "Logo#h1{My company}". Also, you can do the same with the #alt tag: "Logo#h1#alt{My company}".
#in_text - image layer will be converted into a single-line text input control (type=”text”). If any text layer fits into the marked layer, then its text will be set as a 'placeholder' attribute.
Also, a group of layers can be marked with tag. If group contains a text layer, then its text will be set as a 'placeholder' attribute. Other layers will be merged into one image.
Download psd template with example usage of this tag and view the result of its conversion.
#in_passw - image layer will be converted into a password input form (type=”password”). If any text layer fits into the marked layer, then its text will be set as a 'placeholder' attribute.
Also, a group of layers can be marked with tag. If group contains a text layer, then its text will be set as a 'placeholder' attribute. Other layers will be merged into one image.
Download psd template with example usage of this tag and view the result of its conversion.
#textarea - image layer will be converted into a multi-line text input control. If any text layer fits into the marked layer, then its text will be set as a 'placeholder' attribute.
Download psd template with example usage of this tag and view the result of its conversion.
#in_button - image layer will be converted into an input form of type button (type=”button”). If any text layer fits into the marked layer, then its text will be set as an 'alt' attribute.
Also, a group of layers can be marked with tag. If group contains a text layer, then its text will be set as an 'alt' attribute. Other layers will be merged into one image.
#in_checkbox - image layer will be converted into a checkbox button (type=”checkbox”). Apply #checked tag if you want checkbox or radio button to be selected by default.
Download psd template with example usage of this tag and view the result of its conversion.
#in_radio - image layer will be converted into a radio button (type=”radio”). To unite several radioboxes into one group you should assign identical name to corresponding layers or alternatively, set radio button name as a tag's parameter: #in_radio{some name}. Apply #checked tag if you want checkbox or radio button to be selected by default.
Download psd template with example usage of this tag and view the result of its conversion.
#in_file - image layer will be converted into a file select control (type=”file”).
#in_image - image layer will be converted into a graphical submit button (type=”image”). If any text layer fits into the marked layer, then its text will be set as an 'alt' attribute.
Also, a group of layers can be marked with tag. If group contains a text layer, then its text will be set as an 'alt' attribute. Other layers will be merged into one image.
#in_submit - image layer will be converted into a submit button (type=”submit”). If any text layer fits into the marked layer, then its text will be set as an 'alt' attribute.
Also, a group of layers can be marked with tag. If group contains a text layer, then its text will be set as an 'alt' attribute. Other layers will be merged into one image.
Download psd template with example usage of this tag and view the result of its conversion.
#select - allows to generate a select list. To create a select list add this tag to a group containing text layers which correspond to select list's options. Note, that even invisible layers of this group will be converted to list's options (to avoid that you can use a #skip tag). In addition to text layers this group may contain a Shape layer which corresponds to select list's background. Other layers in group will be ignored. You can choose a default option by adding #selected tag to the corresponding text layer. Download psd template with example usage of this tag and view the result of its conversion.
#form - has sense only for Layer Groups. It will be converted into a container of controls ('form'). All controls should be put inside a form container. If no layer group is marked as form then form will be created automatically.
#skip - any layer or layer group marked with this tag will be skipped and will not go into the final HTML/CSS markup. Convenient when creating lists. Attention! Use this tag with care.
#img - with this tag you can mark a text layer (Type Text Tool Layer). In this case text will be converted as an HTML image div block instead of text paragraph. The text of the layer will be set as an alternative text (alt) for the image.
If you mark a shape layer with this tag then it will be rasterized, i.e. it will be converted into image instead of CSS3 code.
#jpg - if you mark an image layer with this tag then it will be saved in JPEG format instead of PNG format even in case layer contains transparent pixels. Since JPG format does not support transparency, all transparent pixels will be replaced with content of underlying layers. Use this tag with caution.
Remember that in case layer have no transparent pixels then it will be automatically saved in JPEG format. Thus, do not mark layers with this tag unless you really need its specific behavior.
#gif - image layer marked with this tag will be saved in GIF format. More details.
#text - text layer marked with this tag will be converted into a text no matter if text uses a font non-standard for the web or not supported layer effects are set (i.e. Drop Shadow и Color Overlay). In this case text will not have unsupported effects in the HTML layout. If non-standard font is used then it is user's responsibility to add a @font-face definition for this font into the CSS layout. Note, that on the screenshot of the converted web site such a text will be rendered with a default font.
In case you have many text layers with non-standard fonts you might want to use a "Convert ALL text layers to text" option for the PSD to HTML conversion.
#ul - advanced tag. Can be applied only to Layer Groups. Group will be converted into unordered list ul. All elements of the group will become elements li of this list. Attention! All the layers with list marker image must be marked with a tag #limage (Actually, the first element marked with this tag will be picked up as a list marker. All others will be skipped.). This is mandatory, otherwise marker images will become elements of the list (and you don't want this)! Sometimes all markers of one list are united in one layer in the PSD layout. To make your work easier you can do the following thing. Make a layer with only one marker (for example, for the first item of the list). Mark it with #limage tag. Image with remaining markers mark with a #skip tag (in this case the layer will be just skipped).
To get know how you can create horizontal or vertical menu using unordered list HTML element you can check out an example PSD file and a CSS layout converted from it.
#limage - advanced tag. Has sense only for layers inside a group marked with a #ul tag. The first encountered element marked with this tag will be used as a list's marker image. All the others layers marked with this tag will be skipped.
#flex - if layer or group is marked with tag then service will try to make its width (and width of its parent and child layers) flexible, i.e. width will be set in percentage from the parent's width.
#fix - if layer or group is marked with tag then service will make its width fixed, i.e. width will be set in pixels.
#min-width{[width]}, #max-width{[width]}
where [width] can be:
- value in pixels. Example: #min-width{1000} or #min-width{1000px}
- value in percent. Example: #max-width{96%}
#min-height{[height]}, #max-height{[height]}
where [height] can be:
- value in pixels. Example: #min-height{1000} or #min-height{1000px}
- value in percent. Example: #max-height{96%}
#normal, #hover, #visited, #active, #selected - tags to create different visual states for texts, images, forms. Read article about code generation for different visual states for more details.
#table, #thead, #tbody, #tfoot - use these tags to create html tables. Read article about tables generation for more details.
#pos_fixed - add this tag to a layer or group in order to use fixed positioning for it (CSS style "position: fixed;").
#absolute - add this tag to a layer or group in order to pull it out of document flow and use absolute positioning (CSS style "position: absolute;").
#hide - add this tag to a layer or group in order to make it invisible (CSS style "display: none;").

Examples

Here are several example PSD files and results of their conversion. You can use them as examples of various tags usage.

Example of generated HTML markup: Psd file. HTML markup, ZIP archive.
Example of Bootstrap markup: miami_home.psd, ZIP archive, HTML markup
Another example of Bootstrap markup: notify_psd_theme.psd, ZIP archive, HTML markup
Example of generated CSS3 code: Psd file. HTML markup, ZIP archive
Example of HTML5 tags usage: Psd template, HTML markup, ZIP archive.
Example of input forms: Psd template, HTML markup, ZIP archive.
Example of input forms with placeholders: Psd file, HTML layout, ZIP archive.
Example of simple list based menu: Psd file, HTML layout, ZIP archive.
Example of table: Psd template, html layout, ZIP archive.
Example of navigation with active/hover states: Psd file, HTML layout, ZIP archive.
Another example of navigation with active/hover states: Psd file, HTML layout , ZIP archive.

Grouping CSS layers into HTML div blocks

Each Photoshop Layer group is converted into a div block in the resulting CSS HTML layout.

Unite logical groups of elements (like header, content, footer, columns, etc) into Photoshop Layer Groups. It will help us to correctly unite CSS elements into HTML scalable div blocks (so if someone adds more text than it will still look fine). All elements of such markup will be grouped into rows and columns of HTML/CSS elements and they will be aligned relative to each other through such CSS properties as 'margin', 'padding' and 'float'.

Note, that Photoshop CS4 and earlier versions have a limitation: layer groups can be nested only 5 levels deep. Photoshop CS5 allows 10 level deep nesting groups. Such amount of nested groups is quite enough for designs of almost any complexity.

Layers grouping not only allows to better convert your PSD template, but also improves your working process with a PSD design template. Photoshop file is much easier to work with if all layers are logically grouped.

SEO (Search Engine Optimization)

For search engines to successfully find your HTML/CSS page on the Internet it is needed to set such meta tags as title, description, keywords for the page.

Psd 2 Html Online Converter service can automatically add these meta tags to the converted page. Just open the PSD file information form (press 'Alt Shift Ctrl I' or in the 'File' menu select 'File Info...' and choose there a 'Description' tab). Fill in 'Document title', 'Description', 'Keywords' there. All information from these fields will be automatically added as meta tags to the converted HTML/CSS page.

One of the important aspects of search engines optimization is document structure. Text data of HTML page consists of headers of different level (there 6 header levels in HTML) and from the plain text content. To create good document structure you should use #h1, #h2, #h3, #h4, #h5, #h6 tags. It is quite obvious that a header of the corresponding level (1, 2, 3, 4, 5 or 6) will be created in each case. The lower the header level is the more important it is. Headers on the page should go from the lowest to the highest header level.

File upload and payment process

Uploading of PSD template, its conversion into HTML/CSS layout and payment consists of several steps.

Choose one or several additional options of the PSD to CSS online conversion.
Upload your PSD design file. Depending on a file size uploading and conversion may take up to 10 minutes.
In case of any concerns regarding the preliminary PSD file preparation you will be offered to check them. We recommend fixing all the observations and return to the step 1. Note! If you don't fix all the observations then resulting HTML/CSS layout may differ from the original design.
Before making the payment you will be able to check a preview of the generated HTML/CSS layout (screenshot of the web page) and a preview of the generated HTML code. Inspect them and proceed with a payment only if the result satisfies you.
If you are logged in and have available conversions on your account you will be offered to use one of them.
If you are not logged in or there no conversions on your account then you will be offered to proceed with a payment.
After successful payment you will be redirected to the HTML/CSS layout download page. Details of the conversion will be sent to your e-mail. If you were logged in then conversion details will become available from your Online Profile.

Psd to Html Converter - automatic PSD to HTML/CSS conversion