background layer. Regular layers and the Background layer

Consider the concept of layers, the background layer. Creating layers. Layer transformation. Layer locks. Opacity and Fill.

The main work in editing and selective image correction is to create selected areas. Since the objects on them are not isolated in any way in raster images, this stage is necessary, although it is the most difficult. Selected areas can be saved as masks in alpha channels (more on that later). Storing the boundaries of objects as masks does not look very natural. The object (image fragment) is stored in one place, and its boundaries - in another.

Starting with version 3.0, Photoshop offers a flexible and convenient way to store object layers. If we turn to analogies, layers are like transparent films stacked in a stack. One object is drawn on each film, and the rest of it is empty (transparent). If you look at such a stack from above, you will see the result of the superposition of the objects depicted on the films.

Every image in Photoshop has at least one layer. It is with such single-layer images that you have dealt with until now. Single-layer images are obtained by scanning and opening files in the vast majority of graphic formats.

The single layer that has the most images is called background (Background) and different from other layers. The main difference is that the background layer cannot have transparent areas. If we likened the layers transparencies, then the background layer is more like a sheet of paper. background layer always located below other layers and serves as a background for the objects placed on them.

Open the pepperts.jpg document from the Sample folder (located in the Photoshop folder). Now, using this layer as an example, consider the Layers palette, which is responsible for working with layers. If you do not have it on the screen, then get it using the command Window|Layers.

The Layers palette contains a list of layers, transparency settings, a set of commands that prohibit a number of actions, and a set of commands that control layers.

Creating layers.

This operation is key in working with layers. There are several ways to create a new layer. Creating an "empty" layer is done in two ways: through the menu Layers|New|Layers...(combination Shift+Ctrl+N) or by clicking on the icon of the layer control group of the Layers palette. If you create a new layer in the first way, then the following dialog box will appear in front of your eyes:

Each layer can be called a proper name. This helps to find it in a bunch of layers. If you have several layers that have some kind of connection (absolutely yours - associative), then you can set the tinting of the layer line in the Layers palette with a certain color. Then you know for sure that the lines tinted with the same color by you have a certain logical connection. This key color you can choose in the field color. What is the blending algorithm and opacity you already know by the example of brushes. So far, only the flag remains incomprehensible Group With Previous Layer(group with the previous layer), but this is only until we have considered the concept of grouping layers.

By doing this, you have created a completely empty layer. There can be transparent places on the layer - these are places where there is no image. In our case, the layer is completely transparent because it is new and contains nothing.

Now let's try to paint on a new layer. Pay attention to the following rule:
all actions that you perform apply only to the active layer;
What you have just drawn applies only to the active layer. The active layer is easily distinguished by the "blue highlight" of its row in the Layers palette and by the brush icon to the left of its row in the Layers palette. To make a layer active, simply click on its row in the Layers palette.

Now let's make sure our drawing is related to our layer. To the left of the layer line in the Layers palette, in addition to the "activity" icon, there is an icon button that allows you to turn the display of the layer on or off. Let's turn off the display of our new layer - if your impromptu drawing is gone, then you did everything right. If it's the other way around, then you're most likely drawing on the wrong layer. There is a small feature here - if the display (visibility) of the layer is disabled (a), then nothing can be done on the layer until you activate it with one click on the icon where the "eye" used to be (it disappears when you turn off the display of the layer).

Very often it becomes necessary to create a new layer, which is an exact copy old, existing. This result can also be achieved in several ways. The first way is the command Duplicate Layer... Layer menu. This ellipsis means that the command will be followed by a dialog box in which you can set the settings for the copy of the layer.

Now let's look at our options. Field As allows you to specify the name of the created duplicate. In chapter Destonation you can specify where the layer is copied (to which document). If you have several documents open, in the drop-down menu document you will find a complete list open documents and in addition paragraph New. If you want to create a new document based on the copied layer, then this is exactly what you need. The field below is activated Name, in which you must enter the name of the document to be created.

Another way to duplicate a layer is that we select the command Duplicate Layer... from context menu layer copy. The situation is exactly the same as in the previous case. An absolutely identical command is located in the menu of the Layer palette. Everything for your convenience. However, there are more fast way creating a duplicate. Just grab the copied layer with the mouse cursor (left-click) and drag the layer line to the icon for creating a new layer the Layers palette.

Let's go back to the background layer. In order for the background layer to become normal, simply double-click on its line in the Layers palette. In response to your actions, a dialog box for creating a new layer will appear (we have already considered it above).

