PSD Rules
Introduction
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.
Layout
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> |
Automation
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 |
| 2. | ||
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 | |
| .center |
Image of banner.center Image of banner.background.center |
Centers the background with background-position: center center; | |
| .repeat | Image of banner.repeat | Sets background-repeat to "repeat" | |
| .no-repeat | Image of banner.no-repeat | 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. |
Fonts
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. |
