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 (dotmick.com) 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 (marcorosella.com) 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.
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.
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
New Fill option
Vlog.it 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.