Opacity + Photoshop Blend Modes = Pattern Magic

Wdd Logo.
June 08, 2010

creating patterns with geometric shapes in Photoshop, oh yeahForget the clone stamp, paint bucket and pattern presets. When it comes to creating patterns, the ability to duplicate a layer is one of Photoshop's greatest features.

Semitransparent shapes can be very useful when creating repeated geometric “textures” of color and form.

They're easy to create, fun to play with and best of all, they can be uniquely yours.

In searching for interesting patterns, designers sometimes pass over basic shapes in favor of more complex geometrics. But simpler is often better.

The trick is to pay attention more to how shapes interact than to how a shape looks on its own.

The concepts are simple:

  1. As translucent shapes overlap, they create new shapes.
  2. Complex patterns emerge from apparently simple origins; and just like in a poem (a haiku, for example), there's room for variation within the prescribed form.

Unfortunately, it's easier to make a mess than a purposeful design. The trick is to identify which subtle changes might have consequences later.

One Origin, Many Destinations

When creating patterns that use opacity or blend modes, starting simple is best.

pattern example created from duplicating a normal layer

The pattern above was created with one circle in one layer. Here's the process:

  1. Set a circle (colored #4184de in this diagram) to 50% opacity.
  2. Hold down the Option (Mac) or Alt (Windows) key while using Photoshop's Move tool. The layer will be copied as the cursor drags. Their combined opacity will darken in the places where they overlap.
  3. Option + drag (Mac) or Alt + drag (Windows) both circles down and to the left—far enough to leave a white gap between each of the copies.

When repeated, a pattern appears.

Patterns emerge from the way shapes overlap as well as from the shapes themselves. Clarity comes from simplicity: a pattern that begins simply looks better in the end. The circle in our last example can be used to create many patterns, including these:

different textures and patterns created from the same layer

Each of these patterns was created with the same size of blue circles. Incredible variations in texture are possible with the simplest of changes; position, opacity and blend mode were the only changes made in the examples above. But "simple" doesn't always mean "easy."

Blend Modes

For pattern-making, 5 of Photoshop's 25 blend modes stand out: normal, soft light, hard light, overlay and difference.

examples of normal mode

When people think of complicated layer blends, "normal" rarely springs to mind, but its straightforward nature makes it the easiest to work with. "Normal" mode is the default setting, and it mainly has to do with the opacity settings of the layers. The colors of shapes and backgrounds blend according to their strengths. Normal could also be called the "blending" blend for its tendency to find average colors between the subject (a circle in the example above) and the items below it.

examples of hard light

Hard light multiplies shadows and screens highlights. Layers set to "Hard Light," as in the diagram above, tend to tint everything underneath, which amplifies their original hue and saturation. If the layer contains dark colors, the layers below tend to get darker, and vice versa.

examples of soft light

Soft light screens highlights and multiplies shadows without changing the blend color's luminosity. It works best when the underlying colors are neutral or have low saturation. Layers set to "Soft Light" have little impact against black and white, as shown above, but work well over pale blue and gray.

examples of overlay

Overlay strengthens colors below a layer and changes hues to match its own. Layers set to "Overlay" (example above) are brighter than when in "Soft Light" mode but still don't affect rich black and pure white.

examples of difference

Difference is the least predictable blend mode. Layers in this mode generally invert tones in the layers below: lights become darks and darks become lights. Hues, however, become their opposite on the 360° color wheel: reds become cyans, greens become magentas and blues become yellows. The effect will vary depending on the colors and shades below whichever layer is set to "Difference" mode.

more examples of difference

Above, a layer set to "Difference" mode over a white background completely inverts its colors. The same layer over a 50% gray background changes its hues 90° and muddies its tones. Over black, the "Difference" layer appears to have stayed the same.

Here's how they work.

Pattern-Making, Step By Step

As a simple example, we'll create a pattern based on circles. Regardless of shape, there are four steps: create a shape on a layer, give it a certain opacity and blend mode, experiment with a few copies, and mass-produce the pattern.

Step 1
Create a vector object with the Ellipse tool. Set the layer's blend mode to "Hard Light." Although any size and color will do, this example uses a 134x134-pixel circle, colored #575fdf. An image size of 600x600 pixels is a good place to start.

step 1 in creating a pattern

Step 2

Duplicate the layer with Command + J (Mac) or Control + J (Windows) or Layer → Duplicate Layer. Drag the copied layer to the right, to half of the circle's width. Alternatively, hold down the Option key (Mac) or Alt key (Windows) while using the Move tool. This will duplicate the layer as you drag.

Make at least two copies. In this example, each new layer touches the center of the previous layer. As a result, the other layers will barely touch one another.

step 2 in creating a pattern

Step 3
Select the first two layers and drag down the width of one-half circle. This is the same principle as step two, but down instead of to the right. When all layers share the same color, opacity and blend mode, you can create a repeating pattern simply by duplicating the layers in any order—or any direction.

step 3 in creating a pattern

Step 4
Repeat as desired.

step 4 in creating a pattern

Initial Decisions Affect the Outcome

The beginning is critical when creating patterns, because duplicating layers amplifies mistakes. The more copied layers there are, the more tedious fixing problems will be.

For example, let's say you decide to change every layer's opacity from 50% to 30%. That's one change per layer—and you can expect dozens, if not hundreds, of layers in a reasonably sized pattern. And what a change a few percent can make!

more examples of difference

Each pattern above uses the same blend mode ("Difference"), same shape, same color and same placement, but different opacity. If you don't want to create an action, then you'll have to change the blend modes and opacities one layer at a time. Photoshop has a few shortcuts to expedite the changes:

  • When the Move tool or any selection tool is active, the numbers 0 to 9 changes a layer's opacity. Type 1 for 10% opacity, 4 for 40% opacity, etc. Typing 0 sets the layer's opacity to 100%. This shortcut for both Mac and Windows works on just one layer at a time.
  • When the Move tool or any selection tool is active, you can quickly change a layer's blend mode with these key combinations:
    Mac Windows Blend mode
    Option + Shift + N Alt + Shift + N Normal
    Option + Shift + H Alt + Shift + H Hard Light
    Option + Shift + S Alt + Shift + S Soft Light
    Option + Shift + O Alt + Shift + O Overlay
    Option + Shift + E Alt + Shift + E Difference
  • Duplicate any single layer with Command + J (Mac) or Control + J (Windows).


"Keep it simple" isn't just a refrain: it's a requirement. These examples were all created with the same shape, one or two colors and blend mode changes. Yet the variations seem unlimited:

various colorful pattern examples

Written exclusively for Webdesigner Depot by Ben Gremillion. Ben is a freelance web designer who solves communication problems with better design.

All of these examples use circles. Just imagine what you could do with triangles or trapezoids. Why not give it a go and link to your creations in the comments section below?

WDD Staff

WDD staff are proud to be able to bring you this daily blog about web design and development. If there's something you think we should be talking about let us know @DesignerDepot.

Read Next

30 Most Exciting New Tools for Designers, 2023

As we near the end of 2023, we wanted to take a look back over all the tools we collected over the past year, to pick…

3 Essential Design Trends, December 2023

While we love the holidays, too much of a seasonal theme can get overwhelming. Thankfully, these design trends strike a…

10 Easy Ways to Make Money as a Web Designer

When you’re a web designer, the logical way to make money is designing websites; you can apply for a job at an agency,…

The 10 Most Hated Fonts of All Time

Remember when Comic Sans wasn’t the butt of the jokes? Long for the days when we actually enjoyed using the Impact…

15 Best New Fonts, November 2023

2023 is almost over, and the new fonts are still coming thick and fast. This month, we’ve found some awesome variable…

Old School Web Techniques Best Forgotten

When the web first entered the public consciousness back in the 90s, it was primarily text-based with minimal design…

20 Best New Websites, November 2023

As the nights draw in for the Northern hemisphere, what better way to brighten your day than by soaking up some design…

30 Amazing Chrome Extensions for Designers and Developers

Searching for a tool to make cross-platform design a breeze? Desperate for an extension that helps you figure out the…

Exciting New Tools for Designers, November 2023

We’ve got a mix of handy image helpers, useful design assets, and clever productivity tools, amongst other treats. Some…

The Dangers of Doomscrolling for Designers and How to Break Free

As a creative professional, navigating the digital realm is second nature to you. It’s normal to follow an endless…

From Image Adjustments to AI: Photoshop Through the Years

Remember when Merriam-Webster added Photoshop to the dictionary back in 2008? Want to learn how AI is changing design…

3 Essential Design Trends, November 2023

In the season of giving thanks, we often think of comfort and tradition. These are common themes with each of our three…