• Choose options
  • Upload and
  • Preview
  • Payment
  • Download

Convert Photoshop to HTML online in seconds.

Please, choose desired PSD to HTML/CSS conversion options. Full description for the process of PSD template uploading, its conversion into HTML/CSS layout and payment you will find at the documentation page.

Layout type

Fixed width layout: standard fixed width layout. Layout width will be equal the width of psd template.
Flexible backgrounds: service will try to find backgrounds which should occupy all viewport's width and make them flexible. Content will have fixed width.
Flexible width layout: all backgrounds and all content will have flexible width. Such kind of markup is used rarely.
Absolute coordinates: fixed width layout with absolute positioning.
Bootstrap: responsive layout with Bootstrap 3 framework. Desktop first with graceful degradation. More details...

Also, you can use following tags: #min-width{[width in px|width in %]}, #max-width{[width in px|width in %]}, #flex, #fix, #bg{[repeat-x|repeat-y|repeat-xy]}. Read more about them on the documentation page.

Font size units

Choose what units to use for font size properties.

Convert ALL text layers to text

If you choose "No" then only those text layers which use web safe fonts or marked with the #text tag will be converted as text. Other text layers will be converted as images with alternative text.
If you choose "Yes" then all text layers, except explicitly marked with #img tag, will be converted into HTML text regardless of which font and which styles a layer is using. Note, that on the screenshot some text will look not same as in the design template. That's because not web safe fonts are absent on our server. After employing these fonts via @font-face, the markup will look the same as the design template.

Prefix and suffix for all the generated class names

These parameters are optional. If prefix or/and suffix are set then they will be applied to all the generated CSS classes and identifiers. For example, if Photoshop layer has name 'logo' then by default CSS class will have name '.logo'. If prefix is set as 'prefix-' and suffix  is set as '-suffix' then name will become '.prefix-logo-suffix'.
It may be useful if you are converting several pages of one website and would like to unite css styles of all pages into single css file. By using unique prefix/suffix for each page you will get unique css names for all the pages.

Images quality level

Define quality level for images as a number from 1% (min quality) to 100% (max quality). This option is applicable to:
1) compression of JPEG images,
2) lossy compression of PNG images (8-bit PNG) in case it is enabled by corresponding option.
In most cases default value of 95% is good enough.

Enable lossy PNG images compression

Allows or disables lossy PNG images compression - conversion to 8-bit PNG. Allows to significantly reduce file size (often as much as 70%) without noticeable loss of quality. This type of compression is recommended by Google Pagespeed tool.
Min image quality level is defined by the previous option.
Note, that additional lossless PNG images compression is always performed regardless of this option.

Detect layers with fixed positioning

If "Yes" is chosen, then service will try to detect layers which should have fixed positioning (CSS style "position: fixed;").

Remove hidden layers

Service will ignore layers which have visible flag in Photoshop, but which are overlayed by other layers, so they are actually invisible. Usually such layers are present in the template unintentionally and may be safely removed to improve markup.

Remove unused images

If "Yes", then those layers which are unused in the resulted markup, will not be included in the resulting zip archive. If, "No", then all layers which were visible in the PSD template but are not used in generated markup will be put into a folder 'unused_images'.
Following image will not be used in the resulting markup:
1. Images of text layers which were converted as styled text
2. Images of layers which were converted into CSS3 code

www.megastock.ru Здесь находится аттестат нашего WM идентификатора 408053960204 Порядок оплаты с помощью системы WebMoney
Sign in

Forgot your password?