Photoshop tutorial: How to use Photoshop CC’s new shapes tools

Produce colourful, rounded graphics with Photoshop CC.


Not all of Photoshop CC’s new features are for photo retouching. Knowing the application is popular with some web designers for creating mockups and page elements, Adobe has added options that make producing graphics easier. These include new capabilities with rounded corners, paths and new fill options.

See also: 86 Best Photoshop tutorials

(If photo-retouching is your bag, check out my tutorial on Photoshop CC's new photography tools).

STEP 1

Open a new document in Photoshop. Select the Rectangle Tool (U) and draw a shape. This will create a new path in the Layers panel.

See also: 86 Best Photoshop tutorials


STEP 2

In the Properties panel there’s a selection of new features, including options to edit your shape.

See also: 86 Best Photoshop tutorials

Type in one of the corner boxes (or click and drag) to change the roundness of one or two corners to create more unusual shapes.

Advertisement. Article continues below

STEP 3

If you need all your corners to be even, make sure the Link Measurements icon is active in the middle of the properties panel and then type in one of the corner boxes (or, again, click and drag) to modify the roundness of your shape.

See also: 86 Best Photoshop tutorials

This will automatically change all the corners of your shape simultaneously.


STEP 4

There’s also the option to edit multiple shapes at once, for example, using shapes as paths.

See also: 86 Best Photoshop tutorials


STEP 5

Unlike previous versions of Photoshop, CC allows you to go back and change the colour of your shapes. Taking inspiration from Illustrator, they can be filled with a solid colour, gradient or even a pattern. Shapes can also have a different colour fill and outline colour if required.

See also: 86 Best Photoshop tutorials

Photoshop CC’s Layers panel now also allows for filtering of shape layers, which is handy for locating specific layers in a big Photoshop file.

Advertisement. Article continues below