Saturday, November 11, 2017

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


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?




Answer



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.


No comments:

Post a Comment

technique - How credible is wikipedia?

I understand that this question relates more to wikipedia than it does writing but... If I was going to use wikipedia for a source for a res...