How to Create Basic PSD template

There is a new functionality, called “Create new PSD 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 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.

Read more about the Layout Editor, the Publish Editor and PSD hints – Speeding up of publishing time.

---

Step-by-step process of a new PSD 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 Layout Editor” menu. At that, Photoshop is launched and Divine Elemente v0.9 opens at once in the mode of a new PSD template creation.
• If Adobe Photoshop has already been launched on your computer, you can launch the Layout Editor from the “Elemente > Create new 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 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 template creation

After all parameters have been set and all required elements have been marked, the next step to take is a new PSD template creation.

The Layout Editor: Creation of a new PSD template

To do that, click on the “Create layout” button in the Command panel. As a result, a new blank PSD template is created, and you will be offered to move to Adobe Photoshop for the further work with your PSD template.

Step 5. PSD template design.

The final step of a new PSD template creation is its design. Here everything depends on your design skills and inspiration.

The Layout Editor: Best practices

However, to make your PSD template’s work smoother in Divine Elemente, we strongly recommend you to get acquainted with the “Best practices” guide.

---

Conclusion

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 template, introducing you to an  absolutely simple and exciting approach to web design with the help of Divine Elemente.

---

Related Guides and Tutorials

• Layout Editor
• Publish Editor
• PSD Hints – Speeding up of Publishing Time
• Best practices