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 600×600 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).


Possibilities

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

Exciting New Tools for Designers, June 2023

We’re halfway through 2023 already, and the number of incredible apps, tools, and resources for designers is mounting.

3 Essential Design Trends, June 2023

This month we are focusing on three trends within a bigger website design trend – different navigation menu styles and …

15 Best New Fonts, May 2023

The choices you make when selecting a typeface have more impact on your design than almost any other decision, so it’s …

10+ Best Tools & Resources for Web Designers and Agencies (2023 updated)

Having the ability to envision a tastefully designed website (i.e., the role creativity plays) is important. But being …

20 Best New Websites, May 2023

This month, there are tons of great new agency websites to get excited about. 3D animated prisms are a popular theme, a…

How to Find the Right White Label Website Builder for Your Agency

Web design agencies face a lot of obstacles in closing the deal with new clients. One of the most common ones is the ar…

Exciting New Tools For Designers, May 2023

There are hundreds of new tools for designers and developers released each month. We sift through them all to bring you…

3 Essential Design Trends, May 2023

All three of the website design trends here mimic something bigger going on in the tech space, from a desire to have mo…

10 Best AI Tools for Web Designers (2023)

It’s time to stop worrying if AI is going to take your job and instead start using AI to expand the services you can of…

10 Best Marketing Agency Websites (Examples, Inspo, and Templates!)

Marketers are skilled in developing strategies, producing visual assets, writing text with high impact, and optimizing …

15 Best New Fonts, April 2023

Fonts are a designer’s best friend. They add personality to our designs and enable fine typography to elevate the quali…

20 Best New Websites, April 2023

In April’s edition, there’s a whole heap of large-scale, and even full-screen, video. Drone footage is back with a veng…