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.
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.
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.
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.
Same exact thing.
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.
Now, copy and paste this into Photoshop and you’ll get this.
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.
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.