Web design, when viewed as a method of delivering content to the user, is planned and executed with a special level of responsibility and importance. However, the process itself is simplified by the use of grids, columns, and various geometric shapes in layouts. Squares, rectangles, trapezoids, rhombuses, hexagons, triangles, circles — these are the most common elements used in design across a wide range of styles. You can see them in navigation, visual accents, frame and block decorations, and section layouts. Moreover, geometric shapes can be combined with one another to create a unique visual collage effect. Sharp, straight, and angular lines and figures are often associated with cutting-edge technology — even if the actual content is about... kittens, for example.

At the end of summer, we briefly discussed polygons in web design, explored some interesting work by web designers, and noted a few of their unique traits. Today, we won't go into the details of geometric web design again, but we'll focus on the moment when geometric shapes can create a stunning visual collage effect. Since creating such beauty takes a bit of meticulous work, we'll divide this large topic into two parts, describing each approach thoroughly and step by step. In other words: we will dedicate two articles to working with geometric shapes in Photoshop.

Overall, geometric shapes in web design can be used in various ways. As a background texture, as navigation elements — and quite often in 3600 designs or augmented reality projects. Geometric elements are a great option for portfolios, galleries, and homepages. For clarity and inspiration, let’s take a look at some particularly striking website examples, which will serve as a foundation for our creative work in Photoshop. We’re referring to bigbang, paseoitaigara, webey, mrsaghafi, jtcdesign, paseodegracia.

Geometry, Symmetry, Abstraction in Photoshop

But what if we get creative and turn a photo into an abstract collage made of geometric shapes? We'll create our own shape, cut the image along its lines, and build a new composition. Then we’ll do a bit of color correction and apply some effects. Does it ring a bell? Perhaps some of you will remember vintage retro collages made from photos, newspapers, and drawings, where geometric shapes were cut out and arranged into completely new symmetrical compositions.

Difficult? Not really. Some professionals use Illustrator alongside Photoshop, but we’ll do everything using just Photoshop.

To begin, let’s draw an “Ellipse” shape in a new document, sized 500x500 px. You can either create a canvas of the same size and later expand it to 700x700 px, or simply start with a larger canvas and adjust the shape dimensions afterward in the Properties panel. There are many ways to do this — go with what’s convenient for you.

In our case, we created a 500x500 px document and added center guides (Menu View → New Guide and then moved them to the center).

Select the “Ellipse” tool from the toolbar, turn off the fill color, and leave only a 2px stroke (we like it that way). Draw a circle and, if needed, adjust its width and height to 500 px in the Properties panel. Then go to Image → Canvas Size and increase the canvas to 700x700 px.

We'll draw each geometric shape in a different color. This will help with alignment and keep the circles and corners visually distinct — otherwise, everything in black would blend together.

Next, draw a smaller circle, 250x250 px — half the size of the large one — and center it inside the big circle. Since we’re creating a symmetrical abstraction, symmetry will need to be maintained using the guides.

While holding Alt, use the Move Tool to create three more copies of the small circle (this way new layers will be created automatically) and place them at the bottom, left, and right — forming a cross. These small circles should intersect slightly and only touch the large one at the edge. Place one more small circle in the center. Here’s the result.

Since we're working with geometric shapes, circles alone aren’t enough. Let’s add a triangle that fits inside the large circle. Select the Polygon Tool, set 3 sides and 250 px size. Draw the triangle, then use Transform (Ctrl+T) to resize it if needed, aligning the bottom edge with the central three small circles.

Then copy the triangle and flip it vertically. Here's the result.

This is our shape.

Not complicated, but visually appealing. Group all the shape layers and duplicate the group. This way, you’ll be able to edit the shape later. If we were using Illustrator, we could keep and edit the vector shape there. In this case, we’ll preserve it in the layers and continue working with the copy.

Select the copy group and merge all layers — now we have a single shape. The background is white, but if you turn it off, the shape becomes transparent and ready for further manipulation.

