Adobe Photoshop

Layer Styles with Julieanne Kost and Daniel Brown

Software needed: Adobe Photoshop 6.0 or later

Layer Effects and layer styles are an amazingly easy way to create special
effects. There was once a whole cult around the process of adding a simple
drop shadow to a layer. Such effects were achievable only by channel
wizards with mystical knowledge of channel operations. The introduction
of Layer Effects in Photoshop 5.0 paved the way for even casual users to
achieve shadows, embosses, glows, and beveled edges. The introduction
of Layer Styles in Photoshop 6.0 made them simply matter of dragging and
dropping, rather than research and magic.

Layer effects are applied to layers based on the presence of information

on that layer. Basically, Photoshop looks at the information in the layer and
applies the effect to that content. The advantage is that if the content of
the layer changes, the effect is automatically updated. In the top example
on the right, some type was added to an image on its own layer. A drop
shadow was added by selecting Layer > Layer Style and selecting the “Drop
Shadow” effect. In the lower example, when the type was changed, the
drop shadow was automatically updated. This is a key point – the drop
shadow (or any of the effects for that matter) is being rendered based on
the contents in the layer no matter how many times they change making
them infinitely flexible.

Let’s take a look at the options in the Layer Styles dialog box. There are a
variety of ways to access Layers Styles – from the menu, select Layer > Layer
Style and select an effect from the list of styles. Or, in the Layers palette
click the “f” icon at the bottom and choose the effect to be added, or simply
double click on the layer’s name. Along the left side of the dialog box, there
are several kinds of effects that can be applied including embosses, glows,
satin effects, etc. The center of the dialog box displays all of the controls
to customize the effects, and the right side shows the options for creating,
applying, canceling, and previewing Layer Styles. Of course, as soon as a
layer effect is applied, it is previewed in the editing window as well. Once
a layer has one or more effects applied to it, those effects can be saved as
a Style for use in other documents or future projects.

In addition to the different effects that can be added, there are two additional
options available in the Layer Style dialog box. The first option “Styles”
displays all of the styles (one or more layer effects or blending options) that
have been saved in the Styles palette. There are several options available in
the fly-out menu associated with the Layer Style dialog box such as renaming
styles, deleting them, etc.. You can also change the size of the thumbnails
as well as load other preset styles. As you create and save your own styles,
they too will appear in the Styles options.

1
Clicking the second option in the Layer Style dialog box – “Blending Options:
Default” reveals controls that appear as complex as the cockpit of a modern
aircraft. However, these options can all be explained with relative ease.
The first two items under the General Blending heading (“Blend Mode” and
“Opacity”) are identical to the options in the Layers palette. In fact, if you
view the Layers palette while changing these options you will notice that they
change together. The reason that these options appear in the Layer Style
dialog box is so that you can finesse these options while you are applying
styles. For example, changing the opacity and/or blend mode of the layer
affects the entire layer including the layer styles applied. If you lower the
opacity of a layer to 75%, then the layer style can be no greater than 75%
either (you can always decrease it more, as we’ll explore later).

In the “advanced blending” area, you are given even more control. Here,
you can adjust the opacity of the information in the layer separately from
the effect itself. “Fill Opacity” controls the opacity of the information in the
layer while leaving the effect unchanged. For example, if you create a type
layer and add a black drop shadow Layer Effect, you can lower the opac-
ity of the layer (in the ”general blending” options), affecting both the type
and the drop shadow. If, on the other hand, you have the same type layer
with a drop shadow and lower the Fill Opacity (in the Advanced Blending
options), only the opacity of the type is affected. This method hides the type
while still showing the layer effect. This results in a ghost drop shadow or
transparent emboss like you see in the illustration to the right.

Additional options in the “Advanced Blending” area include “Channels”,

“Knockout” and the “Blend If” sliders. The channels options allow you to
apply effects to specific channels in an image or to any combination of
channels. Some very interesting and creative effects can be achieved by
isolating effects. I have found uses of this feature beyond layer styles as well.
For example, when blending adjustment layers or multiple images together,
isolating the channels that blend can produce dramatic results such as build-
ing up delicate highlight information or opening up shadow detail.

The Knockout options determine how the targeted layer and its effects are
blended with layers below it. In the three examples on the right, the type
layer’s fill opacity has been set to 0%. The “none” option in Knockout has
no additional effect (the first illustration). The type layer simply reveals
Knockout set to none.
the blue layer below it. The “shallow” option punches through the other
layers until it hits the first possible stopping point. In this case, because
the layer set’s blend mode was set to “Pass Through”, the first stopping
point was the red layer (below the layer set). Note: this also is true with
clipping groups. The “deep” option knocks out to the Background or to Knockout set to shallow.
the first mandatory stopping point such as the bottom of the layer set
when the layer set uses a blend mode other than Pass Through. If there
is no background layer, the deep option will knockout to transparency.
Knockout set to deep.

2
Two other options in this area are: “Blend interior effects as group”
and “Blend clipped layers as group”. Let’s take the first option.
Normally, the appearance of a Layer Effect is not affected by changing
the blending mode of a layer. They are rendered on top of the layer to
which they have been applied. The layer is blended with the layer(s)
below, but the effect is not. Turning this option on will cause any “interior”
effect (Inner Glow, all of the “Overlay” effects, and “Satin”) along with
the layer contents to be affected by the blending mode of the layer. This
is off by default, but turning it on can yield some dramatic effects. Note:
remember that this only applies to the specific “Interior” effects listed
above. Other effects such as Drop Shadow will not be affected.

The second option “blend clipped layers as group” is similar to the first,
but it has nothing to do with effects directly. In short, it restricts blend
modes to clipping groups. Normally, a layer’s blending mode will inter-
act with all layers below it. With this option turned on, that blending will
be restricted to only the layers within the clipping group.

Finally there are the “Blend if Sliders”. Although not part of Layer Effects,
they’re important to understand when blending images together. Like
Blending Modes, these sliders control the way layers interact with each
other, but can work both with the selected layer or with the underly-
ing ones. Moving the sliders controls which tonal values are revealed
and which are hidden in either the current or underlying layers. In this
example, the “Underlying Layer” sliders were moved towards the center,
hiding the crown in the areas to the left of the black triangle and to the
right of the white triangle. To achieve the softer looking blend on the
right, the slider was split in two by holding the Option (Mac)/Alt (Win)
key, while dragging apart the slider into two smaller triangles. The dis-
tance between the triangles is the transitional area.

With these options out of the way, we can focus on the different layer
effects and their respective controls. The best part about adding layer
styles is that by simply moving sliders and choosing options, you change
effects without having to know the technical reasoning or math behind
them. Personally, this is the way that I prefer to work, and I have spent
many hours fiddling around in this dialog box finding my own favorite
combinations of controls. The best advice I can give is to spend some
time exploring these options on your own. However, I know that some
of you will want more of an explanation of what’s going on. First we’ll
tackle the “Drop Shadow” effect and then explore the other effects’
controls as we find them.

3
In the Structure area, the first two options - “Opacity” and “Blend Modes”
are identical to those in the Layers Palette. A color swatch allows for
specifying a custom color. In this example, the crown’s blend mode is
set to multiply, color and opacity are unchanged. Below these options,
are additional settings for the effect. “Angle” defines the direction of
the light source that is used to create the effect. Next to that is the “use
global light” option. This option insures that, if the angle of the light is
changed for one effect, the same angle will be used for all other effects
that are also using this option. Note: when rendering a piece of artwork
that simulates light coming from a particular direction, generally the light
should come from the same direction for all objects in the image.

“Distance” is easy. It determines how far the drop shadow is offset

from the object. You can control the offset amount with the slider, or by
clicking and dragging in the actual image area. Note: the “angle” can
also be changed this way. The “spread” controls how wide the effect is
before becoming transparent. As you move this slider, you’ll notice that
the distance between the start and end of the shadow (or the change
in gamma) narrows/widens. This is particularly useful on small, thin
features such as cursive descenders or ascenders on a type face, which
tend to disappear in the presence of a large blur. The “size” specifies
the size the shadow. The first illustration has much smaller settings for
size, spread and distance than the second illustration.

The first option in the Quality area, “Contour” let’s you customize your
drop shadow. Rather than simple black to transparent, you can add a
variety of tonal changes within the shadow. You can create effects such
as double shadows or weighted edge drop-offs. You can also create your
own custom contours, load contours, or save contours in the Contour
Editor dialog box. The “noise” control can be used to lessen banding
often encountered when printing drop shadows.

Finally, the “layer knocks out drop shadow” option eliminates the shadow
behind the object. This is helpful if you need to change the transparency,
blend mode etc. of the layer but don’t want the shadow visible through
the transparent areas. In this example, the first illustration has the “knock
out drop shadow” option checked so that even though the crown layer’s
blend mode is set to multiply, the shadow behind the crown isn’t having
any effect. The second illustration has this option turned off and you can
see the undesirable (in this case) shadow behind the crown.

4
The Inner Shadow effect has almost identical controls as the drop
shadow except that is substitutes a new option called “choke” for the
drop shadow’s “spread”. Similar to the drop shadow’s spread, the inner
shadow’s choke affects the gamma or the midpoint of the transition
from the most opaque to the most transparent part of the shadow. In the
illustrations to the left, the fill opacity of the circle layer has been set to
50% making the layer beneath the effect visible. The only differences
between the first and second illustration is the angle at which the effect
was applied. Notice how changing the angle can make an object look
like it’s raised or recessed

The Outer Glow effect has additional controls in the Structure area for
color. To use a solid color (illus. one) click the radio button next to the
color swatch and click the color swatch to choose a color. To use a
gradient (illus. two), click the radio button next to the gradient and click
the triangle to select a preset gradient, or click in the gradient swatch to
access the gradient editor. Under the Quality area, the “range” controls
the gamma of the contour and the “jitter” option varies the amount of
noise added to the gradient’s color and opacity. Note: different contours
were also used in each illustration.

In the Techniques area, the “softer” option creates a soft glow. In the
top illustration, the glow behind the word circles is diffused. However
at larger sizes, the “softer” option does not preserve detailed features.
The “precise” option is a better choice for preserving features on small,
hard edges objects such as type. Notice how the shadow conforms to
the contour of the letterforms in illustration two.

The Inner Glow effect only has one additional option in the Technique
area for determining the source of the glow. Here you determine if the
glow should originate from the center or edge area of the image. In
this example, a substantial amount of noise was also added to give it
a rough texture.

5
Moving on to the Bevel and Emboss effects, we discover that the Tech-
nique area offers additional options for creating a “smooth”, “soft” or
“hard” edge chisel. The “hard” chisel option is primarily useful on hard-
edged images such as type (illus one). It preserves detailed features more
so than the other options. The “soft” chisel option is a middle-of-the road
setting. While not as accurate as “hard”, it is more useful on a larger
range of images. Finally the “smooth” option is the least detailed and
works well on images that are more organic in nature (illus two). There
are also controls for determining the depth, direction, and softness of
Bevel and Emboss.

In the Shading area, a more complex angle option includes an “altitude”

option which hardens/softens the light that is applied. The “contour”
option found in other effects changes slightly to a “gloss contour” option
allowing control over the creation of ridges, valleys, and bumps in the
bevel or emboss. There are also the familiar blend modes available for
shadows and highlights as well as controls for color, and opacity.

The Bevel and Emboss effect also has two sub-options which apply
contours and textures to the effect. The Contour sub-option includes the
ability to add a contour as well as a “range” control which determines
the how the blend between colors or tones are determined within the
contour. This is an excellent way to create rivets or other effects that look
as if they are formed out of metal. The Texture sub-option controls if and
what “pattern” is applied to the bevel and emboss, where the texture’s
point of origin is located, and the “scale” and “depth” of the texture.
In addition, there are options for inverting the pattern and linking it’s
position with the layer. Note: if you’ve ever tried to move a layer with
a texture applied and didn’t want the texture to move, then this is the
option for you.

The next two effects - Satin and Color Overlay don’t have any new
options, but can be very useful when creating web graphics. For exam-
ple, adding a color overlay to text or a button and then controlling which
states show while creating roll overs in ImageReady can make creat-
ing states a snap! The Gradient Overlay does have some new options
including all of the control that the gradient tool has in Photoshop as well
as offers control over the scale of the gradient. Unlinking the gradient
allows you to reposition the gradient separately from the image. Playing
with fill opacity and blend modes allow for interesting applications of
blends onto objects.

6
Pattern Overlay offers many of the same options that the texture option
for the Bevel and Emboss effect, but the pattern becomes part of the
actual layer, rather than simply being used as the texture for the Bevel or
Emboss. Of course this can be changed by altering the blend mode of
the effect! To move the pattern within the layer, position the cursor over
the image area and move it into place. The pattern overlay also allows
for linking the pattern to the layer so they will move as one piece.

The Stroke effect allows for different positioning (inside, outside, or

middle) and diameter of a stroke. Interesting effects can be achieved
by stroking an object with a gradient or pattern including multi colored
glows on objects.

Looking at the layer styles dialog box, you can imagine that there are an
infinite number of combinations of styles that you can create. If, along
the way, you create something you’re proud of and you want to keep
it, click on the “New Style” button on the right side of the Layer Style
dialog box. This will capture all your current settings in a preset, or
“Style”, allow you to name it, and decide whether to include the layer
effects (shadows, embosses, glows, etc.) and/or the advanced blending
modes. If you want to create some of your own Styles, remember that
you can share with friends or coworkers.

If you’ve already created and applied a Layer style to a layer without

saving it, you can still save the layer style using several methods. At
the bottom of the Styles palette, click on the New Style icon or, also on
the Styles palette, use the fly out menu to select New Style. Name the
style, include the options and click OK. The Layer Style appears on the
palette and can be saved out and distributed if desired. Other times you
may want to discard the entire layer style, or just part of it. To delete a
layer Style, select Layer > Layer Style > Delete Style, or, on the Styles
palette click on the “no style” icon. You can also use the Layers palette
to delete a layer style by using the triangle to reveal the effects that are
applied to the layer, and then dragging individual effects to the trash
icon. Note: you can also drag the word “effects” to the trash to remove
all of the effects at once.

7
Other Important Layer Effect/Layer Style Information
•To apply a style to another layer, target the layer in the Layer palette and click on the desired style in the Styles palette or,
simple drag and drop the layer style from the Style palette to the layer in the Layers palette that needs the style. You can also
drag and drop a style from one layer to another using the Layers palette.
•To apply a style to multiple layers, select Layer > Layer Style > Copy Style. Then, on the Layers palette, target the layer to
apply the style to and select Layer > Layer Style > Paste Style. If there are multiple layers that need the style applied, in the
Layers palette, link the layers and select Layer > Layer Style > Paste Layer Style to Linked. Note: don’t forget that these options
and more area always available via the contact sensitive menus on the Layers palette.
•If global changes have to be made to the lighting direction for all effects, select Layer > Layer Style > Global Light and make
the necessary adjustments.
•With more complex images, the Layer style might need to be made into their own layer(s). Unfortunately, when you select
Layer > Layer Style > Make Layer, the style is rendered as a layer and is “unattached” to the layer so that any changes you
make to the layer content will no longer be updated automatically. There are a variety of other reasons for separating a layer
from its effect such as having an object cast a shadow on multiple objects but not on the background, and applying a filter or
a mask to an effect.
•If your goal is optimal performance and you have a really large file, lots of styles applied, or an older system, then temporar-
ily turning off layer styles can increase your efficiency. To turn off Layer styles select Layer > Layer Styles > Hide all Effects. You
can also selectively turn off layer styles in the Layers palette by clicking on the triangle to reveal the individual effects and then
clicking on the eyeball to hide the individual effects.
•A layer style may have been created for a specific image. However, when the resolution of the file changes, the layer style
does not. This can lead to inconsistencies if you’re not careful. When resizing your images be sure to note the percentage
of change (you can find this in the Image Size dialog box by using percentage as the units). After resizing an image, select
Layer > Layer Style > Scale Effects to scale the effects contained in the layer style without scaling the object to which the layer
style is applied. Note: creating an F-key will also help to speed up this process if you have multiple Layer Styles that need to
be resized.
•Layer styles can be added to blank layers and then painted on to create special effects.
•After changing the defaults every time I used Photoshop for the first month, I decided to create F-keys to bring up the styles
with my “corrected” default options selected. Of course you can also create styles to do this.
•And a final shortcut, holding down the shift key will allow you to add a style to a layer that already has a style applied without
deleting the original style

Differences and additional features in ImageReady

•When using layer styles in ImageReady, there are certain differences that you will want to
be aware of. For example, ImageReady doesn’t have a Layer Styles dialog box, instead it has
an Effects palette. All of the options for the effects can be found in this palette if you choose
Show Options from the fly out menu. The only exception to this is the “advanced blending
options”. Although you can’t access these options in ImageReady, any changes made to them
in Photoshop will carry over to ImageReady. In addition, there is no option for scaling layer
effects in ImageReady so if you need to repurpose a print job for the web, resize the image
first in Photoshop and scale the effects there!
•A killer feature of Layer Styles in ImageReady is that the option to include rollover states a
part of a Layer Style. This means that if you add a Layer Style and create a rollover using
the Rollover palette, all of the rollover states can be included in the style. To save the rollover
states with a style check the “Include Rollover State” option while saving the style. Since
ImageReady keeps track of the visibility of layers and Layer effects, it saves this as part of
the style. In the Styles palette, the styles with roll overs saved with them have a dog-eared
upper right corner.
•ImageReady also has a slightly different fly out menu on the Layers Palette. Here you’ll find
options for deleting and hiding effects