Cool Web Design Effects Tutorials

Organic Vortex Effect

By Andrew Harwood

This effect focuses on the use of filters and image adjustments in PhotoShop. It creates a fantastic, organic-looking vortex that can make a great background, wallpaper, or the basis for other effects.

Step 1 – Organic Shapes

Start with a new document that has a white background, and is around 640 x 480 pixels in size. On the background layer, with a brush of around 17 pixels, draw some lines like those shown below.

Step 2 – A Radial Blur

Select Filter > Blur > Radial Blur and use it with the following specifications:

• Amount 100%
• Type - Zoom
• Quality - Best.

Step 3 – Repeat!

Now, apply Filter > Stlize > Find Edges, then repeat Step 2. You'll see something like this:

Step 4 – X Marks the Spot

Now, select Image > Adjustments > Invert and draw a white star or an "X" in the middle of the image like so:

Step 5- Balance that Colour

Now, repeat Step 2, then Step 3, and finally Step 2 again. When you've finished all that, go to Image > Adjustments > Color Balance and play around with the tool until you find a colour you like. This is what I decided to use:

Step 6 – The Swirl

Now apply Filter > Distort > Twirl and set it to about 90 degrees.

It's done!

This technique can be used for anything from walls to headers for websites. Try experimenting with each stage, and your final outcome, to see different variations on this effect you can create. Here's an example:

To create variation, I incorporated some pixel stretching -- another great technique that I expanded upon here

Andrew is a Web graphics and branding specialist based in the UK. He's also a mentor in the SitePoint Forums who loves Queen. Visit his online portfolio at frozentoast.com.