There is a new functionality, called “Create new PSD web template”, available in the Layout Editor workflow of Divine Elemente v0.9. It gives the designer an opportunity to arrange elements very quickly as layers and groups.
At new PSD web template creation, all theme / web page’s elements are created as separate groups and named in a special way (we name such kind groups – PSD hints – examples: ‘Link’, ‘Logo’, ‘Text’, ‘Sidebar’, etc.) for their further auto assignment in the Publish Editor.
Creation of a basic PSD web template with prepared layout grid and elements
Step-by-step process of a new PSD web template creation
Step 1. Layout Editor launch (methods of its launching).
The Layout Editor can be launched in two working modes: creation or updating of a template.
Methods of launching Layout Editor
You can launch the Layout Editor in the mode of a new template creation by the following methods:
If Adobe Photoshop has not been launched yet on your computer, you can launch the Layout Editor from the “Start > Divine > Launch Divine Elemente” menu. At that, Photoshop is launched and the quick start window opens at once. Click on the “Create a blog layout” button.
If Adobe Photoshop has already been launched on your computer, you can launch the Layout Editor from the “Elemente > Quick Launch > Create a blog layout” menu.
Step 2. Setting of a layout grid and page’s common parameters
To set layout grid, you can use the layout and grid blocks size panel. Select an appropriate layout grid from the dropdown list and then set parameters opposite each grid block in the list.
Layout grid and its blocks sizes. Layout grid setting
To set parameters for each grid block on canvas, point out exact sizes of layout by indicating numerical values for each grid block (A), or drag their boundaries on canvas by mouse cursor (B).
Change of layout grid’s parameters in the Layout Editor
Step 3. Addition of elements list and their display on canvas
In order groups and layers of each element to be prepared in a new PSD web template, they are to be indicated in the Layout Editor.
Elements panel: Elements addition
You can do that right in the Elements panel by checking required elements in the list. At that, each marked element will be displayed on the canvas immediately.
The Layout Editor: Ways to display elements on canvas
Elements can be displayed in two ways on canvas (Ctrl + G):
- as a list of elements
- as a schematic display of elements
Step 4. New PSD web template creation
After all parameters have been set and all required elements have been marked, the next step to take is a new PSD web template creation.
The Layout Editor: Creation of a new PSD web template
To do that, click on the “Create layout” button in the Command panel. As a result, a new blank PSD web template is created, and you will be offered to move to Adobe Photoshop for the further work with your PSD web template.
Step 5. PSD web template design.
The final step of a new PSD web template creation is its design. Here everything depends on your design skills and inspiration.
The Layout Editor: Best practices
However, to make your PSD web template’s work smoother in Divine Elemente, we strongly recommend you to get acquainted with the “Best practices” guide.
You have just learned about a new functionality of the Layout Editor introduced in Divine Elemente v0.9. We ahve taken you through a step-by-step process on how to create PSD web template, introducing you to an absolutely simple and exciting approach to web design with the help of Divine Elemente.