PSD Rules


Codemander PSD Conversion is the most intelligent conversion tool in existence today. With a minimum of effort you can easily turn any PSD into a responsive webpage. 

This is only the first phase. We are working on a full-fledged online IDE with support for loading Photoshop files in the IDE, Visual Studio solutions, Git integration, integration with Visual Studio Online, integration with Azure, database modelling, collaboration, support for ReactJS and other frameworks, and much more. 


Codemander supports 3 ways of layout generation

  • Float left
  • Flex
  • Bootstrap
Float left Elements are generated with float:left CSS where needed in order to make the page responsive
Flex Elements are generated with CSS Flexbox where needed in order to make the page responsive
Bootstrap The layout is created based on Bootstrap classes, including .container, .row and .col-md-<x>


Codemander is highly intelligent and automated, automatically finding rows and columns in your PSD. 

Clean code

Codemander generates fairly clean code with a minimum of bloat, making it a great starting point for further customization. 

How to structure the layout in your PSD

There are two ways to structure the layout in your PSD

No slicing Use vertically stacked rectangles covering the whole width from the left edge to the right edge. Codemander automatically understands that these rectangles are "outer" vertically stacked rectangles and creates vertical DIVs.
Slicing Slice your page into the main layout areas. Although you can slice the page into as complex a layout as you want as long as no slices overlap and that all slicing is in perfect rows and columns layout. See example PSDs. Codemander automatically understands to recursively generate a layout which is fully responsive. 

Basic rules

1. Text layers No extra spacing around the text. Keep the layer edges snug around the text so that they don't overlap several layers beneath

Tags and form fields

You can start a layer name with one of the following in order to instruct Codemander to create the corresponding tag. The tags are case insensitive. If no tag is specified in the layer name then Codemander will create a DIV.

Tag Tag to insert Example layer name  
H1. H1 tag H1.Title text  
H2. H2 tag H2.Title  
H3. H3 tag H3.Title  
H4. H4 tag H4.Title  
H5. H5 tag H5.Title  
H6. H6 tag H6.Title  
H1-Link. A tag with H1 tag H1-Link.Title link  
H2-Link. A tag with H2 tag H2-Link.Title link  
H3-Link. A tag with H3 tag H3-Link.Title link  
H4-Link. A tag with H4 tag H3-Link.Title link  
H5-Link. A tag with H5 tag H4-Link.Title link  
H6-Link. A tag with H6 tag H5-Link.Title link  
Link. A tag Link.This is a link  
Button. BUTTON tag Button.This is a button  
Input. input[type=text]  Input.Rectangle search field  
Textarea. textarea Textarea.Rectangle comment  
Submit. input[type=submit] Submit.Rectangle submit button  
Select. select Select.Rectangle dropdown  

Special layer name appendixes

You can add a set of special appendixes to the layer name in order to instruct Codemander to how you want to generate layout or styles. 

Appendix   Example layer name Description
.background   Image of banner.background Sets the image as a background-image with CSS instead of creating an inline IMG tag

Image of

Image of

Centers the background with background-position: center center; 
.repeat   Image of banner.repeat Sets background-repeat to "repeat"
.no-repeat   Image of Sets background-repeat to "no-repeat"
.cover   Image of banner.cover Sets background-size to cover (default)
.contain   Image of banner.contain Sets background-size to contain
.table   Products.table

Creates a table (with rows and columns) from the children layers. Codemander automatically 

calculates rows and columns from the children.


Codermander automatically understands

  • Google Fonts
  • Font awesome
  • Icomoon

Correct tags to Google Fonts, Font awesome and/or Icomoon will automatically be inserted in the generated HTML. 

Engine intelligence

Codemander comes packed with a lot of intelligence such as 

Keyword What
Container Automatically understands the "container" / "body" / "main content" part of your PSD. There is no need to slice the main "container" part of your layout since Codemander automatically finds it.
 Background Often automatically understands that an image needs to be set as a background instead of an inline IMG tag
Rows and columns Automatically calculates rows and columns based on your layer layout 
Clipping Automatically clips and exports images correctly. Generally understands clipping masks. 
 CSS Automatic CSS generation from layers
 SVG  Automatic SVG generation from layers
 Merging Automatically merge multiple layers into an image or an SVG
 Sprite Can automatically combine icons and images into a sprite and automatically generated the correct CSS
 Opacity If a layer has opacity less than 100%, then with CSS all children will normally also inherit this opacity, often creating a problem because you cannot "reset" the opacity to 100% so that text on top will not be transparent like its parent. But Codemander automatically fixes this by splitting this into one parent DIV with two absolutely positioned children, thus making it possible to have a background with opacity with text and content on top which does not have opacity. 
Blend modes Automatic support for CSS properties mix-blend-mode and background-blend-mode. That is, carrying the layer blend mode (normal, darken, multiply, screen, luminosity, etc) over to CSS, according to the "Compositing and Blending Level 1" W3C Recommendation. 


Was this article helpful?
0 out of 0 found this helpful