Open your image in a new document, copy the abstract shape layer, and scale it if needed using Transform (Ctrl+T). It’s easier to create a shape using fixed dimensions and then resize it. Invert the shape’s color (Ctrl+I) or go to Image → Adjustments → Invert.

Now:

And so, we replace each shape piece one by one. At first, it might look like, frankly, a total mess. But... by the time you reach the 20th layer, you’ll notice the entire composition start to transform.

Important: make sure each shape piece is precisely placed within the figure. Use the arrow keys while the Move Tool is active to fine-tune the positioning. If unwanted gaps remain, activate Transform (Ctrl+T) and adjust the piece manually. Then group all the pieces.

And here’s what we get in the end.

But the figure is still colored, even though we inverted it. Yes, black turned white, but the color areas remain. You could fill the white manually (with the Paint Bucket Tool), but that would result in thick, rough-looking outlines. Instead, select the shape layer and go to Image → Adjustments → Hue/Saturation, then reduce Brightness to zero. Now the outlines appear clean and modern.

You can also give them a bluish tint — only the colored outlines will be tinted. However, the inner white circles (which were black earlier) won’t be affected by the Hue setting. We’ll apply the color another way.

So in the “ Hue/Saturation” window, set brightness to zero and then switch the shape layer’s Blending Mode. Here you can apply a color and also experiment with Outer Glow to create a soft haze.

You could also add a subtle shadow effect to the original, simulating a frame with lenses casting shadows from above — as if the drawing inside is slightly distorted.

We’ll keep the clean white version of the shape for further editing.

Web design lately has distanced itself from collages in general, but our randomly and chaotically placed pieces that form a symmetrical geometric shape still preserve visual balance and unity. So, when used on a homepage — under a logo or title, as a background, or overlaid with reduced brightness and saturation — this effect doesn't appear outdated or distasteful.

Now let’s add a bit of retro flair to our collage. We’ve chosen a dust texture on a black background and added it to the document. Since the texture is black, use the “Screen” blending mode to make the black invisible and lighten the texture. The image will gain a weathered look and lose some of its harsh precision.

Now let’s add a “Curves” adjustment layer above all other layers (click the icon at the bottom of the Layers panel). Adjust the curves for Red, Green, and Blue individually to give the image a retro feel — like it was developed on old film. You can also cool it down by adding a Photo Filter — “Deep Blue” with medium density.

The final result of our work is nothing less than an abstract art piece made of image fragments that were cut and assembled into a collage. The geometric lines create structure, while the textures and color grading give the work a vintage finish. And the geometric patterns can be as diverse as the images you start with.

Below, for example, we’ve disabled the figure outlines, giving the entire composition a sense of airiness and floating. This evokes a feeling that the artwork reflects the beauty of a futuristic city, with skyscrapers reaching far above the clouds, breaking and refracting the scenery into symmetrical fragments.

It’s important to remember that the key to this kind of effect is contrast. Placing light cloud fragments at the top of the figure is a bad idea — the shape would blend with the background. Even white outlines wouldn’t fix the clarity issue. So when choosing an image, always consider the overall contrast of the composition and imagine whether a geometric overlay will suit the picture artistically.

Conclusion

Geometric shapes are used far beyond web design. Why? Because simple forms are capable of expressing movement and rhythm — and humans perceive geometry as something progressive. Try stepping away from your screen and looking at the collage from a distance. You might see something entirely different, maybe even imagine it starting to rotate or break apart.

Now imagine animating that effect in Photoshop, or perhaps using parallax to move the shape and background independently (we kept the background intact). The creative possibilities are endless.

Every year, geometric layouts become more popular. In 2011, diagonals were trendy; in 2013 — METRO style with squares and rectangles; in 2016–2017 — parallax gave rise to a craze for triangles and hexagons. Once they appeared, designers started using them everywhere. So by creating an abstract collage, you can surprise both users and clients with originality and tech-inspired aesthetics.