Top 10 High-Quality And Free PSD Website Templates

Top 10 High-Quality And Free PSD Website Templates by Dmitriy, Divine Elemente Team | |

Properly scheduled website development process requires to accurately choose a PSD template according to the conditions settled.

With deliberate alterations inserted for project needs later on free PSD templates may fit best.

Below we have collected Top 10 Free PSD Templates, true pathfinders striving to open a new direction in web design.


Brave & Bold PSD Website Template

PSD Templates - Brave & Bold PSD Website Template

Diablo 3 Game PSD Website Template

PSD Templates - Diablo 3 PSD Website

Mass Effect 3 Game PSD Website Template

PSD Templates - Mass Effect 3 PSD Website

Halo 4 Game PSD Website Template

PSD Templates - H4 PSD template

DesignStudio

PSD Templates - DesignStudio

Luxury Rentals

Free Luxury Car Rental Website Template

Animation Studio

PSD Templates - Animation Studio

Printing Company

Free Printing Company Website Template

BizSoft

PSD Templates - BizSoft

BizConsult

PSD Templates - Biz.Consult

Pro Business

PSD Templates - ProBusiness

Brown

PSD Templates - Brown

Joyful Events

PSD Templates - Free Joyful Events template

Valentine

PSD Templates - Free Valentine template

Conclusion:

Having provided these hot 10 free PSD templates, we hoped to inspire your creative brain to successfully generate hundred new design ideas. Based on parental experience youth would never miss the chance to whip up life from scratch. So, just do it!

Read More »

Evolution of Web Design

Evolution of Web Design by Dmitriy, Divine Elemente Team | |
{clear} THUMBNAIL_BEGIN #image: how-it-was-coded-small.jpg; #description: The rising of the contemporary web development would have set a different pace if automated tools had been invented a little later. Although Adobe Photoshop has remained paramount environment for web design, now plugin-generated website code is a long, upward trend. Commonly used early image slicing, manual coding, HTML table-based layout techniques now have become obsolete. So, how was it coded? THUMBNAIL_END {/clear}
How it was coded
Share

The rising of the contemporary web development would have set a different pace if automated tools had been invented a little later.

Although Adobe Photoshop has remained paramount environment for web design, now plugin-generated website code is a long, upward trend. Commonly used early image slicing, manual coding, HTML table-based layout techniques now have become obsolete.

So, how was it coded? Review the infographics below providing three ways of evolution: Graphics, Coding and Development.

HOW IT WAS CODED

Want to display this infographic on your site?

Simply copy and paste the code below into the html of your website to display the infographic presented above:

View an enlarged version of this Infographic »

Click here to download a .pdf version of this infographic.


Facts to Tweet:

First website was published in 1991 by Tim Berners-Lee.
CHSS (CSS) language proposed by Håkon Wium Lie in 1994.
WordPress blog template system launched as a single bit of code in 2001.
Photoshop CS released in 2003. Now featured with Scripting support for JavaScript to create website in Photoshop.
Divine Elemente free version appeared first in 2009. A long way ahead.

Web design Evolution continued: willing to participate?

New technologies allow you to significantly reduce time for website development, optimize code, improve the quality of web pages - now everything depends on your imagination.

So, continue to discover new ways of web design evolution with Divine Elemente photoshop plugin.

Buy Now or Download Free 30-day Trial

Also you can submit your superb designs created with Divine Elemente to Themes Marketplace and get up to 95% from each sale.

Resource Links:

http://sixrevisions.com/resources/the-history-of-the-internet-in-a-nutshell/

http://www.lynda.com/Photoshop-CS5-tutorials/for-the-web/65718-2.html

http://photoshopnews.com/feature-stories/photoshop-profile-thomas-john-knoll-10/

http://php.net/manual/en/history.php.php

http://www.technologyreview.com/printer_friendly_article.aspx?id=25838

http://www.computerhope.com/issues/ch001016.htm

Read More »

Issue Resolved: Website Background Image Stretch

Issue Resolved: Website Background Image Stretch by Dmitriy, Divine Elemente Team | |

Seamless background stretch is a unique technology provided by Divine Elemente only, that for the first time in web industry allows to display textures or background of a website block at vertical stretching or compression with no visible seams!

Background image is graphics that fills spaces to the left and to the right from the website’s content boundaries (on monitors with high screen resolution).

An example of a template with use of ‘Seamless stretch’ and ‘Background image’

An example of a template with use of ‘Seamless stretch’ and ‘Background image’

In this guide, we'll consider main aspects of work with this unique technology and large background image.

Use of ‘Sides’ grid blocks

If you use a template with a graphics that fills spaces to the left and to the right from the website’s content boundaries, a special layout grid with ‘Sides’ blocks can be applied.
An example of a template with use of ‘Sides’ grid blocks

An example of a template with use of ‘Sides’ grid blocks

Interesting: An author of this theme spent near a week to handcraft beautiful design in Photoshop, providing full detalisation from scratch... However to publish a complete working theme for WordPress without a line of code, you'll need less than 5 minutes.

First of all, to create a template with sides, specify an appropriate layout grid with additional ‘Sides’ blocks in the Layout Editor.

Selection of an appropriate layout grid

If you decided to create a template with sides, you are to select a required layout grid in the right panel and set parameters in accordance with the page's template.

More details on this process can be found in the Layout Editor guide.

Selection of a grid and setting of page's parameters in the Layout Editor.

Selection of a grid and setting of page's parameters in the Layout Editor.

Everything in the ‘Sides’ grid blocks will be defined as an image outside the website’s content boundaries.

The next step for this theme’s creation is “Addition and assignment of theme elements”.
Learn how to create WordPress themes.

Then, let's consider theme's stretch parameters responsible for large background image filling at content's height enlargement.

Use of stretch parameters

There are just four types of filling background's gaps in case the content breaks page boundaries vertically: No Stretch, One Big Background, Simple Stretch, Seamless Stretch.
Types of background design.

Types of background design.

  • BG Type: One Big Background - At page's enlargement, layers that lie on the background are merged and published as one huge image, including the ‘Footer’. It’s recommended to use this type for one-color website or websites with one large photo.

Types of background design. One Big Background.

Types of background design. One Big Background.

  • BG Type: No Stretch - At page's enlargement, background's gaps are not filled with repeated images of this background. It’s recommended to use this type for the ‘Header’ and the ‘Footer’ grid blocks, as these images are not to stretch vertically in 90% cases.

Types of background design. No Stretch.

Types of background design. No Stretch.

  • BG Type: Simple Stretch - At page's enlargement, background's gaps are filled with repeated images of this background. It works well for flat backgrounds, but not for complex textures.

Types of background design. Simple Stretch.

Types of background design. Simple Stretch.

  • BG Type: Seamless Stretch - At page's enlargement, background's gaps are filled with repeated images of this background with unique smart algorithm. This method is extremely useful for really complex backgrounds (textures like leather, grass, wood, paper, etc.).

Types of background design. Seamless stretch.

Types of background design. Seamless stretch.

Please Note: Possibility to set a background is available only for elements and the entire page in Divine Elemente 0.9. But possibility to set background for widgets and grid blocks will be available in the next version of Divine Elemente plugin.

Have ideas about how to improve this functionality? Create a post at our forum or become a beta tester.

Optional parameters

For more detailed page settings, you can specify your own stretch parameters for each background part.

For example: Leave No Stretch for ‘Header’, set Seamless Stretch for ‘Content’ and use Simple Stretch for the ‘Footer’.

You can also set a position and width of stretch area for each grid block. To do that, drag stretch area's boundaries on the canvas or set its exact position and size in the Properties panel.

Stretch parameters. Stretch area's specifying.

Stretch parameters. Stretch area's specifying.

It's necessary to set the following parameters for exact specifying of the stretch area:

- Stretch: Distance from top (px). It sets a top point of the background area, which will be used for the background's gaps filling.
- Stretch: Height of tile (px). It allows to set the background area’s height that will be used for the background's gaps filling.

Almost each option includes a ‘Fade’ parameter.

Fade effect

The ‘Fade’ effect is a parameter that allows to create an effect of image's smooth transition into a background color.

Fade parameter. Setting of the parameter's values.

The above parameter's values are indicated in percentage ratio from the entire block across and down accordingly.

Using the fading background images considered above, you can improve your theme's look and quality and create really unique design of your website.

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

Conclusion

You have just found that it’s really possible to create a seamless background image performing no manual work, but several clicks only. And you have a choice of stretch parameter for your personal needs during website design creation with possibility to use the ‘Fade’ effect.

Related guides and tutorials

  1. Layout Editor
  2. Quick start guide
Read More »

Addition and use custom fonts on website

Addition and use custom fonts on website by Dmitriy, Divine Elemente Team | |
Want to create a modern unique design for a website applying not only safe web fonts? You will do it with no problems, using custom fonts with Divine Elemente. Plus, addition of custom fonts on website in several simple steps.

Related: Elements, Properties, Advanced text effects and publishing
[divineAds]

Custom fonts are new attractive fonts, which are not included in the list of safe web fonts at the moment. However, they were added to a page layout by Divine Elemente using the latest achievements in CSS.

Use of custom fonts on website

Use of custom fonts on website

Nowadays, almost all modern browsers (Firefox 3.5+, Chrome 3.0+, Safari 3.1+, Opera 10+, IE 5+) work with custom fonts embedded in a website by CSS.

Custom fonts usage is a step towards new possibilities for a web developer. It is a way to speedy, convenient and various websites. With optional fonts, you’ll be able to improve your website’s design and make it really unique.

Advantages

- Use of CSS only
There is no necessity to use images, Java scripts or flash objects, which slow down website’s loading speed.

- Ideal for SEO
A text remains as a text, in other words, it can be highlighted, change color, become bold or underlined, etc.
Disadvantages

- Website loading speed
depends on the size of a loading font (additional 30-75 kB).

- Restriction on use
Each font has its own license.

Info: Because of long duration and high cost of one font development process, developers take tender care of their own custom fonts using in the Internet, as at page browsing a font is loading locally on the computer and becomes public.


Custom fonts use in Divine Elemente

To add custom fonts on the website with the help of Divine Elemente plugin, it’s necessary to follow several simple steps.
The process of new font’s addition to a template

The process of new font’s addition to a template

Step 1. Download and install a desired font.
You can use our Fonts portal to purchase or download new custom fonts.

Step 2. Specify a font of a text layer in a PSD template.
You are to open a PSD template in Adobe Photoshop, select a text layer there and apply the installed custom font to it, as it is not included in the list of safe web fonts.

Step 3. Launch Divine Elemente and publish a theme.
At publishing of custom fonts, Divine Elemente plugin will display an appropriate message in the log.

After the publishing, the font will be copied in a separate file (or files) and applied to a generated theme / web page.

Note: In case a selected font was not installed in a system for any reason, a font from the “Safe web fonts“ list would be used by default.


Conclusion

Thus, you have just learned what custom fonts are, advantages and disadvantages of custom fonts on website use and easy steps of such kind fonts’ addition. So, now you can decide yourself: use or not to use.
Read More »

Multi-page Website Creation with the Predefined or Custom Content

Multi-page Website Creation with the Predefined or Custom Content by Dmitriy, Divine Elemente Team | |
Want to create a website with any number of pages connected with each other but don’t like to spend much time playing with each web page creation for a multi-page website? Divine Elemente plugin and our guide will show you the way ;-)

Related: Elements, Properties
[divineAds]

In addition to the main task of Divine Elemente plugin - CMS themes creation, there is a powerful ability to create multi-page websites. In other words, with Divine Elemente you can get a possibility to create several pages from just one template.

Multi-page work principle

Multi-page work principle.

First of all, it allows to connect items of navigation menu either with current pages or new ones created by you. And all these pages of various types will have a custom content or predefined one (such as contacts, portfolio or gallery with separate images).


Workflow and properties

To create a multi-page website and connect a navigation menu with its web pages, you are to follow these several simple steps:
Multi-page. Workflow and properties

Multi-page. Workflow and properties.

  1. Create a new page (“Create / rewrite page”) in this element’s Page property for the Menu widget > ‘Link’ element.
  2. Indicate a page name and change the content if required that will be used as a page filler. Besides, you can choose a predefined template.
  3. Publish a theme.

‘Page’ Properties (Menu widget > ‘Link’ element)

You can find a Page property in the Properties panel of the Publish Editor. It’s available only for each ‘Link’ element (in the Menu widget).

Multi-page. Properties

Multi-page. Properties.

A. Create / rewrite page - it helps to create a new page at the website. If this option is enabled, a new page will be created or a current page with the custom content or predefined one will be rewritten at publishing.

Warning! Each page with predefined or custom content creates a new or replaces a current page with the same name at the website!!!

B. Page name and content type - here you can enter a name for a page. Also in the dropdown menu of this field you can choose a content template of a new page.

C. Page content - here is a custom page content. You can put a page custom HTML code into this field.

D. Unique or linked page names - it switches on / off uniqueness of the page name.

E. Add comments fields to the page - it switches on / off comments fields on a new page.

More details on elements and their properties can be found in the "Elements" guide and "Properties" guide.

Templates for content

Divine Elemente plugin can both create new pages and fill them with the predefined content. In the options of the Menu widget > ‘Link’ element you are to indicate a page content’s type that will be used.

Multi-page. Predefined content - the ‘Page’ template

Multi-page. Predefined content - the ‘Page’ template

Multi-page. Predefined content - the ‘Portfolio’ template

Multi-page. Predefined content - the ‘Portfolio’ template

Multi-page. Predefined content - the ‘Contact us’ template

Multi-page. Predefined content - the ‘Contact us’ template

All predefined types of the content are displayed in the Page name and the content type’s field. You can also set your custom content for a new page. To do that, you can make changes in the predefined content code in the ‘Page content’ field or replace the entire code by your own one.

Multi-page. A custom content.

Multi-page. A custom content.

The page will be filled in accordance with the indicated content type at publishing, what can be changed later at the WP backend.

Warning: Each page with the predefined or custom content creates a new page or replaces a current one with the same name at the website!!!

We recommend you to get acquainted with the "Best practices" guide for more accurate creation of a multi-page website.

Page names: Unique or linked

In some exceptional cases, you may wish to use a page name more than one time for more than one ‘Link’ element of the Menu widget.

Example: an usual link ‘Prices’ in the Header’s top menu, and huge_accented_red (thanks to the marketing department) ‘Buy now’ button with the same link “prices.html”

Page names. Unique or linked

Page names. Unique or linked.

Linked page name

In these cases mentioned above Divine Elemente automatically connects these page names to one unique name, indicating this state with ‘Linked page name’ icon on the right ‘Page name and content type’ field.

If you select a current page (for the other ‘Menu item’ element), it will be marked (A) icon

It means that the ‘Menu item’ element will refer to the same page as the other ‘Menu item’ element will, for which this page is created.

This done for more meaningful page naming behavior, like in CMS (you create a page ‘Prices’ one time, then you simply add a link to this page many times, but not create many same pages with the same name).

Unique page name

If you’d like to create a new identical page for this element, you are just to click on the icon by left mouse button. After that, it will be changed to icon (B) and a numerical index will be added to the page’s name (‘About us’ > ‘About us1’).

Note: If you accidentally named a page the same way as the other page, you can easily rename it making it unique or disable ‘Linked page name’ state by clicking on the button with the ‘Linked page name’ icon.


Conclusion

Thus, you have just learned how to create a multi-page website using current web pages or making new ones with Divine Elemente plugin, and have known about the predefined and custom content that can be used for this purpose.

Related Guides and Tutorials

Read More »