Bjango home
Articles
Help
Contact
iStat Menus
iStat for iOS
Consume for iOS
Skala
Skala Preview
iStat Server
for Mac
See all apps

Strokes in Photoshop CS6

There’s two ways to apply strokes to shape layers in Photoshop CS6 — via layer styles, which have been around since version 6 (that’s the ancient version 6.0, not CS6), or via the all-new vector shape options. They may appear similar at first glance, but there’s some significant differences.

Better quality

When using really large stroke sizes, layer style strokes often end up with stepped curves. This isn’t the case for vector strokes, which are perfectly formed. I assume this is because vector strokes are created from the original vector shape data, whereas layer style strokes are built from the bitmap mask for the shape. Wildly different techniques, when you think about it.

Does this matter for smaller strokes sizes? Maybe not. The difference is subtle.

However, vector strokes can be non-integer sizes, so you can use a 0.5 pixel stroke in a non-Retina document and it’ll scale up to precisely 1 pixel for Retina sizes. Layer style strokes have to be integer sizes, so scaling a document can cause rounding errors.

Better mask feathering behaviour

When a shape is blurred using mask feathering, vector strokes are also blurred. Layer style strokes are not. That may be a positive or negative, depending what you’re trying to achieve.

Better corners

Due to their construction, layer style strokes are always rounded. Vector strokes can be square, rounded or beveled. I can’t see myself using the beveled kind very often, but square corners are definitely useful.

Bigger

Layer style strokes max out at 250 pixels. Vector strokes can be slightly larger, with a maximum size of 288 pixels. You can even cheat to achieve larger vector strokes by applying a stroke then scaling the document up (tested to 1600px before giving up).

Open path behaviour

As well as various path cap options, vector strokes also respect open paths. Layer style strokes do not.

Dashing

Vector strokes can be dashed. Dashed vector strokes can be used in combination with mask feathering. And they can also be filled with gradients. And the gradients can include transparent or semi-transparent colours. Things get pretty crazy. Dr Seuss would be proud.

Look, sir. Look, sir. Mr Nack, sir.
Let’s do tricks with strokes and dots, sir.
Let’s do tricks with masks and caps, sir.

Shape Burst

And, just when you thought you were going to use vector strokes for absolutely everything, layer style strokes prove they’re no slouch — say hello to the rather well hidden shape burst gradient style. Shape burst is only available as a layer style stroke gradient.

Shape burst gradients follow the path’s shape, creating effects that would be difficult otherwise.

Stroke opacity

A small update after some discussion with Matt Kelsh and Edward Sanchez: Vector strokes dont’t have separate opacity control. This means you can’t set a stroke to be more transparent than a fill, unless you use a gradient fill for the stroke and set the two ends of the gradient as the same colour with the desired opacity. Possible, but a bit messy.

Another minor win for layer style strokes.

Other articles

My app design workflow
Gradient maps
Strokes in Photoshop CS6
Just like print design
Layer tags
Using algebra to create paths
Sub-pixel text rendering
Photoshop Actions & Workflows
Scale Patterns to 100% script
Text in Photoshop CS6
Masking in Photoshop CS6
Illustrator and app design
Vector shapes in Photoshop CS6
Photoshop CS6 improvements
Pixels per inch is just a tag
PNG compression and iOS apps
Everything is a grid
Smart Objects
Exporting from Photoshop
Iterate Podcast
Pixel perfect rotation
Pixel perfect vector pasting
Pixel perfect vector nudging
What if iChat was one window?
Gradients
Designing for Retina display
Designing for Retina display, part two
A new Drobo Dashboard icon
Noise and textures
Photoshop CS6 wish list
What to do with all those extra pixels?
Photoshop roundrect roundup
Colour management and UI design
How many layers are in my PSD?
Dissecting iTunes and App Store links

About the author

Marc Edwards is the Director & Lead Designer at Bjango. Follow @marcedwards on Twitter and @marc on App.net.

  • Bjango on Twitter
  • Bjango on Dribbble
  • Bjango on GitHub
  • Bjango on App.net
  • RSS Feeds
  • Marc on App.net

©2013 Bjango Pty Ltd. All rights reserved. ABN 88 062 334 580.
Apple, the Apple logo, iPad, iPhone, and iPod touch are trademarks of Apple Inc., registered in the U.S. and other countries. App Store is a service mark of Apple Inc.
That's a wave of destruction that's easy on the eyes!