This guide covers the restrictions of elements and how to avoid them. Web designing tips and clear web design examples will help you achieve good results in your work.

Related: 960 grid, Creative background design with stretch

[divineAds]

Elements and widgets in the Divine Elemente provide great opportunities to work with CMS, publishing formats, functions, etc. However, while designing your template it is desirable to take basic web design standards and peculiaritues of web browsers and CMS into account.

Best practices and standards. Differences between good and bad PSD sources

Best practices and standards: Differences between good and bad PSD sources

In order to publish your website faster in higher quality with Divine Elemente, it’s important to get a valid PSD template.

Useful advice and descriptions of  a few working features of the Divine Elemente algorithm given below.


1. PSD Template: Eliminate Visual Disorder

Elements in Divine Elemente give great possibilities of publishing on various CMS, image formats, various functionality, etc.; and following the standard technologies of Photoshop, different CMS, browsers, etc., you may achieve perfect results.

In order your theme looks qualitative, you are to take care of your PSD template’s quality

In order to produce a high-quality theme, you must produce a well-organized PSD template.

Following a few simple tips you can achieve astonishing results in Divine Elemente.


2. Element: One Type Layer And/Or One Merged Image

At elements’ creation, you can use as many layers as necessary to create a required element’s design. At conversion, all layers in an element’s group will be merged in one image for fast publishing.

Divine Elemente algorithm. Work with graphic layers.

Divine Elemente algorithm: work with graphic layers.

Divine Elemente algorithm. Work with text layers.

Divine Elemente algorithm. Work with text layers.

That’s why, at element’s creation, place the necessary text layer on top of all others in the group.


3. No Overlap: Grid Blocks & Slices In Photoshop

First of all, at template’s designing, watch over an element’s arrangement. No element’s layer should overlap the boundary of a grid block.

An example of correct and incorrect elements' arrangement concerning a layout grid.

An example of correct and incorrect elements’ arrangement concerning a layout grid.

In case element’s layers overlap a grid block’s boundary yet, this element cannot be assigned in the Publish Editor. More details on elements’ arrangement can be found in the “Elements” guide.

Secondly, it’s not desirable that elements overlap each over.

An example of correct and incorrect elements' arrangement in a template.

An example of correct and incorrect elements’ arrangement in a template.

As you can see, at correct elements’ arrangement and following basic standards of web design, your template will look not only accurate, but it’ll allow you to work with Divine Elemente much more convenient.


4. Elements On Complex Background

At template’s creation, it’s necessary to take into account the fact that elements can be moved down with their background on the website’s page, and such elements will not look good on the complex background.

That’s why it’s very important to select a correct format of an element’s image.

Elements on complex background. Selection of image's format.

Elements on complex background: Image format selection.

In Divine Elemente you can set the quality and format for each element.
More details on elements properties can be found in the “Properties” guide.


5. Type: Differences Between Point & Paragraph Text

Point and Paragraph text's use

Point and Paragraph text’s use

Point text is recommended for such web elements as ‘Logo’, ‘Navigation menu’, ‘Texts’ that will not be changed in the CMS.

Paragraph text is recommended for elements, which contain more than one line of a text, and for elements, which boundaries should be set accurately (‘Posts’ > ‘Titles’; ‘Posts’ > ‘Contents’; ‘Posts’ > ‘Comments’, etc.)

Read more about Advanced text effects and publishing.


Extensions and Updates

In the future this guide will be expanded greatly. Check back often.

Free and paid extensions will be available ASAP.


PSD Hints, Elements And Best Practices

PSD hints, elements and best practices


Related Guides and Tutorials: