About the correct distribution and naming of layers in Adobe Photoshop

    Inside layout

    A few introductory words

    What I will tell in this article is based on my personal experience and good attitude towards people who make typesetting. This will be useful, firstly, for web designers who are engaged in large multi-page portal-type sites, and secondly, for any other designers using Photoshop and, thirdly, for customers who want to control a hired employee. Actually, I want to tell you 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 even without me, but the last layout that was sent to me for layout was a mess and I firmly decided to publish this small, but, I think, useful article.

    What will it give you?

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

    Principle No. 1 - Cataloging

    A site usually consists of many layers, and when a lot of things are collected, as the sages told us, it needs to be cataloged. I joked, the sages did not say this, but anyway. A priori, when everything is laid out on the shelves, we do not spend too much time finding the right one, and it pleases the eye. There is a picture for an example:

    Principle 1

    Principle No. 2 - Proper Naming

    Problem. Imagine, say, a deck of 36 cards neatly laid out on the table with the shirt up. An urgent need to find the Queen of Spades, so that she did not do stupid things. In order to do this, you have to turn over each card. If the deck was originally laid down with your shirt, you would find the villain instantly, looking around the space. Your unsigned layers are cards laid face down. If you think that a preview is enough to determine the contents of a layer, you are mistaken. Sometimes, in order to find a layer that contains the desired element, it is necessary to sort through several 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 it is a top, write “top,” “top,” or “hat,” if it is “bottom,” write “bot,” “bottom,” “foot,” or “basement.” A layer with a shadow from a die should be called a “shadow”, and if there are many such layers, it’s not scary, because 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 worth developing a system of abbreviations, for example, instead of “Gradient” write “Grad”, in the place of the word “Foundation”, write “Base” because of its shortness and so on.

    Significant names.I often have a need to draw underscores separately (without the function of underlining text), since I really like to experiment with its color. However, the words “Underline” and “Underline” are too long, so I just replace them with characters.

    Abbreviation Table
    The set was written in orange using the layout of Ilya Birman.

    My system of signs does not claim to be the only correct one. You can come up with your own designations that will be understandable to you, but it is worth remembering that they should be understandable to the layout designer as well. In any case, you should write him a memo. The application of Principle 1 and Principle 2 should give approximately the following results:

    Principle 2

    If the links are arranged in a row, then you can combine all the underlines into one layer, although this is not so convenient, but sometimes cost-effective. In this case, you can name 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 layout designer as you, because the color association works faster than the text association. Hence the faster orientation in the layout.

    If you wish, you can use my color scheme, which I will describe here as an example.

    So, there are 7 colors in Photoshop for color highlighting:

    Photoshop colors

    I distribute them like this. Red - center or main column \ field. Orange - a hat or something on top. Yellow - selection of drawing active elements (drop-down menu, pop-ups). Green - the right column, if any. Blue- left column. Violet - accidents (headlines, complex design elements). Gray is the basement or what's below.


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

    Examples of using principles

    Photoshop colors

    Also popular now: