Your deepest fears have come true:
you can’t live without them and you’ve been using them wrong. At least up until now.
Unfortunately, I’m not talking about women although the above statement could actually be something that Sex and the City’s Carrie Bradshaw might have written. I’m talking about “Strokes” or simply put “Borders”.
If you’re designing websites using Photoshop, and I heard there’s not that many of you out there, you might frequently use something called boxes or blocks of content. Most of the time, you need borders on those boxes so the stroke layer style comes into play. Although, at first glance, this is a trivial feature, God lies in details.
Strokes used on a large scale can become a hungry monster that will eat many time and many clicks if you don’t approach them correctly.
Below you will find a few must know tricks that will make your pixel pushing much easier.
Tutorial level: a drunken monkey could get it.
If you’re a pro, just scroll below.
How do you add a stroke?
If not,
- draw something on a new layer,
- look at the bottom of the Layer palette and push that black round button with an “f” inside (Layer styles).
- Select “Stroke…”
- In the dialog that appears select the desired size and color.
- Hit ‘OK’.
Understanding the way strokes are applied in Photoshop
A stroke is basically formed by pixels running along the edge of a layer.
Naturally, there are several ways to place these pixels.
You can place them on the outside thus making the layer bigger. Or you can place these pixels on the inside, thus keeping the overall size. Or alternatively you can center the stroke, half of it will grow on the outside, while the other half will “eat” the layer.
Here is a screenshot with the 3 methods side by side.
These are 3 identical 100 x 100px squares. Each has a stroke of 10px applied differently.
While the image above is pretty self explanatory I would like you to notice that the Outside stroke tends to become roundish. The bigger the stroke, the bigger the corner radius will get. Its pretty easy to imagine why if you picture the corner as being the center of a circle which has the radius equal with the stroke size. But this doesn’t work the same way for the Inside stroke which maintains the shape of the object, no matter the size of the stroke.
I stated above that a stroke is basically formed by pixels running along the edge of a layer. Well, what happens if the edge of the layer is not quite solid? As in, it has transparent pixels in it. I modified the example above so that the squares have a gradient from full color to transparent and left the strokes untouched.
Take a look!
WTF you might say. The result is pretty ugly, the stroke bleeds heavily into the layer defeating the whole purpose of a proper border. No thanks, we don’t need that. We’ll just draw the simple conclusion, that on a large scale, strokes don’t go together well with transparency. They work on a round corner, which has only a few transparent pixels but if you see any unusual results when you apply the stroke, just remember, those pixels are not 100% opaque.
Strokes restrictions
The Stroke is a layer style, thus it can be edited any time.
But this creates some natural restrictions.
Although visually the stroke is there, you cannot toy with it using normal tools.
- You can’t select a stroke with the magic wand, that will select the original layer, completely ignoring the stroke.
- You can’t delete or add to a stroke, you’d rather have to look at things the other way around: add or delete to/from the layer.
- Strokes do not align to guides. Again, is the layer’s true content that aligns.
Those being said, the right thing to do is find a way these restrictions work for you and not against you.
Real life implications and why strokes should be on the inside
Picture this: you are working on a layout for a portal that has side columns: stroked boxes with content. You will most probably be using guides to measure accurately the width of the columns. And you would like to snap the boxes to the guides. If you’re using Outside strokes, this is what you’ll get:
Furthermore, lets suppose that well into the project, you need to adjust the width of that column with just a couple of pixels. This is what you will be facing:
Now imagine making this mistake for more than 15 boxes, both on the left and on the right of the layout. You have guides, so a marquee selection will always snap to the guides. You will have to alternatively turn on and off snapping or guides while remembering to counter your instinct of visually selecting the strokes. I don’t know about you, but I’m tired of even thinking about that. I’m already tired of writing the above phrase, so I’ll just conclude…
Advantages of Inside strokes
- A layer with an Inside stroke may be visually aligned to a guide. It will appear as the stroke snaps to the guide.
- You can visually select the stroke and cut from the actual layer.
- Its perfect for multiple boxes layouts with lots of borders.
Question: So when is the outside stroke actually usable?
Answer: Check the screenshot below.
