How can I achieve a sharp pixel perfect stroke effect in Photoshop?

Question

I'm working on retro-style pixel art for a video game. I would like to be able to add a border around a sprite, but I need it to be sharp and "pixel perfect". Using Photoshop's Stroke effect seems like the obvious choice, but unfortunately Photoshop does some fancy anti-aliasing and adds extra pixels where I don't want them:

(Image magnified to 400%)

The top image border was created using the Photoshop Stroke (size: 1px, position: Outside).

The bottom image border was manually drawn with the pencil tool.

The bottom effect is the one I'm after, but I'm trying to achieve it without having to manually draw it with the pencil tool. Is there a way to force the Stroke effect to behave this way? Or is there another method that I could use to automate this effect?

Answer 1

A really easy way to achieve a sharp stroke is with a drop shadow layer style (yep, you read that correctly).

The top Goomba is your example. The bottom Goomba is the same bitmap, but masked with the stroke added as a drop shadow layer style. The trick to getting it right is the custom contour curve.

The same can be done with the outer glow layer style. And, now you can apply this to any layer easily.

Answer 2

To do this you can follow this procedure:

1. Turn your layer into a smart object, this way you can make multiple copies of the layer that will automagically stay in sync with regards to contents
2. Make four copies of this smart object (not using the "New Smart Object via Copy" function, this will make separate smart objects, we want them to be instanced here)
3. Adjust the position of each of the four copies, by nudging them each one pixel in the four directions (ie. one up, one down, one left, and one right)
4. Group the four copies into a group in the layer palette
5. Add a blue (the stroke color) solid color layer, position it above the group
6. Alt-click the separator line between the group and the blue layer to turn the group into a clipping mask for the blue layer

Result:

You can download the Photoshop CS6 file here.

This technique can easily be adapted to also include pixels in all 8 directions by just repeating the above steps a second time (another 4 layers) and nudging them one pixel diagonally in the four diagonal directions.

Answer 3

Lasse's answer is good. Depending on your setup, though, a Posterize adjustment layer set to 2 might get you there in one step. It's definitely worth a try.

Layering your file, one color per layer, will definitely get you there using Posterize.