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
Rules according to which we convert PSD template to HTML markup
Creation of HTML markup for text layers
Supported tags
Groupping CSS layers into HTML div blocks
SEO (Search Engine Optimization)
File upload and payment process

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 exept 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 then 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 XHTML/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 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:

1. 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.
2. 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.

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
• Text direction (LTR or RTL)

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. Do not forget to add @font-face to the css file manually. 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.

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 handcoding 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 identificator for the layer will be: id="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:

• #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 you PSD file much better. Also, see the #bg tag.
• #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.
• #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 container. Only one layer per layer group is allowed to be marked with this tag. Also, you can mark a Layer Group with this tag. In this case whole group contents will be merged into one image layer and it will be used as a background.
• #h1, #h2, #h3, #h4, #h5, #h6 - text will be converted into a header of 1st, 2, 3, 4, 5 or 6th level. It is mandatory for the text layer to consist of only one paragraph.
• #in_text - image layer will be converted into a single-line text input control (type=”text”).
• #in_passw - image layer will be converted into a password input form (type=”password”).
• #textarea - image layer will be converted into a multi-line text input control.
• #in_button - image layer will be converted into an input form of type button (type=”button”).
• #in_checkbox - image layer will be converted into a checkbox button (type=”checkbox”).
• #in_radio - image layer will be converted into a radio button (type=”radio”).   
• #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”).
• #in_submit - image layer will be converted into a submit button (type=”submit”).
• #form - has sense only for Layer Groups. It will be converted into a container of controls ('form'). All controls should put inside a controls container.
• #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.
• #jpg - if you mark an image layer with this tag then it will be saved in the JPEG instead of PNG format. Advantage of JPEG is a smaller file size. JPEG shortcoming is that it can't have alpha transparency. Use this tag for layers of big size, but that don't have any transparency. If you by mistake marked a transparent layer with this tag - don't worry, we will notice it and save an image in PNG format.
• #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.
• #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.

We recommend you to have a look at several example PSD files, links to which you can find below. You can use them as examples of various tags usage.

• http://psd2htmlconverter.com/files/psd2html.zip
• http://psd2htmlconverter.com/files/psd2html_portfolio.zip
• http://psd2htmlconverter.com/files/psd2html_order.zip
• http://psd2htmlconverter.com/files/GorodZhizni.zip

 

Groupping 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 more 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 metatags as title, description, keywords for the page.

Psd 2 Html Online Converter service can automatically add these metatags 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 metatags 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.

1. Choose one or several additional options of the PSD to CSS online conversion.
2. Upload your PSD design file. Depending on a file size uloadingand conversion may take up to 10 minutes.
3. In case of any concerns regarding the preliminary PSD file preparation you will be offered to check them. We recommend to fix 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.
4. 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.
5. If you are logged in and have available conversions on your account you will be offered to use one of them.
6. If you are not logged in or there no conversions on your account then you will be offered to proceed with a payment. Price for one conversion is 98 RUB (that's about 2.5 EUR or 3.5 USD). Payment is proceeded in Russian rubles (RUB) currency.
7. After successfull 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.