Official website for Web Designer - defining the internet through beautiful design
FOLLOW US ON:
Author: Steve Jenkins
16th December 2012

Recreate 2D circles shapes with Photoshop

Discover the art of creating 2D circular shapes with Photoshop

Recreate 2D circles shapes with Photoshop
inspiration www.dotmick.com

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.”

TECHNIQUE

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

Recreate 2D circles shapes with Photoshop
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

Recreate 2D circles shapes with Photoshop
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

Recreate 2D circles shapes with Photoshop
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.

TECHNIQUE

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

Recreate 2D circles shapes with Photoshop
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

Recreate 2D circles shapes with Photoshop
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

Recreate 2D circles shapes with Photoshop
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

Vlog.it

Recreate 2D circles shapes with Photoshop
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.

Tags:
  • Tell a Friend
  • Follow our Twitter to find out about all the latest web development, news, reviews, previews, interviews, features and a whole more.
    • http://www.aranzamendezdesign.com/ Arlene

      I like this tutorial because it’s new and challenging for me.. Thanks for this circular web design..

    • Pingback: Recreate Website Design In Photoshop