Photoshop Layers

Introduction

Photoshop is a powerful application.  It is also a very frustrating application unless you understand some fundamental principles. Photoshop layers are key to understand how Photoshop works.  Once you grasp the basics of layers, you will find working with Photoshop much easier and pleasant.

The purpose of this document is to provide an introduction to Photoshop layers. It assumes the reader has previously worked with Photoshop and understand the basics, such as moving around the workspace and selecting images.

Types of Layers

These are the types of layers in Photoshop:

  • Image layer. Used for pixel-based content. It is the most common type of layer.
  • Type layer. Used for text.
  • Shape layer. Used for vector-based content.
  • Fill layer. Used for changing or adding colour, gradient or pattern to an image. Useful for creating a new background or filling a selection with colour.
  • Adjustment layer. Used to apply colour and brightness to all layers underneath. Adjustment layers do not contain any pixels, only instructions on what to change.
  • Smart objects layer. Used to hold objects not created with Photoshop, like vector files or images. They can be resized or rotated without losing quality.
  • Video layer. Used for videos.
  • 3D layer. Used for 3D files.

Background Layer

The Background layer is the layer locked at the bottom of the Layers panel. By default the contents of this layer cannot be changed, and you cannot move it up the layer stack in the Layers panel.

Photoshop opens flat files in the Background layer (e.g. jpeg, png, tiff…). One of the most frustrating issues with Photoshop is that this layer cannot be changed directly.  That is, if you try to paint, delete, move or change in any way the image of this layer, Photoshop will let you know in unambiguous terms that it is not possible.

To make changes to this layer, you need to unlock it.  For this, just double click on the thumbnail in the Layers panel.  A popup window will appear.  Rename the layer and press OK. The background layer will be unlocked and work as any other layer.

Photoshop background layer
Photoshop background layer

Creating and Duplicating layers

Most of the time Photoshop will create layers automatically. This happens when we paste an image, create text, draw a shape, type text and so on.

To create a new layer manually can be done from either the Layers panel or the Layer menu. The picture below shows the available options in the Layers panel:

  • New Layer
  • Fill or Adjustment Layer
  • Layer Mask
  • Layer Style
Create a new layer in the Layers panel
Create a new layer in the Layers panel

Duplicating a layer is useful to do something destructive like sharpening an image. A copy of the image is created and the changes are only done to the copied image, preserving the original.  A layer can be duplicated by right clicking on the layer thumbnail in the Layer panel and selecting “Duplicate Layer”.

A new layer can also be created from a selection.  The selection can be either copied or cut into the new layer.

 

Create layer via copy
Create layer via copy

Filling a Layer with Colour

Filling a layer with colour is a practical operation specially when combined with layer masks and layer opacity.

There are two ways to fill a layer:

  • Fill an existing layer. Activate the layer to fill, and choose Edit > Fill from the menu.
  • Create a new Fill layer. Choose Layer > New Fill Layer from the menu. Creating a Fill layer with this option has the added benefit that it also creates a Layer Mask.

There are three types of layer fill:

  • Solid colour
  • Gradient
  • Pattern

Filling layer with Solid Color

The picture below illustrates how to create a new fill layer and add it as a solid coloured background.  For that, create the layer using Layer > New Fill Layer > Solid Colour. Then double left click on the layer thumbnail and select the background colour.

 

Fill layer with solid colour
Fill layer with solid colour

Filling layer with Gradient

Similarly, a layer can be filled with a gradient by choosing Layer > New Fill Layer > Gradient.

To select additional gradients to your palate, click on the wheel from the Gradient Fill window (circled below).

 

Fill layer with gradient
Fill layer with gradient

Filling layer with Pattern

Finally, the example below illustrates how to create a new fill layer with a pattern.  First create the Fill layer with Edit > New Fill Layer > Pattern. Then set the Opacity to 35%.  Then double left click on the thumbnail and select the pattern.

To select additional patterns to your palate, click on the wheel from the Pattern Fill window (circled below)

Fill layer with a pattern
Fill layer with a pattern

Layer Masks

A layer mask hides the content of the layer that is attached to.  In an Image layer, it will hide pixels from the layer.  In an Adjustment layer it will hide a colour or lighting change.

Layer masks only work with white, black, and shades of grey. A black mask hides the layer contents completely. A white mask revels the layer content untouched. A shade of grey makes the layer mask partially transparent.

A layer mask can be attached to any layer, although a mask is automatically created for Fill, Adjustment and Shape layers.

Creating a Layer Mask

