PSD hints support was added to Divine Elemente for automatic elements assignment (named special hint group in PSD). It allows you to increase publishing speed by several times.
However, to use this tool you must prepare your PSD template in a special way. There are two ways to do this:
- Convert your PSD template (that was previously prepared without using the Divine Elemente plugin).
- Create a new template with the help of the Layout Editor (more details on this entire process can be found in the “New PSD template creation” guide).
PSD template modification: before and after
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
First, to update a PSD template for Divine Elemente you are to set grid blocks of a template.
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:
- Select the “Slice” tool
- 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.
- Enter grid block’s name (Side, Footer, Header, Post, Sidebar) just clicking on required one. Do the same for each block.
Next you are to organize the structure of the layers and their groups. For elements auto assignment, Divine Elemente goes by groups’ names (as basic hints) and uses the following structure:
“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
Elements are the basis of website creation (they are like bricks). An Element can be described best as a container which carries all necessary properties, position of an element, styles, functionality for a web page / theme’s objects like texts, links, buttons, images, etc. Read more about Elements
PSD hints. Elements assigment
To assign an element you are to follow just two simple steps:
- Create a group with element’s name in an appropriate grid block (Header, Post, etc.).
- 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
- 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.
- 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).
- 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.
In order to enable Divine Elemente to publish your website faster and more qualitative, it's important to update your PSD template to make it valid. So let’s look through real experts’ advice:
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
PSD Hints, Elements And Best Practices
PSD hints, elements and best practices
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