How to Create a Website PSD Template

How to Create a Website PSD Template by Dmitriy, Divine Elemente Team | |

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

Creation of a basic PSD web template with prepared layout grid and elements

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 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

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

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

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

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

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

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.


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


PSD Hints, Elements And Best Practices

PSD hints, elements and best practices PSD hints, elements and best practices


Related Guides and Tutorials

Read More »

Update of a Current PSD Template for Divine Elemente

Update of a Current PSD Template for Divine Elemente by Dmitriy, Divine Elemente Team | |
Want to save time building your website by preparing your PSD template with Divine Elemente? Find answers to all possible questions learning basic principles of a PSD re-engineering in this guide.

Also recomended to read: PSD hints - Speeding up of publishing time, PSD to WordPress tutorial
[divineAds]

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:

  1. Convert your PSD template (that was previously prepared without using the Divine Elemente plugin).
  2. 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

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

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.

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.

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

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

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.

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

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 PSD hints, elements and 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


External

Read More »

Layout Editor

Layout Editor by Dmitriy, Divine Elemente Team | |
What the Layout Editor is and how it can be used in Divine Elemente for the website layout creation. LE interface: canvas and panels with detailed description, and basic workflow with elements are considered in this guide.

Also recomended to read: Interface of Divine Elemente, PSD hints - Speeding up of publishing time, Create website in Photoshop, Update of a current PSD template for Divine Elemente

Layout Editor is a part of Divine Elemente that helps to specify a layout grid‘s type and its parameters for an open PSD template (grid blocks’ arrangement, their sizes and theme’s elements list) and also to create a new PSD template on the basis of the data indicated.

Layout Editor basic workflow

Layout Editor basic workflow

Thus, with the help of the Layout Editor you can:
- create a website layout and edit sizes of the grid blocks
- add elements for blank PSD creation and fasten theme / website development
- update (add / remove) elements from a theme / website

The principles of operation at the website, the Layout Editor and its interface description are considered below in this guide. But if you’d like to make something interesting in the LE, please look through the following tutorials:


Layout Editor workflow

There are two working modes in the Layout Editor, which allow to:

- Create a new PSD template
- Update a current PSD template

Create websites with Photoshop.

Layout Editor gives a designer, who is going to create a website layout, an opportunity to arrange elements very quickly as layers and groups, which are identified automatically in the Divine Elemente’s Publish Editor, if they are named correctly (we name such kind groups - PSD hints - ex: ‘Link’, ‘Logo’, ‘Text’, etc.).

Creation of a basic PSD template with prepared layout grid and elements

Creation of a basic PSD template with prepared layout grid and elements

There is a “Create new PSD template” button in the Command panel in this LE working mode. And after you press this button, a new blank PSD template is created, and you are offered to go to Adobe Photoshop for further work with the template.

More details on this mode can be found in Creation of a theme from a blank PSD and PSD hints guides.

Update of a current PSD template

In order Divine Elemente can convert your template correctly, you are to specify an accurate layout grid of the current PSD template and a list of elements, which are in use on this page. All of these can be done in the Layout Editor.

Update of a current PSD template

Update of a current PSD template

We recommend to study how to create WordPress themes easily and update current PSD template for Divine Elemente.

The following actions can be performed in this working mode in the Command panel:

- "Publish" tab (Switch to the Publish Editor) can help to update a template with the previous changes made and switch to the Publish Editor for further work with elements, setting their properties and theme’s publishing.

- Update PSD what allows to update a PSD template but the work is to be continued in the Layout Editor.

Limitations

There are several limitations in the website Layout Editor’s current functionality of 0.9 version. Here is a list of the most considerable ones:

1. Possibility to use 2-column layout grid only (with or without sides). Multi-column (1 and 3 column) mode is in the development stage yet.

2. A list of possible theme’s elements is prepared for WordPress CMS profile only. However, it will be enlarged greatly as additional CMSs are available or on our customers’ requests.


Layout Editor interface: canvas

Canvas is a main part of Divine Elemente interface. It also plays a significant role in the Layout Editor work. It's used to display a layout grid and a list of elements, which are in use.
Page view in the Layout Editor. Layout grid and a list of theme elements

Page view in the Layout Editor. Layout grid and a list of theme elements

You can see below what a grid block is composed of in the Layout Editor.

Parts of a grid block in the Layout Editor

Parts of a grid block in the Layout Editor

A. Grid block name.
It opens a window with a list of elements.
B. Grid block parameters.
It sets height and width of this grid block (px).
C. Elements count.
It displays a number of elements in the grid block.
D. A list of elements.
It displays elements, which were assigned in this grid block.

Set parameters for each grid block

To do that, point out exact sizes of layout’s each grid block by indicating numerical values for each one, or drag their boundaries on the canvas by mouse cursor.