To create a layer mask, activate the layer you want to add it to, choose Layer > Layer Mask, and then select one of the following:

  • Reveal All. Creates a solid white mask that shows everything in the layer. You can also create it by clicking the Add Layer Mask button in the Layers panel.
  • Hide All. Creates a solid black mark that hides everything in the layer. You can also create it by ALT clicking on the Add Layer Mask button in the Layers panel.
  • Reveal selection. Shows the selection and hides everything else.
  • Hide Selection. Hides the selection and shows everything else.
  • From Transparency. Creates a mask to cover the transparent pixels. It will create a black mark for transparent pixels, grey for partially transparent, and white for non-transparent.

 

Create a layer mask
Create a layer mask

Using a Layer Mask

Once the layer mask has been created, you can use any painting tool to paint the areas you want to mask white, black or shades of grey. You can also use the erase tool to turn pixels black. You can also select an area and fill it with a solid colour or a grey gradient.

Making Smart Object Layer transparent

The following example shows how to insert a picture and make parts of it transparent so that our background is visible.

  1. Drag the new picture from Explorer into our background. This will create a Smart Object containing the picture. You will need to press Enter to activate the layer.
  2. Create a Layer Mask in the Smart Object layer with Layer > Layer Mask > Reveal All
  3. Select the layer mask thumbnail (1)
  4. Select the Brush (2) and make sure the Foreground colour is set to black (3)
  5. Paint the white area with the brush as in the picture below. As you can see, the white background of the cow disappears and the green field is revealed.
Making a smart object transparent
Making a smart object transparent

Lightening an image via a mask

The following example shows how to lighten an image via the Level Adjustment layer.

  1. Create an adjustment layer by clicking on the half-white/half-black circler at the bottom of the Layers panel, and then choose “Levels”
  2. Then click on the mask thumbnail, and paint white the area you want to lighten. The rest should be painted black.
  3. On the Properties panel of the Level adjustment, select “Lighten Shadows” preset. This will lighten up only the trees.
Lightening an image via a mask
Lightening an image via a mask

Editing the Mask

The Properties panel of the mask is shown when the mask thumbnail is selected. From here we can change and refine the mask:

  • This is the equivalent to Opacity, to make the mask semi-transparent.
  • Used to soften the edges so that the mask blends into the background easier.
  • Mask Edge. On clicking opens the Refine Mask panel where you can smooth the mask edges and view the mask in the layer.
  • Inverts the mask. Everything that was white becomes black, and vice versa.
  • Load Selection From Mask. Creates a selection from the mask.
  • Delete Mask.
Edit a layer mask
Edit a layer mask

Layer Styles

A layer style is one of several special effects that can be applied to a layer. Layer styles are great for adding finishing touches such as shadows or glows.

A layer style can be added either by clicking on the Layer Style menu icon (fx) at the bottom of the Layer panel, or by double-clicking near (but not on) the layer’s name in the Layer panel.

Create a layer style
Create a layer style

These are the layer styles available:

  • Drop Shadow. Creates a shadow behind the image.
  • Inner Shadow. Creates a shadow inside the image or object.
  • Outer Glow. Adds a glow around the image.
  • Inner Glow. Creates a glow inside the image or object.
  • Satin. Creates a gradient wave across the object that mimic the look of satin.
  • Bevel & Emboss. Creates edge effects that give a 3D look by adding highlights and shadows. A bevel is the edge of a structure that is not perpendicular, i.e. cut at an angle. To emboss is to decorate an object with a raised ornament.
  • Stoke. Creates an outline of the object.
  • Color Overlay. Adds colour over the object. You can set colour or opacity to get a solid colour or mixture of colours.
  • Gradient Overlay. Changes the shadow and colour of the object using a gradient.
  • Pattern Overlay. Sets a pattern over the object. You can control the opacity to completely cover the object, or just blend with the object’s colour. You can also set the scale of the patter to make it larger or smaller.
Layer style examples
Layer style examples

Styles Panel

Photoshop comes with many layer style presets that can be accessed from the Styles panel. These are pre-defined styles, same as if you had created them from the Layer Style window.

By default, Photoshop just shows a handful of layer style presets. You can however load many more from the Styles panel menu. Among others, it has Web styles and buttons that might be useful to web designers.

Styles Panel
Styles Panel

To apply any of these styles, just select the layer you want to stylise, and then select the layer style you want.  The pre-defined style will be automatically applied to the layer.

Bibliography

 

The following two tabs change content below.

Eduard Manas

Eduard is a senior IT consultant with over 15 years in the financial sector. He is an experienced developer in Java, C#, Python, Wordpress, Tibco EMS/RV, Oracle, Sybase and MySQL.Outside of work, he likes spending time with family, friends, and watching football.

Latest posts by Eduard Manas (see all)

Leave a Reply