Lesson 3: The Power of Layers

Related video clips

There are seven videoclips related to Lesson 3. These videoclips are an important part of these materials about Photoshop. Although this document describes particular features when working with layers, it does not describe all of the examples of layers shown in the videos.

The concept of layers

Some images you produce with Photoshop do not need layers. For example, all of the graphics created in Lesson 1 were created without using layers. You can crop, rotate, and resize graphics, even delete backgrounds, without using more than one layer. However, you will discover, layers are essential if you want to create composite images (made up of different parts) or want to create artistic effects.

In Photoshop you use layers to create and manipulate, in isolation, various elements of an image. Layers are useful tools because they allow you to modify a single element of your image while leaving the rest untouched. In the Photoshop Reference Manual, Adobe compares layers to sheets of acetate stacked one on top of the other. As stated in the introduction to layers, "Where there is no image on a layer, you can see through the layers below. You can change the composition of an image by changing the order and attributes of layers."

Lynda Weinman, a well-know graphic artist who writes many books about graphic tools, states in one of her training books: "When the layers palette was introduced in Photoshop in 1996, it revolutionized the way digital artists created, edited, and saved their work. Prior to that, pixels in an image would be cancelled out if other pixels were placed on top of them. This changed when layers came along."

The videos for Lesson Three illustrate some of the ways that layers are used. For example, even adding text to a photograph, to better explain the photograph, adds a layer to the photo image. This is demonstrated in the video Layer Basics. From this simple example, the other videos demonstrate creating a drawing using pencil and pen tools and a gradient to create a single "image" with different parts; creating a photo collage header for a web page; creating simple buttons; adding dropped shadows to a photograph; adding borders to a photograph, and editing a vector drawing. Each of these videos shows a few ways you can commonly use the layer feature.

If you have not looked at the videos, stop now and look at least the first two in the series for Lesson Three: Layer Basics and Using Layers to Create a Drawing.

Displaying a layer palette

As is shown above, although there can be multiple layers, there can only be one active layer. Here the active layer is showing with a blue highlight on the layer. Actions you perform will be done in the active layer. For example, in the video Basic Layers a color change to the marquee box around the text can only be done if that marquee box layer (named here color border) is the active layer. Moving the text or the color border to another location in the image can only be done if the text layer or the color border is the active layer.

There are many actions that must be done in the layer palette, such as duplicating or copying layers, locking layers, or naming or renaming layers. These are addressed separately in this lesson.

Adding your own layers

Photoshop without prompting will create new layers for you, whether or not you realize this, when you perform certain actions. For example, every time you add text to an existing graphic, that text is put in its own layer. When you use the pen tool and enclose an object, like a flower petal, and then start another object, like a second petal, unless you have clicked on the Add to layer icon in the Options bar, that second object is in its own layer. Similarly, if you create more than one shape in a drawing, each shape will be added to its own layer, unless you tell the program to Add to shape. For the most part, enclosed vector objects in a drawing need to be in their own layer, so they can be easily removed later, without affecting the rest of the drawing.

However, as is illustrated in various videos, you often will deliberately create a new layer for a part of a "composite" image. If you click on the triangle in the top right corner of the layer palette, there is an option to add a new layer. There is also a icon at the bottom of the layer palette to add a layer. It is highlighted in this screen capture with a red box.

Give names to your layers

As a new layer is created, in the dialog box shown to the right, you can type in a name for the layer. Take the time to give a name for each layer. This will facilitate locating the correct layer as you edit, move, or delete layers later.

You can also double-click on a layer name, even the default layer names, to enter a new name for the layer. This is demonstrated in the video Editing a Vector Drawing where the default names created when the pen tool was used are changed to more meaningful names.

Duplicating a layer or background

Sometimes you will want to duplicate the background layer, particularly if it is a photograph or existing graphic that you have opened, since various functions such as changing opacity cannot be done on a background. It is also useful to duplicate the background when you want to keep the original version "handy" so you can compare it with the modications you may make. This will be demonstrated more in Lesson Four with changing coloring in a photograph. You might even want to duplicate regular layers, for example you might have similar traits for text you want in more than one layer, or you might want to repeat a particular graphic multiple times on the same larger graphic. The video on Creating Simple Buttons shows duplicating the text layer.

