Interlocking rings wallpaper design

30 Jul 2012

A few days ago I showed you how you can create these colorful interlocking rings in Illustrator. In a next step I turned this creation into a wallpaper design. Today I'll share a little bit of that process…

The creation of the background

In my initial creation of the rings I didn't really have a wallpaper in mind, just a visual for my article. The background was also not big enough, so I had to do a bit of work. Since I usually prefer dark wallpapers, I muted the colors of the background and used a dark grey background instead of the bright colorful one. Below is a screenshot of my Photoshop document with the layers palette showing the different layers used for this creation. Yes, I prefer to switch over to Photoshop as soon as I know my work involves some bitmapped textures, where I can use the brush to mask out some details etc.

Photoshop layers used in this interlocking rings wallpaper creation

Overlaying lighter circles

So first things first, and that's placing the rings I created in Illustrator into a Photoshop document. I started with the wallpaper dimensions for Pad3, that's 2048 x 2048. I've tried to copy and pasting the rings directly from Illustrator into Photoshop but… there always a 'but', some of the layer mode effects where unfortunately screwed and weren't properly transmitted into Photoshop…sigh… I thought this would have been fixed by now, but apparently it's not :( I usually take this route: just copy and paste my object as a vector-based Smart Object into Photoshop, as this gives me the flexibility to resize the object at any size, at any time, without any quality loss. I could bother to try to fix these effects, as I assume they are fixable by adjusting some things in Illustrator, but I didn't want to waste any time on that. So instead I opened my Illustrator file in Photoshop at a size that would fit my wallpaper creation.

Creating transparent bigger circles

To create the circular background effect underneath the rings, I created these transparent circles on a new layer on the exact position of the rings. The circles also have the same size and the same hue of the rings. Only, they are transparent. Some of them have 25% opacity, some a bit more,… This is something I played around with a little bit more in a later phase. Once these circles were drawn, I enlarged them each by 125% using Object > Transform > Transform Each (or Cmd/Ctrl + Option/Alt + Shift + D).

Overlaying transparent circles

Next I duplicated this layer and I resized the circles again at 125%, using Object > Transform > Transform Each (or Cmd/Ctrl + Option/Alt + Shift + D). Than I repeat this again, so I end up with 3 layers of transparent overlaying circles. I played around with layer modes and opacity values a bit more.

Placing the circles as Smart Objects in Photoshop

Next I copy & pasted the circles directly into Photoshop as a vector-based Smart Object. This time it worked fine and everything looked exactly as in Illustrator. I set the layer opacity to 30%, I duplicated the layer, and rotated it at 180°, below the original layer.

Making sure the circles fit the position of the rings

The duplicated circles are positioned to match the position of the bottom 2 rows of the rings.

Radial gradient background

For the background I decided to start from a dark background, but with a lighter area in the center where the rings are positioned. This way the attention is drawn towards the rings. I started from a white background, but added a Radial Gradient Overlay effect, using a very dark grey for the outside and light grey for the center of the gradient.

Adding a dark radial gradient background

At the very end of my process of this creation, I decided to add a Layer Effect, making this background a slightly bit lighter again. I could also tweak the grays of this gradient. While working on this creation I tried out a ton of colors, textures and effects for the background. While reading this, you could think I have taken these exact steps, but I haven't. A lot of experimentation went into this, and I believe that is the fun part of the creative process. Trying things out and see where you get, than compare with other options you've tried etc. So keep in mind I only explain my final results here. The process of my creations are usually very chaotic, due to all the things I try out along the way, looking for the perfect colors, perfect composition, perfect texture etc. A lot of undo and deleting is part of this process, and maybe 90% of the things I create along the way gets trashed. I almost never have my exact final result in my head. It's more like a basic idea, or sometimes just a vague idea of the direction I want to take.

Overlaying textures

As you can see from the layers palette shown in the first image of this article, I used a few texture effects for the background. The image below shows a fragment the textures I started from. The grunge texture was found here on Deviantart. As for the grid pattern, I can't remember where I got it from, but you can find a lot of cool patterns over at Subtle Patterns.

Textures used in this creation

The left one is a simple grid texture that I placed in Multiply mode so the white would become transparent. I did tweak the color of the lines a little bit using Image > Adjustments > Hue/Saturation… (or Cmd/Ctrl + U). The other texture has also been edited first by using a -100 value in the Saturation option, to desaturate the texture. I also played around a little bit with the Levels (Image > Adjustments > Levels… or Cmd/Ctrl + L). Then I also used the Clone Stamp tool tool to duplicate the texture to fit the dimensions of the wallpaper as the texture was too small.

Texture in normal mode at 100% opacity

The above image shows the texture in normal layer mode, but in the final creation I used Vivid Light at 10% opacity. I also duplicated this layer and added a Layer Mask to mask out the area of the rings. This is only a subtle difference, but it made the rings stand out just a little more.

Final result

Preview of the wallpaper

Download the wallpaper

Hope you enjoyed my brief analysis of the this creation. Don't hesitate to download it if you like the wallpaper:


  1. 1 Rudi 30 Jul 2012

    Nice stuff as always, love the color combination just awesome ...

  2. 2 marco 30 Jul 2012

    I love this one. Tried to follow the tutorial but couldn’t get that beautiful gradient fill on the rings.

  3. 3 saha 31 Jul 2012

    Great article Veerle…! Beautiful wallpaper. A little hard for me as a newbie but I’ll try to make it.

  4. 4 Franc 03 Aug 2012

    Veerle’s designs rock. Thanks for the tutorials!! Keep it up!

  5. 5 Nira 04 Aug 2012

    As mentioned above as well, great article! Stunning work with such vibrant colors. Very inspirational as usual. Thanks for sharing with us Veerle.

  6. 6 Jonathan 07 Aug 2012

    Very nice tutorial by the way, love the illustrator hack you used in previous article to get the rings interlocked !