Now let's move on to a more complex and often used option - creating layers from selected areas. To do this, we will create a selection of a rectangular shape on the background layer of the papperts.jpg document. Now the most classic version- work with the clipboard. Copy the selected area to the clipboard (or menu Edit|Copy or keyboard shortcuts ctrl+c). Now, if you paste the previously copied fragment from the clipboard (or the menu Edit|Paste or keyboard shortcuts ctrl+v), a new layer will automatically be created, on which the previously selected area will be located. It is clear that at first you will not notice anything, except for the appearance new line layer in the Layers palette. Now make the background layer invisible and everything will fall into place. A similar action will be performed by cutting (or Edit|Cut or keyboard shortcuts Ctrl+X)) of the selected area to the clipboard. The only difference is that in place of the cut out area, a fragment of the background layer will remain painted in the background color. If the layer from which the image fragment was cut is not the background, then in place of the cut out area there will be a transparent "hole" in the layer. You can paste image areas on the clipboard into any document. And in this case, the result of the paste operation will be a new layer. These operations can also be done using the Layer menu commands. These commands are in the menu Layer|New, respectively Layer via Copy, which means "create a layer by copying" and Layer via Cut- "create a layer by cutting (cut)".

It is possible to create an already filled layer. If you need this option, then there are three possibilities: a layer with a solid fill (solid), a layer with a gradient fill (gradient) and a layer filled with a texture fill (pattern). To create such a layer, you can use the command from the group New Fill Layer layer menu. If you choose item Solid... then in the first dialog box you will be prompted to configure created layer, and in the second set the fill color. If you choose Gradient... then immediately after the layer creation dialog box, you will be prompted to set the gradient that will fill the created layer. The gradient settings in this case are exactly the same as the normal gradient settings. Everything is no less prosaic if you choose to create a texture fill, i.e. paragraph Pattern...

We already know how to create layers, we know how to copy, and now we will learn how to delete. In fact, nothing complicated - to break not to build. To delete a layer, simply select the layer row in the Layers palette and click on the icon in the layer control group of the Layers palette. Other ways - command Delete layer or from the context menu of the layer or from the menu Layer|Delete|Layer.

In the 7th version of Photoshop there is such a thing as a Layer Set (a set of layers). This is nothing more than a folder for layers. Those. you can create a set of layers according to some single principle - usually they are united by a common blend mode or the use of a single color channel. These parameters can be set to a set of layers as a whole, which makes it easier to work with large quantity layers. There are also some tools for working with all layers, the impact of which can be limited for the selected set of layers, for example Adjustment layers (so far this does not say anything). Working with a set of layers is similar to working with files and folders in a file manager (for example, explorer). First of all, you can create a folder. This is done by the team New Layer Set command groups New from the Layer menu or by pressing a button from the Layer Controls group of the Layer palette. In this case, you will have the opportunity to set the basic parameters of the layer set in the dialog box that appears.

Among the suggested settings you will find the ability to change the name of the set, the key color (same as for layers, see above) and the blending mode. The only new thing is the Pass Through blending mode, which means "pass through" - it's just a blending mode in which all layers behave as a whole. In order to add a layer to a layer set, simply drag its line in the Layers palette onto the icon of your layer set in the Layers palette. In order to remove a layer from the layer set, you also need to drag it onto the layer set icon in the Layers palette.

Next to the name of the layer set, on the left is a triangle , when clicked on, all rows of layers included in the layer set are hidden, and when clicked again, they are shown again. I note that this is a very useful feature. Speaking of properties; properties of a layer set can be called from the context menu of the icon of a layer set with the command Layer Set Properties.

Checkboxes R G B allow you to specify which color channels can be displayed and which not to display.

The layer is subject to any transformation, just like the selected area. You can rotate the layer, resize it, distort it, etc. To move the layer, use a tool called the Move Tool, which is located at the top right of the tool palette. This tool can also be called with the key V.

If you hold down the button while moving the layer Shift, then the layer will move strictly in the direction you choose - horizontally or vertically. If you hold down a key while moving alt, then you will get a copy of the layer.

The transformation of layers occurs in the so-called mode Free Transform. You can enter this mode in two ways - or use the appropriate command - Free Transform menu Edit-, or the Ctrl+T combination. The principles of operation in this mode are completely similar to the principles of operation with the Transform Selection mode in the case of selected areas. You have markers on the overall box, there are hot keys alt- symmetrical resizing, Shift- proportional resizing, ctrl- work with each marker separately. To exit the mode, simply press Enter.

It also provides precise transformation of the layer. To do this, the Edit menu has a set of Transform commands. The first five teams Scale, Rotate, Skew, Distort, Perspective lead to the properties panel on which you can perform all these operations.

Layer offset control is analogous to simple movement layer with the Move tool. pay attention to the first icon of this group of settings. The displacement is always relative to some point. By default, this point is located at the geometric center of the layer. On the icon we have indicated, you can just change the position of the point relative to which the shift will occur. To do this, simply click on the small rectangle, which symbolizes the position of the offset point. After you have chosen a shift point, you can specify in the X and Y fields the absolute coordinates to which you want to move the layer, or by pressing the button and switching to the relative shift coordinates mode, specify how many pixels you need to shift horizontally and vertically your layer.

