Layer Styles are nothing new. They’ve been used and abused again and again. Despite their ubiquity, or perhaps because of it, many designers do not yet realize the full potential of this handy menu. Its beauty lies in our ability to create an effect and then copy, modify, export, hide or trash it, without degrading the content of the layer.

Below we present, step by step, several practical techniques to help you refine your designs, increase productivity and reduce layer clutter. You will find more useful Photoshop techniques and tutorials in our hand-picked selection.

The Bump Map Effect Link

“Wait, what?” you exclaim, “There’s no bump map effect in the Layer Styles menu!” That’s true, but by combining Pattern Overlay and Bevel and Emboss, we can achieve a textured, bump-mapped surface with a controllable light source.

This technique requires two images: one for texture and color, and the other to serve as a depth map. The depth map needn’t have any hue because it determines depth based on a composite value, black being the lowest, white the highest. In some cases, you may be able to use the same image for both, but in our example we’ll use completely different ones.

STEP BY STEP LINK

1. We’ll start by creating our bump map pattern. Open the diamond-plate.psd file.
2. Inside you’ll find a number of white shapes on a black background. Create a patternfrom this document: Select All (Cmd/Ctrl + A), then “Edit” → “Define Pattern.” Name it “diamond plate bump map” and click okay.
   
   Creating the diamond plate pattern.
3. Now, open the start.psd file.
4. Repeat step 2 to create a pattern from the “patchy gray” layer. This will be used later to add texture to our background.
   
   Defining the texture pattern.
5. After creating the pattern, delete the “patchy gray” layer. It’s no longer needed.
6. Use the Rectangular Shape tool to create a shape layer about 20 pixels wider and 20 pixels higher than the canvas. Change the color of this layer to a dark, brownish, chromatic gray.
   
   Creating the shape layer for our background.
7. Be sure that the shape layer doesn’t have any Layer Styles already applied to it (Photoshop will often apply the most recent Layer Style automatically). Then, begin the new Layer Style by adding a Pattern Overlay.
   
   Adding a Pattern Overlay effect.
8. Choose the “patchy gray” pattern from the pattern picker, and change the Blend Mode to Soft Light. This will add the texture to our background layer.
   
   
   Adding a pattern overlay effect.
9. Next, add a Bevel and Emboss, along with the Texture effect. This time, change the Texture effect’s Pattern to the “diamond plate bump map” pattern created in step 2. We now have a grungy diamond plate background.
   
   
   Applying the Bevel and Emboss texture effect.
10. As with most Layer Style effects, the default values are rarely ideal. By tweaking the Bevel Type and Size, Gloss Contour, Highlights, Shadows and Light settings you can achieve some dramatic results.
    
    
    Tweaking the Bevel and Emboss settings.
11. With a few extra effects, you can shape the background layer even more. The example has a Gradient Overlay to simulate reflected light by darkening certain regions of the image.
    
    
    Using the Gradient Overlay to darken some regions.
12. You may notice that the highlights from the Bevel and Emboss filter all seem to have the same value. This is because the Bevel and Emboss effects are very high on the Layer Style’s stacking order. To darken the highlights that lie outside our main light source, simply paint a Layer Mask using the Brush tool.
    
    Painting a mask to increase the appearance of light in the background.

We now have a textured, bump-mapped background that is completely dynamic; everything about it can be modified easily from within the Layer Styles menu. Consolidating complex imagery into one dynamic layer like this can reduce layer clutter dramatically and allows you (and whoever else may be using the file) to easily find and modify things. Now, let’s move on to creating our icon.

3-D Modeling Link

By combining some interior effects, we can use the Layer Styles menu to create simulated 3-D objects: great for icons, buttons and other interface objects. We’ll now model the base of the round icon in the example image using a single layer.

STEP BY STEP LINK

1. Begin by creating a circular shape layer with a rich red fill.
   
   Creating the shape layer for the icon’s base.
2. As is often the case when modeling a 3-D shape, let’s begin by adding a Gradient Overlay to our Layer Style. A white-to-black Radial-styled gradient set to Linear Burn works best for our implementation. Be sure the white area of the gradient is at the origin.
   
   Adding Gradient Overlay set to Linear Burn.
3. We now have a dramatically shaded sphere with a head-on light source. By decreasing the opacity of the gradient, we can flatten the shape to a more concave button.
   
   Reducing the Opacity for a subtler effect.
4. Let’s also move the direction of the light to the upper-left. While leaving the Layer Style menu open, move the mouse over the image itself (the Move Tool icon should appear). Simply click and drag the epicenter of the gradient to the upper-left of the shape layer.
   
   Repositioning the gradient within the Layer Styles menu.
5. While Bevel and Emboss may seem like more logical tools, you can often get a cleaner, more customizable beveled look by using a combination of other effects. First, add a black Inner Glow, set to Multiply. Adjust the Choke, Size, Opacity and Contour until you have a softened edge inside the shape.
   
   
   Adding a Glow to darken the edge of the base.
6. Like for any well-rendered spherical surface, we have to add some reflected light in our shadow region. This is easily achieved with the Inner Shadow effect. Change the color to white and the Blend Mode to Linear Dodge. Adjust the angle so that it appears in the lower-right of our shape. Tweak the Contour, Distance, Size and Opacity to create a subtler effect.
   
   
   Adding subtle reflected light using Inner Shadow.
7. To enhance the feeling that the shape is part of the document’s “environment,” we can add some effects to interact with the background. Drop Shadow is usually the easiest tool to use for this. Massage the settings until everything feels right.
   
   
   A simple Drop Shadow goes a long way.
8. Using the Outer Glow effect, we can simulate the reflected red light that our background image would absorb if this were an actual setting. Change the glow’s color to a darker red, and change the Blend Mode to darken. Again, work with the Size and Opacity settings to create the desired effect. This is one of those effects that, when used correctly, no one should notice because it just looks natural.
   
   
   A red Glow to add more “environment.”

Please notice that Layer Style gradients can’t be dithered, which can make them lower quality than their Gradient Layer and Gradient Tool counterparts (— Marc Edwards).

Diffuse vs. Specular Light Link

Now, our icon reflects a simulated diffuse light, which gives it the look of a matte-finished surface. If you prefer a glossier appearance, you can easily create a specular highlight using (what else?) Layer Styles.

STEP BY STEP LINK

1. Duplicate the current shape layer (Cmd/Ctrl + J).
2. Clear the new layer’s Layer Styles: right-click the layer in the Layers palette and select “Clear Layer Style.”
3. We also need to modify the shape of the layer to give the reflected light a sharper edge. Using the Direct Selection Tool (A), select the shape path in the layer’s vector mask. Copy it (Cmd/Ctrl + C) and paste it (Cmd/Ctrl + V) above the current path. Change this path’s mode to Subtract from shape area (-). Then move the shape down and to the right to create a crescent shape. You may also want to make the negative shape larger to create a more natural inside curve: simply Free Transform (Cmd/Ctrl + T) and then scale the shape up.
   
   Modifying the shape of the specular highlight.
4. Because we need this layer only for its Layer Styles, we can set its Fill Opacity to 0%.
   
   Dropping the layer’s fill to 0%.
5. We also want this layer to inherit the Layer Styles of the underlying layer, so create a Clipping Mask on the new layer (Cmd/Ctrl + Option + G).
   
   Creating a Clipping Mask to inherit effects.
6. Now, begin the Layer Style with a Gradient Overlay. Use the default black-to-white gradient, and set the Blend Mode to Screen. Knock the Opacity down to about 50%, and change the angle to about 115°. You may need to change the positioning of the gradient, which you can do by clicking and dragging inside the document window, just as you did in the 3-D modeling section.
   
   
   Setting the Gradient Overlay to Screen.
7. This is a good start for the highlight, but it still looks somewhat unnatural. Using a transparent inside stroke, we can shrink the perimeter of the interior effects. Add a Stroke effect to the layer and drop its opacity to 0%. Change the position to Inside, and work with the size slider until the highlight begins about where the darker inner glow ends on the underlying layer (the example image uses 5 pixels).
   
   
   Using a 0% Inside Stroke to shrink the perimeter of interior effects.
8. To add a more dynamic look to your highlight, you can add a white Inner Shadow set to Screen with a custom contour. Tweak the distance and size settings to finish off the effect.
   
   
   The Inner Shadow creates a more dynamic specular reflection.

X-Ray Vision Link

STEP BY STEP LINK

To create the die-cut type inside our icon, we could turn the text layer into a shape layer and use the paths to mask away areas from the base. However, this would result in degenerated content; we would no longer be able to modify the type. Instead, we’ll simulate a mask using the Knockout Blending Option. This will also allow us to apply custom effects to the cut-out area.

1. Create a new Type Layer with the text “fx”, and position it within the circular base. The example uses 120 point Garamond Bold Italic.
2. Drop the Fill Opacity to 100%.
3. Begin your Layer Style by adding an Inner Shadow. Increase the size, and increase the opacity to about 90%. You may also want to modify the distance and contour to your liking.
   
   The beginnings of the die-cut effect.
4. We now have the beginnings of a die-cut effect, except that the text still shows the base below it. To fix this, go to the Blending Options section in the Layer Styles menu. Change the Knockout from None to Shallow (this setting samples pixels from the layer directly beneath the current layer’s group). Because our text layer doesn’t belong to a layer group, it samples instead from the Background layer. (Using a Deep Knockout would always sample from the Background layer, regardless of the layer’s group.)
   
   
   Shallow Knockout samples pixels from the layer directly beneath the current layer’s group.
5. To get the text layer to sample from our diamond plate layer, start by clicking “Okay” to close the Layer Style menu. Select the text layer and both of the buttons that make up the base, and group the layers (Cmd/Ctrl + G). As you can see, the “fx” shapes are now drawing pixels from the textured layer directly below the new layer group.
   
   Grouping the icon so that the Knockout samples from the diamond plate layer.
6. The knockout effect is very convincing, but the type still feels detached from the base. Let’s add a beveled effect to simulate the surface quality of the base. Start by adding an outside Stroke with a size of 2; then drop the opacity to 0%. This doesn’t achieve anything but is necessary for the next step.
7. Now add a Bevel and Emboss effect. Change the Style to Stroke Emboss and Technique to Chisel Hard. This will apply the bevel’s lighting effects within the stroke area created in the step above. Modify the settings to achieve a subtle and smooth edge.
   
   
   Adding a Stroke Emboss.
8. Let’s take the bevel one step further by adding a thin specular highlight to the bottom-right edges of the shape. We can use a white Drop Shadow effect, set to Screen, to add a bright highlight just at the edge of the bevel. You’ll want to modify the distance and size to give the highlight a sharp edge.
   
   
   Adding a thin specular highlight using a Drop Shadow.
9. Finish off the Layer Style with more shading within the die-cut letters by adding a simple black-to-white Gradient Overlay, set to Multiply.
   
   Finishing off the die-cut.

Quick Tips Link

Despite frequent misuse, the Layer Styles menu really is a powerful tool that every designer should learn to work with. Not only does it provide a level of speed and control not easily found through other means, but it provides invaluable flexibility. Our example shows how a multi-dimensional icon and a completely dynamic background can be consolidated within four simple Shape layers, allowing them to be easily modified, reused and repurposed throughout your designs. Below are a few extra tips to remember when working on your next project.

EFFECTS STACKING ORDER LINK

You may have noticed sometimes that an effect isn’t visible when another effect is being used. For example, a Color Overlay seems to override a Gradient Overlay. This is because of the Layer Styles Stacking Order. Just as with the Layer’s Palette, one layer will cover another that is lower down in the stacking order. Unfortunately, the Layer Styles menu doesn’t allow you to rearrange the order of effects. One way around this (even if you sacrifice the ability to edit) is to use Create Layers, which turns all of your Layer Style effects into actual layers that you can move.

Interior Effects Stacking Order:

• Stroke
• Bevel and Emboss
• Inner Shadow
• Innger Glow
• Satin
• Color Overlay
• Gradient Overlay
• Pattern Overlay

Exterior Effects Stacking Order:

• Stroke
• Outer Glow
• Drop Shadow

NON-COLOR-SPECIFIC STYLES LINK

Though not always possible, you may want to use black, white and grays for your effects. Using monochromatic colors in conjunction with the proper Blend Mode allows you to create styles that are non-color-specific, meaning you can modify the color of the actual layer, and your Layer Style will update appropriately.

SCALING EFFECTS LINK

There may be times when you’ve created a Layer Style that looks great at the original size, but when the shape is increased or decreased, your beautiful style is destroyed. Fortunately, Photoshop provides a method to adjust styles that are out of whack. Simply choose Layer → Layer Style → Scale Effects, and then input the percentage you need.

INCONSPICUOUS MENU OPTIONS LINK

A number of hidden commands are available to you from within the Layer Styles menu. Depending on the effect, you will have access to either the Hand tool or the Move tool by simply mousing over the document window. The Hand tool allows you to move the document around just as you would outside the Layer Styles menu, and the Move tool repositions the current effect and updates the settings automatically. When using the Move tool, you can still access the Hand tool by holding the space bar. While using either of the tools, you can zoom in and out by holding Space + Cmd or Space + Option respectively. Don’t forget, as with most other menus in Photoshop, holding “Option” will change the “Cancel” button to a “Reset” button, allowing you to undo any changes.

Continue Reading

Texture is becoming integral to design. It’s gone beyond being a trend — it’s now a simple and effective way to add depth to a website. Wielding the power of texture is a great responsibility. It increases the effectiveness of websites and is a quality tool in the arsenal of designers. It can guide the user’s eye and emphasize the importance of key elements.

However, texture has long been synonymous with “dirty” or “grungy” design. Its overuse can be seen throughout the world of music group websites and has left a bad taste in the mouths of designers. Due to its frequent misuse, its benefits have long been overlooked. Texture can bring a website together, but should not be the main focus.

TEXTURES VS. PATTERNS LINK

Before we get into textures in depth, let’s distinguish between patterns and textures. These words are often used synonymously. Patterns are typically small, repeating, tileable elements, whereas textures tend to be much bigger images that don’t repeat. Imagine a Venn diagram, with textures on the left and patterns on the right, with a little overlap in the middle. So, some textures are also patterns. Several of the tileable texture packs found on Tileables are good examples.

The Function Of Textures Link

We love texture on the Web for a multitude of reasons. Design decisions shouldn’t be made simply on the basis of, “Oh, well. It looks good.” Design should serve a purpose, and each decision about texture should be made by weighing the pros and cons. Let’s start by going over some of the key benefits.

GRABBING ATTENTION WITH A CALL TO ACTION LINK

Texture can highlight elements such as titles, headings, icons and buttons. It draws the eye to calls to action and main headings. This is perhaps the clearest way that the trend towards textures is catching on.

When used minimally, texture separates the content from the rest of the website. It guides the user’s eye directly to the intended element. It can be a great way to separate key branding elements.

You can grab attention in different ways, but two common ways can be easily demonstrated with branding: a textured logo against a clean background, and a clean logo against a textured background.

Notice how Poco People’s grunge logo is accentuated against the clean background.

Cultural Solutions UK’s branding is the opposite: a clean logo against a textured background.

ENHANCING INFORMATION ARCHITECTURE LINK

Texture can be used to guide the eye. And like lines, boxes and contrast, it can be used to separate content into logical divisions. Using it effectively in conjunction with other methods is vital. The goal is not to abandon other methods of information architecture, but to enhance their effectiveness.

By setting off the sliding banner with a texture, A Modern Eden highlights the content within.

See how you can use textures without violating best practices? High contrast and legibility are evident and work in tandem with the texture.

Sky’s Guide Service perfectly separates its content with textured elements.

Above, each element is individually textured for a particular purpose. Sky’s Guide Service divides the content into logical sections, and the user sees where they start and end. Texture enhances the information architecture by creating logical content areas that help the user process the information accurately.

Also, the texture perfectly suits the style and topic of the website. All of the elements are custom-tailored to fit a logical theme, thus enhancing the website’s overall message.

BUILDING AN ATMOSPHERE AND BOLSTERING IDENTITY LINK

More and more, clients want website designs that do more than display their content in a user-friendly way. They want websites that enhance their identity and enable users to identify with the brand. Texture can be used to achieve this in many ways.

While texture is plenteous on Deda, it is gentle and never over-bearing.

Deidre “Deda” Bain does exactly this for her personal brand. Her use of texture helps to put a face — almost literally — to the service. Without the texture, the website would be rather bland and would lack the personality of its creator. With legibility and a proper information architecture, the design would still be nice, but that extra something would be missing.

Texture adds to the “intangibles” of Web design: that wow factor and sexiness of a memorable website.

Tips And General Advice Link

All of this is fine and dandy, but you’ll want to avoid common traps while refining certain techniques and modes of thought.

MAINTAIN LEGIBILITY LINK

Never (ever!) sacrifice legibility for texture. Many of us make this mistake, and will continue to for a while to come. Legibility on the Web is paramount in importance. If a user can’t even read the message, then what’s the point in composing it, let alone texturing it?

Avoid doing this to your type:

Sometimes, we go a bit overboard. This poster shows what happens when you get too excited about texture.

DON’T BEAT A DEAD HORSE LINK

In print, texture is hard to overdo — depending on the genre, of course. On the Web, however, texture can be extremely distracting when used in “bulk.”

On Hinder’s website, legibility gets lost in the menu, and the texture is distracting. (And watch out for the auto-playing music.) Oops!

PRACTICE MEANS IMPROVEMENT LINK

Experiment with your designs. Try new things. Apply textures in places where you wouldn’t normally put them. Use textures that you’ve never used before. You never know what you’ll discover until you try it.

IF IT SERVES NO PURPOSE, TAKE IT OUT LINK

Refine your technique before using it on a client’s website. Always make sure that your use of texture is based on a sound plan, as would be the case with any website you create. If you can’t justify something that you’ve done as being an improvement, take it out.

There’s no point in overdoing texture. The entire purpose of the Web is to disseminate information. How can you accomplish this if your content is unreadable? Besides, subtlety and nuance are a better way to demonstrate mastery of a subject.

CONSIDER THE EFFECT YOU ARE TRYING TO ACHIEVE LINK

As we know from experience, getting carried away with texture is all too easy. Keeping in mind the final effect you are trying to achieve is the best way to avoid this. If you want a subtle textured background, just do it and then move on to the next item on your list. Otherwise, you’ll never get it done.

COLLECT RESOURCES SO THAT YOU DON’T HAVE TO SEARCH LATER LINK

You can save a huge amount of time by downloading and archiving resources that seem useful to you. Keeping your files organized is a great back-up plan. Trust us: nothing is more frustrating than coming across the perfect brush pack and not being able to remember where you found it. Our list of brushes is long and diverse. We’ve been collecting the brushes over the years from websites such as deviantART and Brusheezy, from the freebie sections of various design blogs, and by making our own.

LEARN MASKS LINK

Learning to work with layer masks will save you a lot of time in the long run and will be a strong tool in your arsenal. Masks are also a fantastic way to non-destructively experiment with your designs. A lot of great tutorials are out there; a quick Google search led me to “Understanding Layer Masks in Photoshop.”

DON’T SACRIFICE QUALITY FOR LOADING TIME LINK

There are plenty of interesting ways to keep textures from killing loading times. But don’t sacrifice the quality of the texture too much, because rather than appearing finished and professional, the website will look outdated right out of the gate. Repeating texture patterns are a good way to save on the loading times of backgrounds and larger elements.

Of course, we want to design with the Web’s inherent constraints in mind, but as Internet connection speeds rise globally, loading time shouldn’t be your primary concern. Nevertheless, use texture within reason: a website with a lot of textures will inevitably have a long loading time. A simple method to get around file size is to use repeating textures, especially for backgrounds. Tileables is a fantastic resource to get started. And we’re always learning about CSS Sprites and using Smush.it to further compress our files.

The difference in texture quality here is major. The texture on the left is compressed. The one on the right is, too, but not as much.

CHOOSE TEXTURES LOGICALLY LINK

Lastly, and perhaps as important as maintaining legibility, choose textures that are logical for your design. If you’re building a website for a furniture store, then rusty textures wouldn’t make a whole lot of sense. Textures are meant to build identity, not to confuse the visitor, regardless of whether they look good. Usability should always take precedence.

Textures: A D.I.Y. Attitude Link

One of the many ways to get textures is to create them yourself. We are big proponents of this because it can save you time and give the exact result you’re looking for. And don’t worry: it’s not as difficult as it looks.

SNAP SOME PHOTOS LINK

The simplest method is to grab your trusty digital camera and snap shots of textures that are around you, especially ones that you’ve never considered to be “textures.” Unique textures can advance your style. For example, would you consider the top of a cake or bubbles in a sink as workable textures? They’re all around you.

This photo from Lost and Taken demonstrates that a distinctive photograph can be used for a special-purpose texture.

If you look around yourself, you will see plenty of grunge: worn-down buildings, concrete walls, rusted metal, tree bark, weathered wood. These are all fantastic specimens. In fact, a decent point-and-shoot camera is enough to start. We started shooting our own textures with an oldNikon Coolpix 4200, which worked flawlessly.

When you shoot, you could use full auto mode. But don’t use flash, because it will “flatten” the image and remove most of the detail in the texture, especially in close-up shots. Let the camera do the work, and always take multiple shots of a texture to get the best possible result. You can always rely on post-processing in your favorite image editor.

SCANNERS WORK, TOO LINK

Another great tool is the good ol’ flatbed scanner. Old paper, cardboard, mouse pads (shout out to Trent Walton for this idea), paper bags, skin — the list of what you can scan goes on. Scan at a very high resolution, 600 to 1200 DPI, so that the texture is of high quality and can be adapted to any project, including large print pieces. High-resolution scans also allow you to isolate particular spots in an image to use as a texture.

Once you’re comfortable with that, you can start creating elements using traditional art techniques. For example, apply a bit of charcoal to some beautiful heavy paper, which could be the finishing touch for that grunge background you’ve been after. What about acrylic paint splatters to add depth to your UI? Or coffee stains on paper? The possibilities are endless!

ICING ON THE CAKE LINK

You can always spice up the process by combining textures. Using the layer blending modes in Photoshop, you can combine various textures into one. Caleb of Lost and Taken has postedan in-depth walkthrough of the process that he follows to create his packs.

Believe it or not, Photoshop’s somewhat gimmicky filters can also be used to create textures. Noise textures are a snap with the Noise filter. Playing with the values and levels of the filter, you can obtain results for a wide range of needs. There’s also the Texturize filter, although it’s rather gimmicky and rarely useful. Still, it could help you achieve part of the effect you’re going for.

A brief experiment with noise filters. Light noise is better, but make sure you can still see the effect.

If you want the texture to be seamless, then a uniform distribution is easier to work with. “Monochromatic” ensures that the texture has no color noise that could conflict with other colors in your design.

Continue Reading