Vector shapes in Photoshop CS6

Photoshop CS6 introduced many great changes for web and app designers. As part of the upgrade, the vector tools have been significantly revamped.

If you’re an experienced Photoshop user, there’s a good chance some of your old tricks and workflows have broken. Don’t worry, there’s also a good chance what you’re after is still possible, and possibly better in Photoshop CS6.

Pixel snapping #

For me, the biggest change in CS6 is pixel snapping being moved from the individual vector tools to a global setting, with the catchy title of Snap Vector Tools and Transforms to Pixel Grid. It’s hidden under the general tab in preferences, but is actionable, so you can enable and disable it with a keyboard shortcut.

With pixel snapping off, Photoshop’s nudging behaviour is similar to how it was previously — nudging is connected to the zoom level. If you’re zoomed to 100%, then nudging will move one pixel. If you’re zoomed to 200%, nudging will move 0.5px. Keep zooming in and the increments get smaller:

100% — 1px.
200% — 0.5px or half a pixel.
300% — 0.33px or a third of a pixel.
400% — 0.25px or a quarter of a pixel.
500% — 0.2px or one fifth of a pixel.
600% — 0.1667px or one sixth of a pixel.

…and so on, all the way up to 3200%, which nudges 0.03125px.

With pixel snapping turned on, nudging always moves one pixel. And by one pixel, I’m talking about one pixel, relative to the current position. A point that’s located at 50.5px will move it to 51.5px if nudged while pixel snapping is enabled.

If you have more than one point selected, dragging to move points is also relative, as is dragging with the move tool. However, if you drag a single point, it will snap to the pixel grid.

I like this behaviour, but it’s worth knowing how it all works in case you find yourself needing to nudge by a precise amount — you may want to create a rectangle that’s exactly 3px wide when viewed on a Retina device, but your document may be set up as non-Retina and half the size. This is easy. Draw a 1px wide rectangle, disable pixel snapping, zoom to 200% and nudge one side of the rectangle (two anchor points) exactly once. It will then be precisely 1.5px wide, which will become 3px wide when you scale the document up to Retina size.

When at 66.7% zoom with snapping turned on, nudging seems to move 0.5px rather than 1px. This appears to be a bug, and not as intended.

Align Edges #

Align Edges, found in the options bar, ensures the edges of the layer are aligned to the pixel grid. The non-edge contents of the layer are scaled without snapping to the pixel grid (this is important to note). In some cases, sloppily drawn vectors can be fixed simply by turning on this single per-layer option.

If you’re a little bit clever, you can use Align Edges to position items on a 0.5px boundary and have them appear pixel snapped for non-Retina and Retina sizes, without changing your document after you scale. I haven’t come across many situations where I’ve wanted to do this, but it is possible.

Shapes as layers #

Another big change for CS6 is vector layers appearing in the layers panel as vector shapes, rather than solid colour layers (or gradient layers or pattern layers) with a vector mask. This is has changed how the layers panel appears, but functionality is mostly the same as CS5.

To copy and replace a vector mask from one layer to another In CS5, hold down option and drag the mask from one layer to another. The same works in CS6, but the shortcut is now command-option (using option by itself will dupe the layer). Just make sure you press command-option before clicking and dragging, because it doesn’t work otherwise.

CS6 also adds the ability to remove the confirmation when replacing shape paths, speeding up the process.

This method can be used to apply a vector mask to a group. Or, you can copy and paste a vector path, then use Layer → Vector Mask → Current Path to apply the path as a mask. Removing the mask is a little more difficult. The fastest method I know is to select the layer, copy the layer styles (if any exist), create a new layer of the same type, then paste the layer styles. A Layer → Vector Mask → Delete menu option does exist, but in my experience, it’s always disabled.

Selections #

Points that are selected on vector layers are remembered while the document is open. This means you won’t lose your carefully chosen selection if you venture off to edit another layer and come back. This is both good and bad. Using Shape Layer via Copy (command-J) duplicates the selected points to a new layer, potentially removing points you’d prefer were kept. There is no deselect menu item for vector paths, but clicking within the path area does the same job. So, before you hit command-J, click on your object with the Path Selection or Direct Selection tool — both deselect all vector points.

Editing without distraction #

Command-shift-H hides the Target Path, making it far easier to edit effects like inner shadow, that are near the edge of a vector shape. Hiding the Target Path works almost all of the time, even when the Color Picker or Gradient Fill window is open (but surprisingly, not when the Gradient Editor window is open).

Making a vector layer visible or clicking on the canvas with the Path Selection or Direct Selection tool will bring back the path outline, as will hitting Command-shift-H a second time. Being able to hide the path outline was possible in Photoshop CS5, but it’s so handy it deserves to be mentioned again here.

Other tips #

Pressing option-delete will immediately fill a vector shape with the foreground colour, which has the added benefit of converting a gradient layer or pattern layer to a solid colour layer. If you’d like to quickly change the fill to black, you can press “d”, then option-delete. If you’d like to quickly change the fill to white, you can press “d”, then “x”,then option-delete. CS5 did do this, but it’s a good thing to know.

The boolean path options have moved in CS6, but they still work the same way. Note that the sort order of paths within the layer matters — you can reorder things from the icon to the right (the icons are: boolean, distribute, order).

When using the vector tools to draw a shape, you can hold shift (then click and start drawing) to add the shape to the current layer. The same works with option to subtract and shift-option to intersect.

Feel free to ask me questions via Twitter (@marcedwards) about this article.

Published 29 March 2012.