Pixel Perfect Shapes in Photoshop

Kieran Black
Jan 2, 2015 · 3 min read

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

“Problem solved, right?”

Not quite. Here’s what happens.

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

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.
Almost done!

“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.

Like what you see? Get in touch!
Kieran Black

D&K

    Kieran Black

    Written by

    Product Designer, Australia

    Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
    Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
    Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade