Web design has undoubtedly come a long way from the early limitations of HTML and browsers. Today, thanks to HTML5, CSS3, lightning-fast internet speeds, and the capabilities of modern browsers, web designers can build a truly solid and powerful foundation for a brand's online presence. Web design has evolved from a purely technical discipline into a true craft. Animations, highly artistic images, and illustrations blend with geometric shapes and lines to create entirely new combinations and compositions that can convey meaning.

Whether a web designer uses video or photographs to design the background of a page, they always face the choice between realism and abstraction. Through simple shapes, striking colors, and flowing, airy lines, abstract illustrations have become one of the hottest trends in web design. A trend that has been used for years and always gives a project a unique character. Inspired by many artistic and design movements, this aesthetic direction helps capture attention, express emotion, and invite users to interact with elements, navigation, and content.

In this tutorial, we’ll explore how to create an abstraction effect from a simple photo using Photoshop. If before we already explored this effect by looking at the Polyscape effect (a geometric abstraction), now we’ll see how to create a more "organic" shape — fluid, yet meaningful to the overall composition.

Twirl Art Abstraction

An artist can not only "break" an image into geometric shapes but also “twist it around a center.” And while the concept of a swirl is pretty intuitive, combining different types of this effect can result in fascinating new compositions. These will stand out not just due to their appearance, but through color, brightness, and thematic relevance.

Let’s start by looking at some projects that use smooth and fluid abstract backgrounds, including variations of the twirl effect. These include lesanimals, bacter, lonsdale, kikk, strv, and others.

In general, creating this effect is not difficult, but in web design it’s rarely used because a simple "twist" and distortion of the original photo usually isn’t enough. If all you need is an abstract background, sure — just mute the colors. But if you want to create an impressive site “cover”, and add animation, you’ll need to get creative.

So, let’s get started…

Twirl Art with Photoshop

We'll start with a basic photo — daisies in the grass. This gives us a color base: white, yellow, and shades of green. If you need other colors, choose a photo with the palette you want, since changing it later is more complex.

Open the photo in Photoshop CC or CS6 — doesn’t matter.

Important: for this effect, we’ll be using Smart Filters. A lot of them — and we’ll be experimenting. So the effect and image resolution may be too demanding for your PC. To make it easier, reduce the image size. You can upscale the final effect later and overlay it onto the original — we’ll explain how.

First, duplicate the image via Image → Duplicate and name it Twirl. Resize it if needed — ours is 840x525 px.

Before we apply Smart Filters, convert the image into a Smart Object. Right-click the layer and select Convert to Smart Object. Rename it Photo.

The first filter we’ll apply is Filter → Pixelate → Mezzotint. This adds random, high-contrast strokes, lines, or dots depending on the setting. There's no "correct" setting — we’ll pick Long Strokes for now and adjust it later.

Now apply Radial Blur from Filter → Blur. Set the method to Zoom, quality to Best or Draft. Lower quality renders faster.

Important: if your PC is powerful, go for high quality right away. If not, apply the filter 2–3 times with the same settings — this removes noise while keeping good quality. You can stack multiple high-quality blurs for unique effects.

Now let’s get artistic and go to Filter → Distort → Twirl. Move the slider left or right to swirl clockwise or counterclockwise. We used 130 degrees clockwise.

Let’s now return to editing Smart Filters. We’ll adjust Mezzotint. Double-click it in the Layers panel and agree to the warning (Photoshop applies filters in sequence).

In the dialog, choose Dots instead of strokes — this gives a less intense, lower-saturation result. You can experiment, but we’re sticking with this one.

Duplicate the layer (Ctrl+J). This duplicates the Smart Filters too.

For the new layer, select the Twirl filter and reverse the value to -130 degrees. You can use other values — we’re keeping it simple.

The top layer completely covers the bottom one. To blend them, use Blending Modes. Try Darken, Lighten, or Pin Light.

Here’s how they look:

We’ll go with Lighten.

You can still experiment with filter settings. Just double-click Twirl or Mezzotint to reopen the dialog. For example, we changed Mezzotint to Coarse Dots for the duplicated layer.

Disable Radial Blur to get more sharpness and a different vibe — like a double exposure.

Or change the Radial Blur type from Zoom to Spin.

We applied Radial Blur twice more to both layers using Best quality. Just drag the filter in the Layers panel to reapply or reorder.

Scaling the Effect to the Original

The twirl flower is done — but it's small. Let's apply it to the original high-res image (1680px wide).

Go to the original tab, select Select → All, then Edit → Copy or Ctrl+C.

Go to the Twirl tab, double-click any Smart Object layer — it opens a new PSB tab. Now paste (Ctrl+V) the original image.

The pasted image may be cropped — go to Image → Reveal All to view it fully. The canvas will resize.

Click File → Save and close this PSB tab.

Now back in the Twirl document, you’ll see the twirl effect was cut off. Go again to Image → Reveal All. It will update.

You could say this is the full Twirl effect. But you can rotate, warp, or stylize the layers for endless variation. Now let’s enhance it with symmetry.

Merge layers with Shift + Ctrl + Alt + E to create a new one. This isn’t a Smart Object — we won’t use Smart Filters now.

Go to Edit → Transform → Flip Horizontal.

Change blending mode to Darken. You can also rotate, tint, or gradient it.

So many variations — your imagination is the only limit.

Conclusion

The artistic Twirl or swirl effect practically erases the original photo but transforms it into something uniquely beautiful. You could just “twist” colors and lines, but by layering effects, you can create an entirely new scene. Yes, it’s abstract — and that’s not as easy to use in web design as traditional photos or graphics.

Still, as a subtle background, abstraction can turn a standard, rigid design into something creative, fresh, and engaging. It draws the eye — so don’t use it on every content page. But as a homepage cover or themed page (like “Contact” or “About”), it’s a great choice. Especially since you can always add tint or a duotone effect.

This isn’t about trends. It’s about style, beauty, and versatility. Bold colors may be “in,” but they don’t have to hurt your eyes. It’s about where and how you use them. Same with art effects — Photoshop has a vast gallery of filters. All you need to do is pick the right one.