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:

enter image description here (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?

  • Do you have access to fireworks? It's a better tool for this type of work. Barring that, for this resolution of work, I'd not bother with strokes at all and just use the pencil tool to draw it.
    – DA01
    Commented Jun 4, 2012 at 19:14
  • Use the pencil tool. @DA01 Adobe killed Fireworks, sadly.
    – Billy Kerr
    Commented May 23, 2018 at 7:35
  • @BillyKerr yes, it seems software advice doesn't age well. :)
    – DA01
    Commented May 23, 2018 at 16:24

3 Answers 3


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

Sharp Stroke in Photoshop

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.

Custom contour curve

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

  • does the angle setting matter?
    – horatio
    Commented Jun 5, 2012 at 19:00
  • 4
    When the distance is 0, the angle doesn't matter. Commented Jun 6, 2012 at 1:24
  • Pretty clever workaround to using Strokes! This is working really well, never thought about using contours! Commented Nov 28, 2012 at 15:40
  • Word..... I would have never thought to use drop shadows. This worked perfectly for me as well for the same application.
    – Nungster
    Commented Feb 25, 2013 at 14:31

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


Layers Sprite

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.


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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.