Optimizing Strokes Part2
In the first article of this series I described how to optimize strokes in Adobe Illustrator. This time we will focus on how to create smooth strokes using Photoshop’s layer styles.
When creating icons or arbitrary artwork in Photoshop it’s definitely adviseable to make use of Photoshop’s layer style functionality. Not just because of the fact that you can easily create multiple differently colored instances of the shape - but also because you can easily apply smooth strokes to your elements. The most obvious method is to use the “Stroke” effect to achieve… well strokes. In most cases that’s the way to go. However if you wanna apply a subtle stroke to a round object you get much smoother results when using a tight outer glow instead. See for yourself. Subtle but noticeable :)
By the way you may use the following settings as a starting point - I normally create an outer glow with 1px in size and a range of 30 to 40%. However feel free to play around with different settings to suite your graphic.
16 comments so far
Skip to comment form
Joshua November 29, 2006 at 07:44 AM
Amazing tip, I don’t know how you would have ever discovered that, but amazing nonetheless. Thanks!
Heiko November 29, 2006 at 08:19 AM
Nice tip, thx
Amit Karmakar November 29, 2006 at 08:50 AM
Very subtle and nice. I like it. Thanks W!
Jamie Hill November 29, 2006 at 09:37 AM
Great tip, thanks.
Gil November 29, 2006 at 09:49 AM
Thanks, i didn’t know this trick. It’s true that strokes in photoshop do sucks.
Alexander Hahn November 29, 2006 at 12:01 PM
Lovely, i figured this out some time ago. nice to see other people using this technique too!
Kuswanto November 29, 2006 at 02:02 PM
At last some other people using this sexy method :)
I had been using it for a long time.
Caution though, if you want to save the file as GIF image, you may want to turn-off the glow.
Keri Henare November 29, 2006 at 02:11 PM
Funny thing is that (from my sometimes faulty memory), Stroke was only added to Photoshop in v6.0, prior to which you had to use Outter Glow instead anyway.
Nick November 29, 2006 at 02:52 PM
Great tip!
Morishani November 29, 2006 at 03:39 PM
Great tip, thanks :)
Martin Labuschin November 29, 2006 at 08:24 PM
In most cases drop shadows are the better choice. But… it’s almost the same, isn’t it?
Max Weir November 30, 2006 at 03:52 AM
Great tip, its very subtle but for those of us who expect the best results this is just great. I will definitely be using this from now on.
Philipe November 30, 2006 at 07:05 AM
I use this always use this method in Fireworks 8. But if you want to make a gradient border—say brighter on top—than you have to use a circle underneath the icon.
Jon November 30, 2006 at 08:21 PM
Cool! Thats a nice little tip.
lewro December 01, 2006 at 08:36 AM
I was just about to ask you how do you create these perfect icons. I think they are one of the best in the whole industry. Thanks a lot for sharing this very usefull ideas.
Timo Kleemann December 11, 2006 at 02:30 AM
Great work! Will keep this in mind. Cheers!