Pixel Perfect Shapes in Photoshop

It’s been a while but this is something that has been annoying me for a while and I finally found a work around for it.

The Preface

At the moment I’m creating two icon fonts for my day job, one for web and Android and one for iOS. You may be wondering, two? Why two? You’re crazy, an idiot even. But in my own insane little world it makes sense to me. My reasoning is this, web (as of writing) is still largely desktop/1x driven for my company’s target market (rural Australia) therefore, a 2px line icon makes more sense, easier to read, etc. Also, 2px line icons look at home alongside Google’s Material Design. iOS on the other hand, looks a lot nicer with 1px line icons.

The Problem

With all these different vectors flying everywhere, something was bound to go wrong. I’m currently using Illustrator to do all my icons and then pasting them into Photoshop for all rendering purposes (mockups, SVGs, etc). In doing so, some icons weren’t getting accurately pasted into Photoshop to where I wanted them.

“But doesn’t that mean you’re just shit and can’t design to a grid?”

Not necessarily. For about 95% of my icons that I have designed so far, I have been able to copy and paste no problem into Photoshop. For shapes like equilateral triangles that have non-integer values for width or height, is when it gets tricky.

Equilateral triangle made in Illustrator CC

Same equilateral triangle with pixel preview on

Same two triangles, left triangle is snapping the top node to the pixel grid and the right triangle is snapping the left-most node to the pixel grid

Photoshop’s behaviour when pasting in a shape layer is to place the shape layer in the dead center of the canvas and try to snap the shape to what it feels will be the best fit. If there is a selection using the marquee tool it will paste it into the center of that selection.

“Problem solved, right?”

Not quite. Here’s what happens.

Left: Pasted in, no selection. Right pasted in with a 9px x 8px selection

Same exact thing.

The Solution

Going back to Illustrator, create an ellipse or rectangle around your weird shape, remove the fill, add a 1px inner stroke (size actually doesn’t matter unless it overlaps your weird shape), then expand the path into a compound shape like this.

Make sure not to overlap the original weird shape you were dealing with.

Now, copy and paste this into Photoshop and you’ll get this.

Almost done!

Hooray! You’re perfectly centred equilateral triangle is now in Photoshop.

“But wait what about the circle? Doesn’t that ruin the whole thing?”

Why yes, yes it does. Now we just delete it using the Direct Selection tool or ‘A’ for those keyboard shortcut enthusiasts.

Now we’re done.

There we go now we’re all done and I can finally sleep at night knowing my equilateral triangles and other weirdly shaped icons will fit the way I want it to within the pixel grid.

Hope you enjoyed this little tutorial. If you think this is stupid or if you have a faster way of doing this, please let me know.

Like what you see? Get in touch!
Kieran Black
D&K