Navigation

Opacity + Photoshop Blend Modes = Pattern Magic

How To, Resources | Jun 8, 2010

Forget 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 134×134-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?

Share this post
Comments (no login required)
  • http://www.squiders.com Web Design Kent

    Nice tutorial, must try something along those lines

  • enam

    amazing….thanks for sharing…

  • http://www.psyched.be/wordpress Darkened Soul

    Kaleidoscopic patterns arise once again

  • http://www.natashastorm.co.za Storm

    Awesome post! Definitly going to try it!

  • http://www.slotidea.com Slotpro

    thanks for tutorial i’m going to try it !!

  • http://www.katskinner.com Kat Skinner

    Wow, I never actually thought of using opacity to make patterns, but the way you showed it really works – I probably wouldn’t have believed you if you didn’t have the pictures there. This idea might just be exactly the thing I can use on my new website http://www.katskinner.com for the header – I was having trouble with a straight colour background that just didn’t look quite right.

    Thank you so much Ben.

    • http://www.italiandigitaldesign.com Eigil Hoeyrup

      Hey Kat
      I just looked at your site, may I suggest you rethink the blue color of tha menu as it is quite hard to read on the brown background.

      Kind regards

  • http://digitalshowcase.co.za Digital Showcase

    This is great. Thanks a lot!

  • http://www.rafaelbraga.com Rafael Braga

    Crazy and nice man. It’s another great possibility using PS.

  • http://www.ate5.com Jordan Walker

    That is really a nice tutorial on using Photoshop to create opacity blending effects.

  • http://www.sametomorrow.com/blog adam

    Interesting tutorial.

  • http://sexidesign.com Melody

    These look like really funky kaleidoscope patterns =)

  • http://evanjacobs.net/ Evan Jacobs

    Wow this is neat! Thanks for sharing :-)

  • http://www.montpellierinteractive.com/web-design.htm Web Design Cheltenham

    Very cool tutorial – reminds me of that 1980’s toy: Spirograph.

  • http://www.thepixery.com Design Gallery Joey

    I really could have used this last week. Thanks guys!

  • http://www.michaelsaathoff.com Michael Saathoff

    great tutorial, i use the same concept quite a bit when making Flash sites / ads. since my customers always request that the ads have enough motion to make someone sick!

  • http://unexpectedways.net/7-tips-for-choosing-a-great-designer-by-an-atlanta-graphic-designer/ Atlanta Graphic Designer

    This is an interesting concept. Plus it’s cool since you can create different patterns in this way in a variety of different ways. Thanks.

  • http://www.houmedia.com Alysia

    Great tutorial. Thanks!

  • http://www.lozlow.com Pete Shaw

    Thanks for sharing, always wondered about those blending modes.

  • http://www.infopunta.com Punta del Este

    wow very nice!!, with that a “flower of life” patter design can be easily made.

    tank you

  • http://www.jerry-lee.cz Jerry-lee

    Hi, nice post. I would appreciate one more paragraph about “usability” of these patterns? Can you show some examples of use in “real life”? It’s nice to play with Photoshop but at the end of the day, isn’t it this a waste of time?

    • http://www.psyched.be/wordpress/ La Cinyc

      Patterns can be used as the beginning of a design or as an overlay fading out (down, up, left, right) or
      combined with other patterns, can be used in comics, can be used in flash design, can … it’s just yet another easy way to create your own without using too many effects…

      usability… then what use do some colours have? what use does a picture have in a certain website or an ad campaign, it’s all about creating an emotion, a “motion”, a feeling, a reaction, not always on a conscious level. it’s not at all about “just another pattern with no use”

      just a thought…

      • http://www.jerry-lee.cz Jerry-Lee

        Hi, thanks for your response. I understand, respect. I mainly wrote about real examples of prints/websites/flash etc using patterns.
        Something like there are shown various famous logotypes when writing about “how to make a logotype”… I consider these shown patterns as a raw material, I would like to see examples of final products.
        As I can remember, I can see patterns used as a background image of the webpage, but they are mostly “pixel-based”.
        Regards

  • http://www.kadr.nl david

    hey,

    Doesn’t photoshop also include a way to save patterns for alter use in a library?
    It would be a cool extension to this article to show how you can actually save part of an pattern to be able to use it as a fill.

    Also, I was hoping this article could tell me how to define which part of a pattern you must cut-out to make a picture you can just repeat to make a big pattern.

    Anyway, this was maybe beyond the scope of the article.

    • malydok

      You can define a pattern in Photoshop’s Edit menu. It will create it from the whole open document, so you have to crop it to a square ‘cut-out’- the basis of a pattern. How do you do that? You basically have to analyze what you have created and find the square shape that creates it. Can’t explain it any better, I’m also still a novice in this stuff. Still, you won’t know until you try ; )

      • http://www.kadr.nl david

        thnx for the reply! much obliged!

  • http://www.techmadly.com/ Nitesh patel

    really nice tute .. i am a new user of PS so it is worth more for me

  • http://desaindigital.com jeprie

    I wrote a simple on how to create complex pattern in Photoshop in psdtuts. You may want to use it and combine the technique here.
    http://psd.tutsplus.com/tutorials/designing-tutorials/quick-tip-create-a-complex-pattern-by-nudging-smart-objects/

  • http://infocuswebdesigning.com/ Infocus Web Solution (I) Pvt Ltd

    I’m surely going to using it for our new projects. Nice and Easy to Understood.

    Thanks

  • http://www.bebop-cafe.com BebopDesigner

    Looks really cool! thanks for such a great tut!

  • CG

    Great Tutorial! Thanks a lot!
    One thing is missing though. Scripting! (Yeah, I’m a geek!)
    I mean, duplicating all those layers manually doesn’t sound so logical to me, I’m sure the better way to do this is using Adobe ExtendScript.
    I once tried to learn that thing, but couldn’t find any thorough tutorial or a comprehensive guide. There was the documentation but, ain’t got enough time to go through all that now!
    Anyone here tried scripting for stuff like making patterns?!

  • Adam

    Its truly awesome. Thanks for the idea!
    Also, for additional interesting results, try different shapes as well, like triangles or other geometrical shapes. I love this! :)

  • http://twitter.com/epdesign Emily

    This is pure awesomeness! Thank you so much! Used part of this technique for my Twitter background.

  • John

    great tutorial, will be using such textures and patterns in future designs

  • http://patterns.ava7.com ava7

    nice tut. that’s how i made some patterns on my site :)

  • http://www.yourothersite.com Burton Haynes

    Hands down, Apple’s app store wins by a mile. It’s a huge selection of all sorts of apps vs a rather sad selection of a handful for Zune. Microsoft has plans, especially in the realm of games, but I’m not sure I’d want to bet on the future if this aspect is important to you. The iPod is a much better choice in that case.

  • http://rai-adi-sanjaya.blogspot.com Rai Adi Sanjaya

    nice tricky
    thanks for sharing :)

  • Prithivi

    Kick ass.. .. some tihing new for now.. yet very simple.. hats of for posting

  • http://www.impact-webdesign.net/ Charlotte web design

    Thanks for sharing, always wondered about those blending modes.