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

  • Pingback: Divine Elemente – Easy WordPress Theme & Template Generator - Plugins | Theme Digital

  • http://www.gerardawomo.fr Malcus

    Nice thanks!

  • Pingback: The Easiest Way to make Wordpress Theme | Layersfactory Blog

  • elchenuk

    I cant seem to add a new template in the trial version. Do you have a fully functioning demo that i can try before I buy?

  • http://www.divine-project.com Sergey, Divine Elemente Team

    Hello, this functionality is available in trial version, but we have transferred it. Now you need to launch “Elemente > Quick launch” and click on the “Create a blog layout” button in the window.

  • infobanc

    Very informative..thank you so much for sharing.
     
    http://www.lelachotel.com/
     

  • eljuanca05

    really great but what happens with text? It’s trasformed to curves, program keeps them as images or it conserves the online “editing” (well, its just the feature to select it, copy, etc)? 
     
    Also what happens if i wanna use an online font (ej. Google fonts)? How i can configure to use one?
     
    Thanks a lot,

  • Jamie

    Hi, is it just slow because of the trial version or does it take a bit to run from with-in photoshop.

    Thanks

  • Dmitriy, Divine Elemente Team

    Divine Elemente uses functions of Photoshop, so it could take a bit of time, but, I think, it much faster than you will make by yourself ;)

  • vanjo

    Hi! Can you please teach us on how to add a sub menu? thanks! :)