Tutorial / Freebie: Use the Pixel Grid and Vector Pixel Snapping in Photoshop

Julianne Kost, Adobe Principal Evangelist Photoshop and Lightroom, is always full of great tips. On her blog today she posted this quick tip:

If you zoom into an image above 800%, a Pixel Grid is displayed on top of the image. This can be especially helpful when trying to align shapes such as  rectangles so that they begin and end on a full pixel (to avoid anti-aliased edges). However, to toggle this off, you can uncheck Pixel View under View > Show Pixel Grid).

I found this option to be super useful when I was working on the layout of our new website, which will be launching soon! One thing I kept running into, especially while working on tiny vector icons in Photoshop, is that Pixel Snapping, often a great friend, could sometimes cause problems.The problem is that you can’t move something to a half pixel when you have Pixel Snapping turned on so sometimes you can’t center something if the center is on a half pixel. The image below, clearly Doctor Caligari’s Cabinet, shows snapping to the pixel not a half pixel.

This feature was greatly improved in Photoshop CS6. To turn off this feature, open Photoshop Preferences. Under General, uncheck “Snap Vector Tools and Transforms to Pixel Grid”.

Now, you can move points to halfway or a quarter of the way between pixels.

Here’s another quick tutorial on Correcting Pixel Snapping, talking about moving vector objects in Photoshop.

The Freebies

Yes, I mentioned a freebie, didn’t I?! Marc Edwards from Bjango, a developer of Mobile apps and more, is providing a free set of Photoshop action to help with this. It’s for Photoshop CS6 and CC, and called Enable Pixel Snapping and Disable Pixel Snapping. This is not just 2 actions but the download contains tons of workflow Photoshop Actions, including Copy Entire Canvas, Set Global Light to 90°, and Make Slice from Layer . They are available with and without scripts.

Download Bjango Actions 2.3.2

To install, unzip the file and simply click the .atn file.

Follow @Bjango on Twitter