About the correct distribution and naming of layers in Adobe Photoshop

A few introductory words

What I will tell in this article is based on my personal experience and good attitude towards the people who make the layout. It will be useful, firstly, to web designers who are engaged in large multi-page portal-type sites, secondly, to any other designers using Photoshop and, thirdly, to customers who want to control the hired employee. I actually want to tell about the correct distribution and naming of layers in Photoshop when working on layouts. I do not pretend to know-how. All this is known without me, but the last layout, which was sent to me on the layout, was Kashka and I firmly decided to publish this small, but, I think, useful little article.

What will it give you?

At a minimum, a sense of order and beauty. In between, thanks to the maker. Above all, time saved.

Principle No. 1 - Cataloging

The site usually consists of many layers, and when something is collected very much, as sages told us, it needs to be cataloged. I joked, the wise men did not say this, but still. A priori, when everything is laid out on the shelves, we do not spend too much time searching for the right thing, and it pleases the eye. There is a picture for example:
')

Principle # 2 - Proper Naming

Problem. Imagine, say, a deck of 36 cards neatly laid out on top of the table with the shirt up. Urgently need to find the peak woman, so that she did not do silly things. In order to do this, you have to turn over each card. If the deck was originally put shirt-down, you would have found the villain instantly, looking around the space. Your unsigned layers are face-down cards. If it seems to you that a preview is enough to determine the layer's content, you are mistaken. Sometimes, to find a layer that contains the desired element, you need to sort out a few others, and even drag something with the mouse. Auto-select requires extra time and is not familiar to everyone, if you remember about it.

Common names. All must be called by their proper names. If this is a top (top) - write “top”, “top” or “cap” - if this is a “bottom” (bottom) - write “bot”, “bottom”, “foot” or “basement”. A layer with a shadow from a plate should be called a “shadow” and if there are many such layers, it’s not scary - after all, they will all be laid out in different directories and will not create confusion (see Principle No. 1). If the site contains, for example, 3 columns, I recommend calling them “Left”, “Center” and “Right”. It is necessary to develop a system of abbreviations, for example, instead of “Gradient”, write “Grad”, in place of the word “Basis”, write “Base” because of its shortness, and so on.

Signed names. I often have the need to draw the underscore separately (without the function of underlining the text), since I really like to experiment with its color. However, the words “Underscore” and “Underline” are too long, so I simply replace them with symbols.


In orange, a set is written using the Ilya Birman layout.

My sign system does not claim to be the only correct one. You can come up with your own notation, which will be understandable to you, but it is worth remembering that they must be understandable and coder. In any case, it is worth writing him a memo. The application of Principle 1 and Principle 2 should give approximately the following results:



If the links are arranged in a row, then all the underscores can be combined into one layer, although this is not so convenient, but sometimes it is cost-effective. In this case, you can call the layer, for example, "_all" or "_all", as you prefer.

Principle No. 3 - Color Highlighting

To bring the layout to an extreme degree of convenience and clarity, I recommend using color coding. This will help not so much the coder as you do, because the color association works faster than the text one. Hence, faster orientation in the layout.

If you please, you can use my color selection system, which I will describe here as an example.

So, all in Photoshop for color selection there are 7 colors:



I distribute them like that. Red - center or main column \ field. Orange - a hat or something on top. Yellow - highlighting the drawing of active elements (drop-down menu, pop-up windows). Green - right column, if any. Blue - left column. Purple - accidents (headers, complex design elements). Gray - the basement or what is below.

Conclusion

In conclusion, I’ll just show you examples of layouts using these principles: