Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for professional graphic designers and non-designers trying to do their own graphic design. It's 100% free, no registration required.

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?

share|improve this question
    
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 Jun 4 '12 at 19:14
add comment

3 Answers

up vote 8 down vote accepted

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.

share|improve this answer
    
does the angle setting matter? –  horatio Jun 5 '12 at 19:00
4  
When the distance is 0, the angle doesn't matter. –  Marc Edwards Jun 6 '12 at 1:24
    
Pretty clever workaround to using Strokes! This is working really well, never thought about using contours! –  bigp Nov 28 '12 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 Feb 25 '13 at 14:31
add comment

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:

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.

share|improve this answer
add comment

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.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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