The next set of fields is for changing the size of the layer. In percent, the size increment is set horizontally and vertically. If you want the dimensions to change proportionally, then simply click on the button, which is located between the increment fields vertically and horizontally.

Then there is a field where you can set the rotation angle of your layer. By default, rotation is clockwise. If the rotation angle is set as a negative value, then the rotation will be counterclockwise.

Horizontal and vertical shift needs some comment. Imagine that your layer is enclosed in a rectangular shaped box, and then we will blend the top of the box to the side horizontally. The result obtained is called the horizontal shift. The main parameters of the shifts are the angles by which the vertical sides of the bulk box deviate - in the case of a horizontal shift, and the horizontal sides in the case of a vertical shift. You can set these angles in the corresponding fields on the properties panel in the shift section.

Completes the properties panel with two buttons. Accordingly, this is an exit from the transformation mode, and the approval of the introduced transformations. on the keyboard, respectively. Enter is to confirm the changes, Esc cancel changes.

The Transform command group also contains the most commonly used commands, such as rotations, standard angles, and the like. Consider:

• Rotate 180- rotate the layer by 180 degrees.
• Rotate 90 C.W.- rotate the layer 90 degrees clockwise.
• Rotate 90 CCW- rotate the layer 90 degrees counterclockwise
• Flip Horizontal - mirror reflection horizontally
• flip vertical- mirror reflection vertically

Layer locks.

Layer locks are designed to protect a layer from unauthorized user operations. The lock buttons are at the top of the Layers palette, a group of icons we've labeled as "prohibit actions."

You can protect transparency - this is a pictogram. Protect transparency Preserve Transparancy means do not allow filling transparent fragments of the layer. This is a fairly commonly used technique.

The last icon applies all prohibitions at the same time.

Opacity and Fill.

You already know what opacity is from the example of working with drawing tools. For a layer, opacity has the same meaning as for drawing tools, only in this case changing the transparency will apply to the entire layer as a whole. The same goes for overlay algorithms.

The concept of Fill (the Fill field is at the top of the Layers palette) is almost completely analogous to the concept of transparency. But....

The main thing is that it is impossible to apply some effects related to transparency to the transparency set via Fill.

• tutorial

We've touched on the CSS3 Backgrounds and Borders module before, covering box-shadows. Today we will talk a little about another interesting opportunity— use of several images in the background.

Background composition

There are many reasons why you might want to compose multiple images in the background at all, the most important of which are:

• saving traffic on the size of images, if the individual images in total weigh less than an image with flattened layers, and
• the need for independent behavior individual layers, for example, when implementing parallax effects.

Classic approach

The "fishing" class block inside "mermaid" is for demonstration purposes only.

Now some styles:
.sample1 .sea, .sample1 .mermaid, .sample1 .fishing ( height:300px; width:480px; position: relative; ) .sample1 .sea ( background: url(media/sea.png) repeat-x top left; ) .sample1 .mermaid ( background: url(media/fish.svg) repeat-x bottom left; ) .sample1 .fish ( background: url(media/fish.svg) no-repeat; height:70px; width:100px; left : 30px; top: 90px; position: absolute; ) .sample1 .fishing ( background: url(media/fishing.svg) no-repeat top right 10px; )

Result:

AT this example three nested backgrounds and one block with fish, located next to the "background" blocks. In theory, fish can be moved, for example, with JavaScript or CSS3 Transitions/Animations.

Incidentally, this example uses the new syntax for background positioning for ".fishing", also defined in CSS3:
background: url(media/fishing.svg) no-repeat top right 10px;
It is currently supported in IE9+ and Opera 11+, but is not supported in Firefox 10 and Chrome 16. So users of the last two browsers will not be able to catch a fish yet.

Multiple backgrounds

And the corresponding styles:
.sample2 .sea ( height:300px; width:480px; position: relative; background-image: url("media/fishing.svg"), url("media/mermaid.svg"), url("media/sea. png"); background-position: top right 10px, bottom left, top left; background-repeat: no-repeat, repeat-x, repeat-x ; ) .sample2 .fish ( background: url("media/fish.svg ") no-repeat; height:70px; width:100px; left: 30px; top: 90px; position: absolute; )
To define multiple images, you must use the background-image rule, listing individual images separated by commas. Additional rules, also a list, can set positioning, repetitions and other parameters for each of the images. Pay attention to the order in which the images are listed: the layers are listed from left to right from the top to the bottom.

The result is exactly the same:

One rule

Styles:
.sample3 .sea ( height:300px; width:480px; position: relative; background-image: url("media/fishing.svg"), url("media/mermaid.svg"), url("media/fish. svg"), url("media/sea.png"); background-position: top right 10px, bottom left, 30px 90px, top left; background-repeat: no-repeat, repeat-x ; )

I will not give a picture with the result - believe me, it coincides with the two pictures above. But pay attention to the styles again, especially to “background-repeat” - according to the specification, if part of the list at the end is skipped, then the browser must repeat the specified list the required number of times to match the number of images in the list.

In this case, it is equivalent to this description:
background-repeat: no-repeat, repeat-x, no-repeat, repeat-x;

Even shorter

Sample4 .sea ( height:300px; width:480px; position: relative; background: url("media/fishing.svg") top right 10px no-repeat, url("media/mermaid.svg") bottom left repeat-x , url("media/fish.svg") 30px 90px no-repeat, url("media/sea.png") repeat-x; )

But note that now you can’t just skip values ​​(unless they are the same as the default value). By the way, if you want to set the color of the background image, this must be done in the very last layer.

Dynamic Images

By the way, here is an example from life - a topic with a dandelion in Yandex:


If you look into the code, you will see something like this:

...

Blocks with classes "b-fluff-bg", "b-fluff__cloud" and "b-fluff__item" contain background images that overlap each other. Moreover, the background with clouds constantly scrolls, and dandelions fly across the screen.

Can this be rewritten using multiple backgrounds? In principle, yes, but subject to 1) support for this feature in target browsers and… 2) read on ;)

How to add dynamics to multiple backgrounds? In such a situation, it turns out to be convenient that in the internal representation the browser scatters individual parameters background images according to the relevant rules. For example, for positioning there is “background-position”, and for shifts it is enough to change only it. However, there is a cost to using multiple images - this rule (and any similar one) must list the position for all the backgrounds set for your block, and cannot be done selectively.

To add animation to our fish background, we can use the following code:
$(document).ready(function() ( var sea = $(".sample5 .sea"); var fishesX = 30; var fishesY = 90; var fishX = 0; var fishY = 0; var mermaidX = 0; var t = 0; function animationLoop() ( fishesY = 90 + Math.floor(30 * Math.sin(t++ / 180.0)); if(--fishesX< 0) fishesX = 480; mermaidX += 0.5; if(mermaidX >480) mermaidX = 0; fishY = -10 + (10 * Math.cos(t * 0.091)); fishX = 10 + (5 * Math.sin(t * 0.07)); sea.style.backgroundPosition = "top " + fishY + "px right" + fishX + "px, " + mermaidX + "px bottom," + fishesX + "px " + fishesY + "px, top left"; window.requestAnimFrame(animationLoop); ) animationLoop(); ));
where
window.requestAnimFrame = (function() ( return window.requestAnimationFrame || window.msRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.webkitRequestAnimationFrame || (function(callback) ( window.setTimeout(callback, 1000 / 60 ); )); ))();

And, by the way, animations can also be done through CSS3 Transitions / Animations, but this is a topic for a separate discussion.

Parallax and interactive

Multiple background images are handy in these scenarios because as long as we're only talking about the background (and not the content), using them avoids cluttering up the html code and the DOM. But everything comes at a cost: I can't access individual composition elements by name, id, class, or any other parameter. I must explicitly remember the order of the elements in the composition in the code, and for each change in any parameter of any element, in fact, I must glue the line describing the values ​​of this parameter for all elements and update it for the entire composition.

Sea.style.backgroundPosition = "top " + fishY + "px right " + fishX + "px, " + mermaidX + "px bottom," + fishesX + "px " + fishesY + "px, top left";

I am sure that this can be wrapped in a convenient javascript code that will take care of the virtualization of relationships with individual layers, while leaving the html code of the page as clean as possible.

What's with compatibility?

You can also use Modernizr to provide browsers that don't support multiple backgrounds with alternative solutions. As Chris Coyier wrote in a note about layer order when using multiple backgrounds, do something like this:

Multiplebgs body ( /* Awesome multiple BG declarations that transcend reality and imsourcess chicks */ ) .no-multiplebgs body ( /* laaaaaame fallback */ )
If you are confused about using JS to provide backward compatibility, you can just declare background twice, however, this also has its drawbacks in the form of a possible double loading of resources (this depends on the implementation of css processing in specific browser):

/* multiple bg fallback */ background: #000 url(...) ...; /* Awesome multiple BG declarations that transcend reality and imsourcess chicks */ background url(...), url(...), url(...), #000 url(...);

If you have already started thinking about Windows 8, keep in mind that you can use multiple backgrounds when developing metro style applications, since the same engine is used internally as in IE10.

P.s. On topic: I can’t help but recall a phenomenal article about the cicada principle.

Tags: Add tags

In the last tutorial, we learned how to work with layers using the layers panel. We've learned how to add new layers, remove layers, swap layers, add adjustment layers, apply styles, change layer blend mode and opacity, and much more that can be done from the layers panel.

Before we get further into what amazing things can be done with layers, we need to look at one particular type of layer, the Background layer. The reason why we stop at the study of the layer background, lies in the fact that some actions with this layer cannot be performed, unlike actions with other layers. If we are not aware of these actions in advance, we can easily get confused in our work and not get the desired result.

Below is an image of a photo frame opened in Photoshop. I took this image from the Fotolia photobank:

original image

Whenever we open a new image in Photoshop, it opens in its own document window and is placed on a separate layer called Background (Background), which we can see in the layers panel. Note that the word "Background" is in italics. Thus, the program notifies us of some features of this layer:

The layers panel shows that the image is placed on the background layer

Photoshop named the Background layer for the simple reason that this layer actually serves as the background for our document. Any additional layers we add to the image will be placed on top of the background layer. Since the main purpose of this layer is to serve as the background of an image, there are several actions that cannot be performed on this layer. Let's take a quick look simple rules, which includes these actions that should be remembered. And then, at the end of the lesson, we will learn how easy it is to get around all these rules.

Rule 1: We can't move the contents of the background layer

One of the things we can't do with the background layer is move its contents. Usually, when we need to move the contents of a layer, we select the tool at the top of the toolbar. "Moving"(Move):

Select the Move tool from the toolbar

Then, after selecting the tool "Moving", we click inside the document window and move the content while holding down the mouse button. Let's see what happens when, in our case, I try to move the photo frame to another place. As a result of this action, a dialog box appears, which says that the content cannot be moved because the layer is pinned:

Instead of moving the photo frame, the programPhotoshop notifies me that the layer is pinned

If we turn back to the layers panel and look at the "Background" layer, we will see on the right side small icon in the form of a lock, which tells us that this layer is fixed and cannot be moved by us. There is no way to unlock the "Background" layer, but, as I said, at the end of the lesson, we will look at how this little rule about the inability to move the contents of the layer and other rules can be bypassed:

The lock icon tells us that this layer is pinned.

Rule 2: No transparent pixels

In the near future, I'm going to import another image into my document and place it in a photo frame. However, at the moment inner part the frame is filled with white. This means that I must first clear the white area inside the photo frame and only then place the photo there. Usually when we remove pixels from a layer, the removed areas become transparent and allow us to see the underlying layer. Let's see what happens when I try to delete some area on the "Background" layer.