There is a triangle in the top right corner of the layer palette. You need to be highlighting the layer you want to duplicate, and then you can click on the triangle to access commands for working with layers. This listing is called the pop-up menu for layers. The options you have depend on the layer, but one of the most common is Duplicate Layer. The duplicate layer dialog box will appear. You can type in a name for the duplicate layer or leave the default name for now, which is the existing layer name followed by the word copy.

You can also right click on the active layer to select an option to duplicate the layer.

Deleting a layer

If you create any type of layer (other than the background layer) and that layer is not locked, you can delete the layer by dragging it to the trash can icon at the bottom of the layer palette. For example, in this composite drawing of a desert scene, I could drag the saguaro layer to the trash can to delete it from the image.

Deleting a layer is also demonstrated in the videoclip Editing a Vector Drawing.

Particularly as you experiment with different effects, which is discussed in Lesson Four, you might want to have various copies of the same "thing" in different layers. With each copy you may explore different effects. However, after deciding which one you want to keep, it does not make any sense to keep unneeded layers, since each layer will add kilobytes to the Photoshop file you are creating.

Changing the stacking order of layers

When you change the stacking order of layers, you are affecting how that image looks. Changing the stacking order of the layers is the same thing as moving layers within a drawing. Moving layers in a composite drawing is a very common procedure. Even in the first video for this particular lesson, Layer Basics, you saw that the background border around the text was covering up the text. Photoshop displays the layers from top to bottom, and if a layer on the top is covering up something below it, the layer below will not be visible.

To move a layer, click on that layer and drag it up and down in the layer stack. Release the mouse button when the highlighted line appears where you want to place the layer. The background layer is always at the bottom of the "stack of layers." The background layer cannot be moved but it can be duplicated, and the original background layer made invisible. Then the duplicated background can be moved in the stack order.

Moving layers is shown in several of the videoclips for Lesson Three.

Making layers visible or invisible

In the layer palette, for each layer you create or is created by the program, you can see an eye icon next to a layer . To hide the content of a particular layer, simply click on the eye icon to turn off the display of the eye. Clicking in that column again will turn on the display of the eye. If the eye is showing in that layer, then the layer is visible. If it is not showing, it is invisible.

In the video Using Layers to Create a Drawing, for example, you can create a different graphic by making layers invisible, such as making the sun in the drawing invisible or making the mountains invisible.

The video on Creating Simple Buttons shows how important this feature is when making certain graphics. When you make a JPEG or GIF file, only the visible layers are used in the resulting graphic.

The opacity option

The opacity slider on the layers palette allows you to change the opacity of the active layer. The higher the opacity percentage, the less transparent the layer. The lower the opacity percentage, the more transparent the layer. You can see in the screen capture below, since the opacity of the green background border is only 50 percent, some of the background photo is showing through.

Opacity changes are demonstrated in the video Layer Basics and Creating a Photo Collage Header. There are many situations where you won't change the opacity of a layer, but there are other situations when it creates a better final image.

You can change the opacity of any layer other than the background layer. That is one reason you might want to duplicate the background layer, and make the background invisible.

Locking a layer

You can fully or partially lock layers to protect their contents. When a layer is locked, a lock icon displays to the right of the layer name, as is shown in this screen capture where the two layers for the background of the button are locked. The lock icon is solid when the layer is fully locked; it is hollow when the layer is partially locked.

To lock all properties of a layer, select the layer. Then click the Lock All option in the layer palette. To unlock a layer, simply click on the same lock icon at the top of the layers to turn off locking on the active layer.

Locking is not demonstrated in any of the videoclips, but as you have more complex drawings, you might want to lock layers to keep yourself from accidentally making changes. Note, however, that the background layer is locked, and the background cannot be "unlocked."

Linking layers

