Layout Automation

image

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

The main task that the psd to html mechanism should solve is to reduce the time spent on layout without affecting the work of the designer (for example, introducing special syntax in the names of the layout layers, as is done on the psd2htmlconverter, etc.).

The main disadvantage is that with this task, 100% automation is not possible. 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 sizes and coordinates of the blocks in the layout and, based on the data obtained, you can: generate a site grid, arrange 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: select global blocks of the site, for example, header, footer, etc., receive HTML / CSS of these blocks and, when working with subsequent layouts, do not return to them, 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 by hand, if possible, the complete absence of manual code writing.


For starters, briefly about psd


To understand what can be automated and what 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, nesting of each layer and folder, layer effects, type of layer (regular, text, etc.), and if it is an image layer, the image itself is contained.

Layer effects 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 attached to this layer is added.

image

Scheme


As a result, we got a scheme that briefly describes the main tasks, having implemented which, the output will provide high-quality code.

image

Global project settings - information about the main fonts used on the site, indicating 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 the psd file automatically. For example, a background image of a site or table. The main difficulty with backgrounds is composite backgrounds, which consist of several layers in the psd layout, and with tables, the designers draw tables differently in layouts: these can be separate text layers or one text layer in which the text is broken off spaces or tabs and hyphens. For such elements, modules must be created to help identify 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. At the time of loading the layouts, the system automatically converts psd to html as much as possible.
  2. The drag n drop method. By dragging the selected layers and folders of the psd-layout into the area of ​​the DOM tree, they can be converted to html / css.
  3. Hand-made layout. Not always automation and semi-automation can be 100% effective, therefore you need the ability to add / edit manually elements in the DOM tree or correct / add css.


image

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

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

Layout Display Area

Large area on the left side of the screen. In this area, a PSD layout is displayed, the layers of which are converted to PNG images. If necessary, look at the result of the layout, switch the display of the psd-layout to the generated result.

Drag n drop : when moving a layer (or a group of selected layers) into the DOM tree area, elements in the tree house and CSS styles are created, based on which are the effects of the selected layers.

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

On the right side of the screen there are 3 cells for working with layout layers, the DOM tree of the page and generated css styles:

Area with a list of psd layout layers

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

Drag n drop : when moving a layer (or a group of selected layers) into the DOM tree area, elements in the tree house and CSS styles are created, based on which are the effects of the selected layers.

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

DOM tree area

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

Drag n drop : when moving a layer, the nesting and position of the selected element in the DOM tree changes.

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

Onclick : Shows CSS styles that are assigned to an element.

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

CSS Styles Area

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

Additional functionality


For each project, it is planned to create a repository on a github for storing the generated html / css.

Creating modules for automatically embedding open js-scripts in the code, such as galleries (lightbox, fancybox), sliders, tabs, etc.

Also popular now: