Configure Photoshop for pixel perfect design

By default Photoshop tries to improve image quality by adding a feather effect to the contour of resized images. This feature can be very annoying when you're working on web designs. You have surely already experienced it. Here is a screenshot of what we're talking about:

The image just doesn't look crisp like this and this is a basic square. Notice the values for positioning and size are not natural numbers. There is no such thing as half a pixel, but photoshop will try to achieve the effect with that feather. Fortunately you can change the settings to reduce this to a minimum.

Set up proper units

Go to File > Preferences > Units & Rulers. Change the units for both Types and Rulers to pixels.

Set up a grid

From the preferences menu choose Guides, Grid, Slices & Count. Now set a pixel grid according to your needs. It's good to have subdivisions every pixel for the images to snap to.

Set up snapping options

Now that you have the right units you want the images to snap to your guides and grid.

Snap vectors to pixels

One last thing you may find useful is to make sure your shapes snap to natural pixel numbers. This is specially useful for shapes with curved lines. To activate the snapping check the box in the tool options as you see in the screenshot.

With this small changes you'll save a lot of time and frustration when designing for the web.