By linking two or more layers, you can move their contents together. You can also copy, paste, align, merge, apply transformations to, and create clipping groups from linked layers. The most common reason to link two or more layers is to move their contents together. This is demonstrated in the video Editing a Vector Drawing when layers that make up one flower were linked so the entire flower could be moved on the page.

To link layers, first select a layer in the layer palette. Then click in the column immediately to the left of any layers you want to link to the selected layer. A link icon will appear in that column. That is a visual reminder the layer is linked to the selected (active) layer.

To unlink a layer, in the layers palette, click on the link icons to remove them.

Merging and flattening

The more layers your image contains, the larger the file will be. Since so many people have large, multi-gigabyte drives and zip disks, it does not present as much of a storage problem as it did several years ago. Also when you make either a JPEG or GIF file from the visible layers showing in a Photoshop graphic, the resulting image will be a single "layer". Therefore, there are no videos showing merging and flattening, since this class is focusing on web graphics.

However, if you are creating a graphic for print or you are creating a graphic for someone and you don't want them to change the layers or edit the composite image, you will want to either flatten the Photoshop image or merge sections of it.

This screen capture shows one way to flatten or merge a Photoshop image. The pop-up layers palette menu comes up by clicking on the triangle in the layer palette, but you will only see some of these if there are multiple layers or options for the merging options. That is if you only had a single layer in your graphic, merging would not be an option you see in the pop-up menu.

Merge Down combines or flattens the selected layer and the layer directly below it.

Merge Visible combines all layers that have the eye icons turned on. This is a good way to merge related layers that are next to each other. Invisible layers in the image are left in the image.

Merge Linked combines layers that are linked to one another. This is another way to merge non-consecutive layers. This option will not appear unless you have selected a linked layer.

Flatten Image combines all (visible) layers in the document, but the program will also discard nonvisible layers, so don't use this option unless you have a copy with layers saved separately.

Remember that it is not necessary to do merging or flattening if you are making a web image. And always keep an unmerged or unflattened version of the graphic you are creating until you are absolutely certain you do not need to make any changes. Incidentally, the extension .psd does not tell you if you have a graphic with layers or a graphic that has been merged. The extension is used on a Photoshop graphic, and it can be used after a graphic is flattened.

The drop shadow "trick"

Drop shadow is really an effect and effects will be described more in Lesson Four. But I decided to include this feature in Lesson Three since it does relate to layers and it is a common thing some webmasters want to do. The video Adding Drop Shadows to a Photograph illustrates the tricks needed to apply a drop shadow to a photograph.

First, if you open an existing image, and want to apply a drop shadow, you have to duplicate the background since effects cannot be added to the background. In the duplicate layer, you can click on the Effects icon in the layer palette, and one of the choices is Drop Shadow. This is demonstrated in the drop shadow video.

Secondly, if you are working with a photograph, you cannot see the drop shadow without increasing the canvas size. This is found under Image on the main menu, then Canvas Size. If the canvas size is too large, after adding the drop shadow, it can be cropped. You can increase the canvas size before or after doing the drop shadow effect.

A comment about creating buttons

Although it becomes clear, as you create more complex drawings, how useful layers are, the video on creating buttons shows another way layers are needed. If you are creating buttons for your website, you will want them to have a common look, as part of site identity. Having created the basic background for your button, you should then create the text for the buttons, each text layer in the same graphic. Then using the visibility option, each text layer is displayed one at a time, and you produce the graphic button. So from the same graphic, you will create multiple graphics for your website. Although the resulting GIF or JPEG images for your site will be separate graphics, the master graphic used to produce these should be on graphic.

Editing vector images through layers

In Lesson Two we discussed how to delete or change colors in a graphic created with the pencil or pen tool. However, vector graphics work differently. You cannot use the eraser tool on vector graphics. To edit a vector graphic, like to change the color of petals drawn with a pen tool, you have to select that layer, then use the Options bar to change the color. To delete a vector graphic, you would have to drag that layer to the trash can.

This document is part of a Basic Web Images from Photoshop 7 class given by Linda Ffolliott, College of Agriculture and Life Sciences, University of Arizona.