Update of a Current PSD Template for Divine Elemente

• Tweet

• Tweet

Note: Use of PSD hints in a PSD template is an optional possibility. You should not bring the structure of a PSD template to the set structure. Elements can always be assigned with Divine Elemente one-by-one.

Read more about PSD hints – Speeding up of publishing time

The basic principles of PSD template modification for Divine Elemente are considered in this guide.

---

Work with template structure

If you create a structure in Adobe Photoshop (without help of the Layout Editor), you are to set grid blocks: Header, Footer, Sidebar, and Post. And it turned out that the simplest and clearest method for grid blocks setting is performed by means of slices.

You are to set layout grid in the PSD template indicating names for each grid block as you can see below:

Layout grid by slices

In order to set a layout grid right in Adobe Photoshop, you are to:

1. Select the “Slice” tool
2. Draw a layout grid in the form of separate squares with the help of a “Slice” tool. Warning: You are to be sure that grid blocks don’t overlap each other, or else a layout grid will be set incorrectly.
3. Enter grid block’s name (Side, Footer, Header, Post, Sidebar) just clicking on required one. Do the same for each block.

“Grid block > [widget (elements’ group)] > element”

In other words, a group with grid block’s name, a subgroup with widget’s name in it (it may be absent), and a subgroup with element’s name in that group.

Example: Header > Logo (‘Logo’ element in the “Header” grid block), Footer > Search > Input (‘Input’ element in the “Search” group, in the “Footer” grid block).

Elements structure in a PSD template.

Note: In order for Divine Elemente to define the element exactly, you must indicate its name and place correctly (what grid block it is placed in).

A list of elements and their correct arrangement can be found in the PSD hints table.

---

How to assign elements from Photoshop layers

PSD hints. Elements assigment

To assign an element you are to follow just two simple steps:

1. Create a group with element’s name in an appropriate grid block (Header, Post, etc.).
2. Carry all element’s layers to this group.

Thus, at its launch Divine Elemente will know what the element is exactly.

Note: At auto assignment, Divine Elemente reads off only several properties of elements (styles, bg image, fonts, etc), the rest properties (links, style’s name, graphic parameters, margins) are to be indicated manually in Publish Editor. Read more about Properties.

Using one-by-one method for PSD template modification, you are to know the working principles of Divine Elemente on data collection of the element selected.

Layers arrangement inside element’s group

1. If an element contains text, you are to select the uppermost text layer in the group of all layers and convert it into the text that is seen in the browser.
2. All layers in the group, except the upper text layer, are merged into one image – element’s background (for profy – in background image on tag).
3. All layers outside elements’ groups are merged in one image – page background – in order to speed up website downloading and save money and don’t charge your server by multiple requests with hundreds of images.

---

The best practices

To assign elements correctly in Divine Elemente plugin, each element’s layers (including their effects too) are not to overlap their grid block’s boundaries.

Examples of right and wrong work with elements

Otherwise, the element will not be assigned automatically in Publish Editor and will be displayed with an error.

Read more about Best practices

---

Conclusion

You have just learned why and how to update a PSD template for Divine Elemente working in Layout Editor, and have seen the entire work with template structure and elements assignment from Photoshop layers.

---

Related Guides and Tutorials

• New PSD template creation
• PSD Hints – Speeding up of Publishing Time
• Elements
• Properties
• Best Practices

---

External

• PSD hints list