66 Posts  •  January 26, 2011

Just The Tip #1: Snapping shapes to the pixel with Photoshop

This is a very useful tip if you are using Photoshop for web design or app development.

It is very important to set your shapes to “snap to pixels” because you want the edges of your shapes to have the least possible anti-aliasing and to be as crisp as they possibly can.

One way to make sure your shapes are pixel perfect is to make sure when you draw the shape your canvas is zoomed to 100%. To view your canvas at 100% go to View > Actual Pixels from the top menu.

But that can get a bit tedious if you are drawing a lot of shapes and you need to zoom in to draw them.

Step 1:

Snap to Pixels

Select the “Rectangle Tool” (U)

Step 2:

Go to the “Geometry Options” drop-down that is found across the top in the options bar.

Step 3:

Finally, select the “Snap to Pixels” check box in the lower right corner of the “Geometry Options” drop-down.

That’s it, your all set up! It’s an easy solution to an annoying problem.

Author: Colin Oakes

Hello, I’m Colin Oakes, a web designer and front-end developer from Guelph, Ontario. I have been designing and creating websites for over 10 years and have enjoyed every minute of it.