Talk to me about anything. If you’d like to work with me, or
even if you just need a hug, I’ll get back to you shortly.

Please enter your name

Please enter a valid e-mail

It's cold!

Say something!

Design Quick and Easy Colorful Photoshop Swirls

This is a tutorial on how to create the swirls that I’ve used throughout my website. It’s very quick and easy to accomplish them with some transparency and a few layer styles as long as you are a little practiced with the Pen Tool within photoshop.

photoshop swirl tutorial


The Pen Tool

I thought about writing my own tutorial on using the Pen tool, but then I just decided that would be a waste of time. There are already a million great tutorials out there that give instructions on how to use the Pen tool, and it just takes some practice to really get the hang of it. Luckily we’re just creating swirly shapes with it for this tutorial, so you don’t need to be an expert. Doing a Google search came up with plenty of sources, here is a pretty extensive tutorial on the Pen tool if you are a beginner with it

The Swirls

So first whip out that Pen Tool (A) and start making some anchor points and start drawing (make sure to have Shape Layers selected at the top after you’ve selected the Pen Tool). You should be able to accomplish a similar shape to what I’ve done with around 10 points. After clicking and dragging to make each of your points, just use the Direct Selection Tool (A) to move them around and get them to a position that you are satisfied with. If you’d like, you can grab this image below and put it on a layer beneath yours then start tracing it with the Pen Tool. Lowering the transparency of your new shape layer helps with tracing. So at the end you should end something like this, you can also see where I’ve placed all of my anchor points (pick whatever color you’d like):

Next we’ll create your second shape layer, and that’s all the drawing we’ll have to do in order to see the effect take place. All I did to this second layer so far was lower the opacity to 60% and make it a slightly darker blue. You can draw it however you’d like, just have it smaller than your original shape. Also, make sure this second shape goes on the outside and the inside of your original shape layer in some places, like so:

Now the easy part. Right click on one of your shape layers and then click Blending Options. It doesn’t matter which one because both layers will have the exact same layer style applied to them, except for the opacity. Now select Inner Glow, change the blend mode to Multiply, the Opacity to 17%, and change the color to a darker gray (I used #7b7b7b). Change it’s Choke to 13% and it’s size to 7px. These settings are all assuming that you are creating this for a web document with swirls about the same size that I’ve used here. If you are using them for anything a lot bigger or smaller, you will have to change these settings respectively, and the same goes for the rest we will be talking about. Here is a screen shot of the Inner Glow settings:

Next we will give the shapes a Gradient Overlay. Change the Blend Mode to Screen, Opacity to 45%, and the Angle to -18°. You can leave the gradient set to a black-to-white gradient. When doing multiple shapes like these, I changed the Angle of the Gradient Overlay on each shape in order to give it a less uniform look.

And finally for the last layer style, we’re just applying a Stroke. Make it 1px, set its Position to Inside and its Opacity to 69% and a light gray color once again.

Now all you need to do is apply the layer style to the other shape layer. Right click on the layer with the style, select Copy Layer Style, then do the same to the other layer selecting Paste Layer Style. Your first shape layer should have an opacity of 100% and the second one 60%. Voilá! You now have your swirlies. Start making as many shapes in as many variations as you’d like, just keep them smooth by using as small of an amount of anchor points as you can. You can play around with their color and opacity, as well as the gradient angle to get whatever shapes you’d like. If you’d like, you can download the PSD of what we did here:

Downloadthe source files.

Tags: , , ,

Posted under General, Tutorials, Web Design on August 23rd, 2009 by Joren Rapini.

Now what?

Subscribe to the RSS Feed Leave a comment Share the wealth:

  1. Yay =D

    This one one long awaited tutorial, Good Work. I shall go off and play with this now I think…

  2. yik says:

    woah. .nice tutorials out there =) thanks for sharing your idea~

    more powers to you!

  3. Joren Rapini says:

    Thanks for the compliments guys!

  4. Tim Donovan says:

    This tutorial will come in handy for my school project, hope i can recreate swirls like this easily

  5. I will take your idea and turn it into a fantastic wallpaper. lets see how my skills are going to overcome this task.

Leave a Reply

This site is protected by Comment SPAM Wiper.