Recreate 2D circles shapes with Photoshop

Discover the art of creating 2D circular shapes with Photoshop



The circular trend has been spotted – no pun intended – in web design for some time. But recently designers have grasped this style by ‘the nettle’ pushing it to the forefront of style.

Rather than a backlash to Web 2.0 styles, some designers believe the new-found appeal of 2D circular shapes is simply relative to the drive of new technologies. Mickaël Larchevêque ( is one such designer, as he explains: “I must admit that the emergence of HTML5 has contributed to this change. This new start, with a new technology, gives us the need to simplify our current work. Layouts are getting minimised as shapes are too. We’re back to one of the most simplified shapes, the circle.”

Many designers will also use software such as Adobe Photoshop and Illustrator to quickly and easily generate assets. Such shapes can then be radicalised through variable uses, such as navigation links, footer icons – commonly logos, and most popularly as displays for portfolio images.

Using circular design for the latter is described as a “smooth and efficient way of getting the attention” by Larchevêque. He adds: “The UX in my website is much more driven about a shape concept (dotmick – dot), how I can play with it, and build it in a way where a user can have fun or can experience a nice journey throughout the content.”

Or perhaps ultimately, the enduring appeal of the circle is, as designer Marco Rosella ( eloquently puts it: “[The circle] has been chosen as the perfect element of discontinuity in a world dominated from things born by squares.”


Circular elements in Photoshop

Many designers will turn to Photoshop to create their circular elements. The most prominent use can be seen as portals in your webpages; be it as information buttons to new pages, or image thumbnails to access portfolio images.

Photoshop, pre-CS6, offers highly capable ways to create and style such assets. Of course, there are some better practices to maximise the ability to make further tweaks, which we explain here.

Smart Object

Most will use the Ellipse (Shape) tool, but constant resizing will pixelate. To stop this set to a large size, Ctrl+click your shape layer, selecting Smart Object. Now resizing down has no adverse effect.

Clipping Mask

You should attach images in the Smart Object interface (double-click layer) before decreasing size. Place your image over your shape, Cmd+click the shape thumbnail, applying a Layer Mask.

Layer Style

To style, apply from the Layer>Layer Style options to your masked image layer after resizing, hiding your shape layer. Add effects to your shape, or colour washes to your thumbnail image.


New Photoshop CS6 shape tools
The latest edition of Photoshop has improved the capabilities for resizing and styling web icons, especially the circular variety. Here we present some of the coolest automated options, all housed in a single layer.

New Vector shapes

Photoshop CS6 has now been modified with full vector support through its Shape tool. This means Smart Objects are no longer necessary to resize circular elements, but still a good idea when clipping imagery.

New Shape outlines

You can now apply even more outline styles directly from the CS6 Shape menu with the Stroke options. This includes dashed and dotted lines, and sizing and colour. Resize, and the line style is reset.

New Fill option

Want to add a gradient to your shape? No problem as the CS6 Shape tool now has a Fill setting that lets you add this directly to the shape. Now simply clip shapes with Color blending modes.

INSPIRATION is an intuitive interactive wheel that shares a collection of designer Marco Rosella’s favourite online videos. The design here clearly endorses the use of circular elements as crop thumbnails. This site is powered by SVG, which Rosella believes is great for “interactive circular graphic elements and for image cropping”. He also endorses CSS3, saying: “with simple instructions like border-radius: 50em; you can replace in one line hours of exporting of transparent PNGs.