First, I have to select the area inside the frame, and since it is filled with white color, I will use the " Magic wand"(Magic Wand) . In Photoshop CS2 and above early versions, we can select the tool " Magic wand" by simply clicking on its icon in the toolbar. In Photoshop CS3 and later (in my case it's Photoshop CS5), this tool is hidden behind the "Quick selection"(Quick Selection), so you must first click on the tool "Quick selection"(holding the mouse button down for a few seconds), wait for the drop-down menu with a list of tools to appear and select a tool from the list "Magic wand" :

Select the tool " Magic wand»

By choosing essential tool, I will click the mouse button in the center of the photo frame to fast selection the entire white area. As a result of this action, a selection frame will appear, indicating that the white area is selected:

The white area inside the frame is now selected

To delete the area inside the frame, I'll press the Backspace (Win) / Delete (Mac) key. However, instead of removing the area as expected and replacing the white color with transparent pixels, the program opens the option dialog "Fill"(Fill) and offers to fill the selected area with a different color:

Instead of removing the area, the programPhotoshop opens the Fill option dialog box

I'll hit the Cancel button to exit the dialog box because that's not the command I wanted to run. I wanted to remove the white area inside the photo frame but not fill it with a different color. Maybe Photoshop messed something up? Okay, I'll try to remove the region in another way. To do this, I will go to the section "Editing"(Edit) in the menu bar at the top of the screen and choose the command "Cut out"(Cut):

Select the "Cut" command in the "Editing" section

When working with a normal layer, this action would result in cutting out the selected area from the layer and appearing instead of a transparent part, but in our case the result was again unpredictable. This time, as if on purpose, the program filled the area with black:

The white area inside the frame is now filled with black

Where did black come from? It turns out that Photoshop filled the area with black, because if we look at the foreground and background color swatches at the bottom of the toolbar, we can see that the background color (on the bottom right square) is in this moment black, respectively, the program and filled the area with the background color. If the background color were set to purple, the area would be filled with purple. However, at the moment the background color is black:

Foreground (upper left) and background (lower right) swatches

So why didn't Photoshop remove the white area inside the frame? Why did she fill it with a different color instead? The reason is that background layers do not support transparency. Indeed, since the purpose of the "Background" layer is to serve as the background of the document, there is no need to make it transparent, because there should be nothing under this layer for viewing. After all, the background is still the background! No matter how I try to remove the area inside the frame, I will never be able to do so as long as the image is placed on the background layer. How then can I fit another photo inside the frame? Let's put this problem aside for now and come back to it a bit later.

Rule 3: We cannot move the "Background" layer and place it above another layer

Below is the photo I want to place inside the photo frame. I also took this image from the Fotolia photobank:

Image to be placed inside the photo frame

The image is currently open in separate window, so I'll quickly copy it into the photo frame document window by pressing Ctrl+A (Win) / Command+A (Mac) to select the entire photo. Then I'll press the keyboard shortcut Ctrl+C (Win) / Command+C (Mac) to copy the image to the internal clipboard. After that, I'll go to the photo frame document window and press Ctrl+V (Win) / Command+V (Mac) to paste the image into the document. The program will place the new image on a separate layer called "Layer 1" (Layer 1), located above the "Background" layer with a photo frame:

The second photo is placed on a separate layer above the "Background" layer.

You can see that the new photo has appeared in front of the photo frame in the document window:

The second image appeared in front of the photo frame

In order for my second image to appear inside the frame, I need to change the order of the layers - place the frame layer on top of the photo layer. Normally swapping layers is easy, just select the layer to move and drag it on top of another layer, but not in our case when we want to move the Background layer. When I click on the "Background" layer and try to move it on top of the photo layer, a small crossed-out circle icon (international prohibition sign) appears, indicating that for some reason this action is not possible:

The crossed out circle icon indicates that I can't move the "Background" layer on top of the "Layer 1" layer.

The reason that won't let me move the "Background" layer is that this layer should always remain the background of the document. Photoshop does not allow you to move this layer on top of any other layers.

Rule 4: We can't move other layers under the "Background" layer

Well, if we can't move the "Background" layer on top of another layer, what happens if we try to move another layer below the "Background" layer? I'll click on "Layer 1" and try to move it under the "Background" layer, but that doesn't work either. Again, a small icon appears in the form of a crossed out circle, which means the impossibility of performing an action:

The same inhibit icon appears when we try to move "Layer 1" under the background layer

Again, the reason for this is that the "Background" layer should always remain the background of the document. We cannot move this layer on top of other layers and also move other layers under the "Background" layer.

A simple solution to the problem

Let's summarize the above. We've learned that Photoshop doesn't give us the ability to move the contents of the Background layer using the "Moving" because the layer is pinned. We also learned that the background layer does not support transparency, so there is no way to remove any area on the layer. And finally, we learned that the "Background" layer should always remain the bottommost layer in the layers panel. We cannot move this layer on top of other layers and also move other layers below it.

Since the main purpose of the "Background" layer is to serve as the basis for the document, each of these rules makes sense. However, as with most other rules, sometimes we need to break them. In our case, getting around all these rules is easy! All we need is to somehow rename the "Background" layer! In order to rename the "Background" layer, you can go to the section "Layers"(Layer) at the top of the screen, select "New" (New) and then - "Layer from the background"(Layer From Background):

Choose Layer > New > Layer From Background(Layer > New > Layer From Background)

A faster way is to simply double-click on the word "Background" in the layers panel:

Double-click on the name of the "Background" layer

In any case, after these steps, a dialog box will open. « New layer» (New Layer), where you can enter a new name for the layer. By default, the program suggests the name "Layer 0" (Layer 0), which suits us. Since we can use any other name except "Background", just click OK to accept the new name "Layer 0" and exit the dialog box, provided you don't want to give the layer a specific name:

You can leave the name "Layer 0" as the new layer name, or enter any other name of your choice.

Advice: To rename the Background layer even faster, Alt (Win) / Option (Mac) double-click the word Background. The program will immediately rename the layer to "Layer 0" without opening the New Layer dialog box.

Now we can see that the name of the background layer has changed to "Layer 0":

The "Background" layer has been renamed to "Layer 0"

By simply renaming the background layer, we turned it into a regular layer, as a result of which the rules that we discussed above no longer apply to it! Now we can safely move the contents of the layer using the tool "Moving", delete an area on the layer, replacing it with a transparent part, and freely move our layer relative to other layers!

For example, I still need to move the photo frame over the image on "Layer 1". Now this is easy to do, since the photo frame is no longer on the "Background" layer! All I can do is click on "Layer 0" in the Layers panel and drag it to the top so that a thin line of light appears above "Layer 1":

Move "Layer 0" on top of "Layer 1"

After that, I'll release my mouse button, and Photoshop will place "Layer 0" above "Layer 1", as I want:

"Layer 0" is now positioned above "Layer 1". This could not be achieved while "Layer 0" was called the "Background" layer.

Previously, I couldn't remove the white area inside the frame while the image was on the "Background" layer, but now that I've renamed the "Background" layer to "Layer 0", it's easy to do so. I will select the area inside the frame using the tool "Magic wand" like I did it the first time:

The white area inside the frame is now selected again

Then I'll press the Backspace (Win) / Delete (Mac) key, and this time the program does exactly what I expected - instead of opening the Fill option dialog box, it will remove the area from the layer and display the photo below it:

The area inside the frame is finally removed and another image is visible underneath

Next, I'll press Ctrl+D (Win) / Command+D (Mac) to deselect the area inside the frame and remove the selection line. Then to complete the job successfully, I'll click on "Layer 1" in the Layers panel and make it active:

Choose "Layer 1"

In the toolbar, I will select the tool "Moving"(Move), I will click on the photo and move it inside the photo frame, as I need. Although "Layer 1" is currently the bottom layer in the document, it is not pinned because it no longer serves as a background layer. I can freely move it wherever I want:

Move the photo to Right place inside the photo frame

As we have seen, background layers are a special type of layer in Photoshop, with limitations placed on them. We cannot move their contents, delete anything from them, and they must always remain among the layers of the document at the very bottom. In most cases, these restrictions do not cause us much inconvenience, since we usually do not work directly with the "Background" layer. But if you need to remove the restrictions, just rename the "Background" layer and give it any other name. This action will cause this layer to immediately become a normal layer that you can work with without restrictions!

And here we are! Check out the full list of tutorials on working with layers in Photoshop, or visit our Photoshop Fundamentals section to learn selection tools, font principles, and more!

Translation: Ksenia Rudenko

1. Set the foreground and background colors to reverse the default white for the foreground and black for the background. The easiest way to change the foreground and background colors is by clicking on the corresponding icon in the tool palette or by pressing a key.

2. Choose a team Canvas Size from the Image menu

3 The dialog box that opens (Fig. 5 3) is divided into two areas "Current Size and New Size" are selected from the drop-down lists next to the Width and Height fields Enter "29 cm" and "23 cm" in these fields, respectively.

Rice. 5.3. Canvas Size Dialog Box

4. The Anchor element allows you to select the sides of the image, relative to which the size of the canvas will be increased. Imagine that it is an already enlarged canvas. The buttons then determine the position of the original image on that canvas. By default, the image will be placed in the center (margins will be added on each side of the image) We want the image to be in the left upper corner enlarged canvas, therefore, you need to press the upper left button

5. Click OK. Black margins will appear to the right and bottom of the document (Figure 5. 4). Now it is clear that setting the background color in the first step was required in order for the fields to immediately have the desired color, black.

Layers Background is a special layer. Its main difference is that it cannot have transparent areas.

1. Activate the Background layer

2. Select the Magic Wand tool

3. Set Tolerance to "1" in the Magic Wand Tool's Properties Palette

4. Select the black background of the canvas margins.

Rice. 5.4. Canvas size increased

5. Set the default foreground and background colors by clicking on the corresponding icon in the tool palette or by pressing the key

6. Select from the menu Edit command Clear or press the Del key. This command removes pixels from an image. For the Background layer, "deleting" is treated as bringing them to the background color. As you can see, the background has become white.

7. The Background layer can be converted to an ordinary layer. Double click on the Background layer thumbnail in the Layers Palette

8. In the Make Layer dialog box that opens, give a name to this layer, for example, "north" To do this, enter a name in the Name field instead of the default Layer 0 located there (Fig. 5.5)

9. Click OK. There are still two layers in the layers palette. The image in the document window has not changed in any way either. However, there are changes, and you will see them now.

10. Select the Clear command from the Edit menu or press the Del key. The result of this command is not at all the same as in step 6. The removed pixels are not painted in the background color, but become transparent. There is no background in the image now.

Rice. 5.5. Make Layer Dialog Box

Note

If you print an image with transparent areas and no Background layer on the printer, then the transparency will be transmitted by the absence of the image.

For the reverse operation, turning a normal layer into a Background, you need to perform several actions.

1. Set the foreground and background colors to be the reverse of the default: white is the foreground and black is the background.

2. Another way is to create a new Background layer. Select the Background command from the New list nested in the Layer menu. A new Background layer has been formed in the document, all pixels of which have the same color as the current background.

3. Any number of image layers can be combined into one. Flattening commands "stick together" the layers of an image. At the same time, the pixels upper layers replace the pixels below. The flattening operation is irreversible, as the replaced pixels are lost forever. Now that the Background layer is created, it remains to flatten it with the north layer. Activate the north layer and choose the Merge Down command from the Layer menu. The north layer will be flattened to the underlying Background layer.

Note

A useful command for merging multiple layers into one is Merge Visible, found on the Layer menu. To use it, you must first make visible only those layers that need to be reduced. The third flatten command, Flatten Image from the Layer menu, flattens all layers of an image. Most often, it is used at the end of work on the image and is necessary for subsequent import into the layout program or preparation of illustrations. These programs often do not support PSD format, but work mainly with TIFF formats or EPS. It is also more convenient to store finished images in a reduced form. This greatly reduces the size of their files.

background layer
The layer named Background (which we call background) has special properties. This is the only layer that cannot contain transparent pixels and is always below other layers. If we likened ordinary layers to transparent films with images printed on them, then the background layer is a sheet of paper lying under them.
All images that you find on a Photo CD or scan have a single layer, the background. The presence of a background layer is not a mandatory requirement for digital images, you have already seen this in the example of the Europe.pdf document. When there is no background, some parts of the image are transparent.
Note
If you print a document with transparent areas and without the Background layer on the printer, then transparency will be transmitted by the absence of an image.
To convert the background layer to normal, just change its name:
1. In the palette Layers(Layers) select the Background layer.
2. Make double click mouse over the layer name.
3. In the dialog box that appears new layer(New Layer) Give the layer a new name, such as Relief.
Now there is no background layer in the document at all. Let's make sure of this.
1. Tool magic wand(Magic wand) when disabled contiguous(Continuously) Highlight all areas occupied by the sea on the relief map.
2. Choose a team Clear(Clear) menu Edit(Editing) or press the Del key. The selection area pixels have been removed. Now it has become transparent.
Let's create a new background layer in the document.
1. Create a new layer by clicking on the button Create New Layer(Create New Layer) in palette Layers(Layers).
2. Listed New(New) menu layer(Layer) select command Background from Layer(Background from layer). The new layer has been changed to the background.
3. Using the palette Swatches(Samples) install working light blue color(Light Cyan), and the background is blue (Light Cyan Blue).
4. Fill the Background Layer with a Vertical linear gradient from the working color to the background.

Background removal
When creating montages, Photoshop layers give you a great tool for combining images. The first problem you will have to face is the preparation of fragments for editing. Usually you are dealing with photographs in which the object of interest to you is not alone or is located against some kind of background. To get out of such
photo editing element, you need to remove everything superfluous from it, leaving only desired object on the transparent background. This section focuses on Photoshop tools that will help you with this task.
Magic Eraser Tool
When creating a montage great importance has high-quality cutting out images from the background. If the object has simple form, you can simply select it with the tools, and then, inverting the selection, remove the background. For images of complex shape, more sophisticated extraction methods have to be applied.
Removing a uniform background is not difficult. It can be selected with the tool magic wand(Magic wand) and then remove the team Clear(Clear) menu Edit(Editing). AT new version Photoshop appeared tool Magic Eraser(Magic eraser), the action of which combines the selection and removal of close colors.
Let's get rid of the background in the photo of the Brandenburg Gate, located in the Gates.jpg file on the supplied floppy disk.
1. Open the Gates.jpg file.
2. Convert the background layer of the document to normal by changing its name to Gates. By by and large this conversion is optional: as soon as you use the tool Magic Eraser(Magic Eraser), Photoshop itself will make the background layer normal.
3. Choose a tool Magic Eraser(Magic Eraser) from the Tools Palette.
4. The properties palette for this tool is very similar to the properties palette magic wand(Magic wand). Set value tolerance(Threshold) equal to 64, thus setting a large range of similar colors. We can afford it, because the color of the sky is very different from the color of the object.
5. Tool Magic Eraser(Magic eraser), just like magic wand(Magic wand), has two modes of operation. In mode contiguous(Continuously) Only adjacent pixels that are close in color are removed. If it is disabled, then the color of the pixels of the entire image is analyzed. In our case it is better cancel mode contiguous(Continuous) so as not to remove each piece of the background separately.
6. Checkbox Anti-aliased(Smoothing) advise set to make the edges of the object visually more even.
7. Click the tool Magic Eraser(Magic eraser) approximately in the middle of the upper edge of the image, above the chariot crowning the gate. Most of background removed.

8. Now we need to act more subtle. Decrease the value tolerance(Threshold) to 16 and with a few clicks on the remaining background fragments, delete it to the end. Note
For instrument Magic Eraser(Magic Eraser) parameter can be set Opacity (Opacity). At a value of 100%, the background is removed completely, at lower values ​​- partially. If the checkbox is checked Use All Layers(Affects all layers), removing loved ones colors is performed simultaneously from all layers of the document. When the checkbox is enabled contiguous(Continuous), only areas bordering the mouse click point are removed, with the checkbox unchecked, all areas of the layer that have a similar color.
9. Save the image with the background removed in working folder on the hard drive.
As a result of the action of the tool, an area with a clear boundary is formed.