Photoshop Keyboard Shortcuts That You Must Know

Photoshop Keyboard Shortcuts That You Must Know by Dmitriy, Divine Elemente Team | |
{clear} THUMBNAIL_BEGIN #image: keyboard-photoshop-shortcuts.jpg; #description: Keyboard Photoshop shortcuts that you must know. Keyboard Shortcuts are keystrokes that usually (not always) involve a modifier key (such as Ctrl, Alt of Shift) that help quick invoking a command. THUMBNAIL_END {/clear}

Keyboard Shortcuts are keystrokes that usually (not always) involve a modifier key (such as Ctrl, Alt of Shift) that help quick invoking a command.

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 »

PSD Hints – Speeding up of Publishing Time

PSD Hints – Speeding up of Publishing Time by Dmitriy, Divine Elemente Team | |
In this guide, we are going to explain how you can fasten your work greatly at template's creation, and what the PSD hints are in fact. PSD hints use and layer naming with Divine Elemente.

Related: Elements, Layout Editor, Publish Editor
[divineAds]

We added a PSD hints support starting from Divine Elemente. It will help to simplify and fasten the process of template's creation and CMS theme's preparation greatly.

PSD hints, the named special hint group or layers in PSD, are used for automatic defining of elements what speeds the publish process in some cases in 30 times!

PSD hints, the named special hint group or layers in PSD, are used for automatic defining of elements what speeds the publish process in some cases in 30 times!

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 kind. Elements can always be assigned in the Publish Editor one-by-one:

Choose the right method for you: Comparison of two approaches for elements assignment

Choose the right method for you: Comparison of two approaches for elements assignment.

Publishing speed: Comparison of automatic and manual approaches for elements assignment

Publishing speed: Comparison of automatic and manual approaches for elements assignment.

A hints list for all elements can be found in the "Element's hints list".

PSD Hints limitations:

  • Elements assignment shouldn't break the frame boundaries of a grid block in order to publish them!
  • Limitations on Adobe Photoshop folders' nesting (for CS - CS4 - no more than 5; for CS5 - more than 5).
  • Auto setting of groups is working starting from Adobe Photoshop CS and higher.
  • There are no groups in Photoshop Elements, PSD hints are limited by layers.
  • Boundaries of a paragraph text shouldn't break frames of a grid block.

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


Rules of PSD hints use

1. Use groups' names for PSD hints.
In other words, each element gets a Photoshop group with an appropriate PSD hint name, detailed in the Element's hints list.

2. Nested groups for an appropriate element state are taken into account.
It will help to define the element states like normal, hover, visited, click.

Rules of PSD hints use. Work with groups.

Rules of PSD hints use. Work with groups.

3. Layers are not taken into account for auto setting (so you may name them as you wish).
Only group's name is used for auto setting.

4. Only the top text layer is to be chosen as an element's text.
In case an element consists of several different text layers, only the top text layer is to be selected as an element's text. The rest layers in the group merge into one image.

Rules of PSD hints use. Work with text layers.

Rules of PSD hints use. Work with text layers.

5. An element will not be defined in the Publish Editor, if any of its layers breaks boundaries of an appropriate grid block.

Rules of PSD hints use. Crossing of a grid block's boundary.

Rules of PSD hints use. Crossing of a grid block's boundary.

Hint: If you create a new PSD template from the Layout Editor, the order of layers and their groups will be created automatically in accordance with the structure and added elements in the Layout Editor.

More details on the list of PSD hints with elements description can be found in the Element's hints list


PSD hints use: where and how

It's just an optional possibility as it was said before. This functionality was developed for those who like or need to change theme's design very often. Mainly, such people are designers, web developers or fastidious bloggers.

In case you use a template for theme creation only, without applying any changes later, you'd better assign elements in the Publish Editor. It'll be much easier and faster.


Related Guides and Tutorials:


External links


PSD Hints, Elements And Best Practices

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

Read More »