Change of layout grid's parameters in the Layout Editor

Change of layout grid's parameters in the Layout Editor

Swap nearby grid blocks (if applicable)

It may be necessary if you have suddenly decided to make a few changes in your layout design using website Layout Editor.

To do that, open Swap menu in the dropdown list and select a necessary item (as you can see on the picture below):

Swap menu. An example of grid blocks’ replacement

Swap menu. An example of grid blocks’ replacement

Add required elements / widgets' list to each grid block.

To do that, you are to choose required elements in the appropriate list on the canvas or in the Elements panel (as you can see on the picture below):

Add required elements to each grid block

Add required elements to each grid block

More details on what theme elements are, what types they have and what are they used for can be found in the Elements guide.


Layout Editor interface: side panel

A side panel is divided into three parts: a command panel, layout sizes, and elements panel.

Command panel

This panel is used to fulfill basic operations with a template, which are the following:

Creation of a new PSD template

A "Create layout" button (or ‘Update PSD’ if you launched LE with PSD)

It's used for preparation and creation of a new PSD template in accordance with data indicated in the Layout Editor.

At that, layers for each element will be in a separate group named as this element (PSD hints), which is used for automatic elements assignment in Divine Elemente.

This eliminates the necessity to assign elements one-by-one at each Divine Elemente launch.

To create a template, you are to press a "Create PSD" button.

Command panel. Creation of a new PSD template.

Command panel. Creation of a new PSD template.

Switch to the Publish Editor

To convert a PSD template into a ready web page (theme for CMS), you are to switch to the Publish Editor. There is a "Publish" tab on the side panel for this purpose.

Defining of page elements' list and elements assignment

Defining of page elements' list and elements assignment

All changes, made in Layout Editor (layout size, grid blocks sizes, available elements, etc.), are applied to a PSD template at once and will be used in the Publish Editor.

Layout and grid blocks sizes

This panel is used to specify a layout grid and set parameters for each grid block.

To do that, select an appropriate layout grid from the dropdown list and then specify parameters opposite each grid block in the list.

Layout properties panel. Specify a layout grid, set parameters for each grid block

Layout properties panel. Specify a layout grid, set parameters for each grid block

A. Max size of a PSD template
It sets a size of a whole PSD template.
B. Layout grid selection
It allows to switch between different layout types (with / without sides, 1-3 columns {in the future} ).
C. Content size
It sets a page body's size (without sides).
D. Grid block size
It sets sizes of an appropriate grid block.

Elements panel

This panel is used for display of elements and their statuses.
You can add or remove elements for layout’s each grid block from here.

Side panel. Elements panel

Side panel. Elements panel

The panel consists of two parts:

A. Mass 'Add', 'Remove' elements and 'Show' elements filter

Addition / removal / show of elements in accordance with their types.

Addition / removal / show of elements in accordance with their types.

Add (+) - is used for quick addition of a predefined elements list.

  • Add elements to CMS theme ('Post Text', 'Post Author', 'Date', 'Comments', etc.)
  • Add static elements ('Image', 'Link', 'Text')
  • Add style elements (<h1>, <p>, <a>, etc.)
  • Add all elements - it adds all available page elements

Remove (x) - is used for quick removal of a predefined elements list.

  • Remove CMS theme elements ('Post Text', 'Post Author', 'Date', 'Comments', etc.)
  • Remove static elements ('Image', 'Link', 'Text')
  • Remove style elements (<h1>, <p>, <a>, etc.)
  • Remove all elements - it removes all elements added to the page

Show - is used to display all elements in accordance with a chosen type (or status).

You have an opportunity to experiment with settings in order to understand what option from the settings’ list mentioned above can switch on or switch off.

B. Elements list

This part of the panel is used to display all elements list in accordance with the 'Show' filter and gives you an opportunity to add (or remove) elements that you are going to work with in Adobe Photoshop.

Elements list. Addition/ removal of elements in the Elements panel.

Elements list. Addition/ removal of elements in the Elements panel.

After you create a website layout as a blank PSD template, the ticked off elements (if added - they are blue-colored (A) ) are combined in elements’ groups in Adobe Photoshop with names, which correspond a PSD hint.

Using ticks (B) near elements, you can:

- add an element (pressing a tick near the element with grey icon)
- remove an element (pressing a tick near the element with blue icon)

More details on what theme elements are, what types they have and what are they used for can be find in the Elements guide.


Conclusion

Thus, you have just learned about the website Layout Editor work in Divine Elemente and its abilities and potential, which can be used for creating a unique design for your theme / website.

Related Guides and Tutorials

  1. New PSD template creation
  2. Update of a current PSD template for Divine Elemente
  3. Creation of a theme from a blank PSD
  4. PSD Hints - Speeding up of Publishing Time
  5. Quick start guide
  6. Elements
Read More »