Layout Automation

This is a note on the approach to implementing automation of the psd to html mechanism.

The main task that the psd to html mechanism should solve is reducing time on the layout, without affecting the designer’s work (for example, introducing a special syntax in the layout layer names, as is done on psd2htmlconverter, etc.).
')
The main disadvantage is that 100% automation is impossible with this task. Layout requires a person with basic HTML skills. Despite the impossibility of 100% automation, optimization of time costs is still possible :). This is done by determining the size and coordinates of the blocks in the layout and, based on the data obtained, you can: generate a site grid, place text and other blocks (not through position: absolute), define links, cut out pictures.

The next task is to work with the project as a whole: to select global blocks of the site, for example, a hat, footer, etc., to obtain HTML / CSS of these blocks and not to return to them when working with subsequent layouts, or, if necessary , get quick access to these blocks (for example, add a link to the footer).

And the third of the important tasks is to minimize the process of writing code with your hands, if possible, the complete absence of manual code writing.

For a start, psd is short

To understand what can be automated and what is not, you need to understand what information can be obtained from the PSD file.

The PSD file contains information about the layers: a list of layers and folders, the nesting of each layer and folder, the effects of the layer, the type of layer (plain, text, etc.) and if it is an image layer, then the image itself is contained.

The effects of the layer that are read from the psd file can be viewed using the Layer Style menu (see the image below); For text layers, the text that contains the layer is added, and for layers with images, a link to the image stored in the psd file associated with this layer is added.

Scheme

The result was a scheme that briefly describes the main tasks, realizing which, on output will provide a high-quality code.



Global project settings - information about the main fonts used on the site, specifying the minimum and maximum width of the site, encoding, etc. general information about the site.

There are also html elements that are not so easy to get from a psd file automatically. For example, the background image of the site or table. The main difficulty with backgrounds is composite backgrounds, which consist of several layers in a psd layout, and with tables, the fact that designers draw tables in layouts in different ways: these can be separate text layers or a single text layer in which text is broken. spaces or tabs and hyphens. For such elements, it is necessary to create modules that will help define these elements.

Interface

The main task that the interface solves is the visualization of the layout process. The layout process itself can be divided into 3 types:

1. Automatic. When loading layouts, the system automatically converts psd to html as much as possible.
2. Using the drag n drop method. Dragging the selected layers and folders of the psd-layout into the area of ​​the DOM-tree, you can transform them into html / css.
3. Manual layout. Not always automation and semi-automation can be 100% effective, so you need the ability to manually add / edit elements in the DOM tree or correct / add css.

An attempt to solve this problem is shown in the image above.

The screen is divided into 4 parts: layout display area, layout layer display area, document DOM tree and element CSS styles.

Layout display area

Large area on the left side of the screen. This area displays a PSD layout, the layers of which are converted to png images. If you need to look at the result of the layout, switch the display of the psd-layout, to the generated result.

Drag n drop : when a layer (or a group of selected layers) is moved to the DOM tree area, elements are created in the tree and css styles that are based on the effects of the selected layers.

Mousehover : layout layers are highlighted, elements in the psd layout layer list and tags created in the DOM tree when words are moved to the DOM tree area.

In the right part of the screen there are 3 cells for working with layout layers, a DOM tree of the page and css-generated styles:

Psd Layout Layer Area

The left of 2 columns on the right side of the screen. A list of folders / layers with indents to display nesting and the ability to hide / show a layer or folder (layers are hidden in the layout display area) is shown.

Drag n drop : when a layer (or a group of selected layers) is moved to the DOM tree area, elements are created in the tree and css styles that are based on the effects of the selected layers.

Mousehover : layers in the psd layout area are highlighted and tags created in the DOM tree when words are moved to the DOM tree area.
The list remains unchanged (you cannot sort or delete items).

DOM area

The right of 2 columns on the right side of the screen. A list of DOM tree elements and nesting is shown.

Drag n drop : when you move a layer, the nesting and position of the selected item in the DOM tree changes.

Mousehover : the layers in the psd layout area and the elements in the psd layout list are highlighted, in case the element was created by drag n drop from the layout areas.

Onclick : Shows the css styles that are assigned to the element.

You can change the number of elements in the list (by deleting existing or adding new ones), change the position and nesting of elements.

CSS Styles Area

The bottom cell in the lower right of the screen. Display and functionality a la firebug for FF, or the developer panel for Google Chrome: adding new styles or editing / deleting existing ones.

Additional functionality

Under each project is supposed to create a repository on github for storing the generated html / css.

Creation of modules for automatic embedding of open js scripts into the code, such as galleries (lightbox, fancybox), sliders, tabs, etc.