How to get Pixel Perfect Designs in Photoshop (Video Tips)

If you're a pixel-perfectionist like us at MediaLoot, then sometimes you might be left annoyed and/or perplexed when spot blurry, unrefined edges in your designs. It's a common problem, but luckily, salvation is here! By using a few tips and tricks that will be divulged, and demonstrated in this article, you can finally put a stop to the fuzziness.

The purpose of this post is simply to share a few tried and tested techniques, for taming pixels in Photoshop. When working with vectors in particular in Photoshop, it's very easy to end up with design elements that straddle half-pixels, quarter-pixels and even smaller.

In fact, Photoshop can essentially split every pixel in a document into another one hundred pixels. Which is pretty awesome in terms of control and preciseness, but not so great for keeping design elements clean and sharp.

So, without further ado, here is our collection of tips for pixel perfection in Photoshop. Each tip is accompanied by a short video demonstrating the technique.

The "Two-Up" Technique

For many web and user interface designers, this is probably one of the best, unique features of Photoshop. Yet it is so hidden in the application that a lot of users aren't even aware of it's existence! The "Two-Up" technique, as I like to call it, is when you use the "Arrange Documents" feature in top toolbar, to set up two instances of the same document, side by side.

This technique allows you to zoom in and make detailed edits in one window, whilst always being able to see what the pixels look like at actual size in another window. It has tonnes of useful applications, including working on small icons and tweaking any small details in designs.

You can also use this technique to assist you in designing interfaces for the iPhone. Just set up the Retina resolution document in one window, and then zoom to 50% in the second window, and you will get an idea of how the design will appear on standard resolution iPhones.

Align New Shapes to Pixels

Another slightly hidden, but very useful feature in Photoshop, is the ability to automatically align new vector shapes to the pixel grid. Obviously this is really useful if you want to have sharp, crisp designs. The only downfall is that, this option can only be applied to rectangles and rounded rectangles. So, lines, circles, polygons, and custom shapes will still be subject to the usual methods of using guides, or tweaking the shapes after drawing them.

Snap to Pixel Grid

Where as the last tip focused on drawing new shapes that align to pixels, this technique will affect all objects on the canvas. Although there is a pixel grid in Photoshop, there is no option to align objects to that pixel grid. However, there is an option to align to a regular grid. So why not take advantage of that, and turn your regular a grid a pixel grid?

Nudging Paths by 1 Pixel

Photoshop has some very strange behaviour when it comes to nudging points on vector paths. The "logic" behind it is that if you zoom the document to 100%, and nudge a point, it will move 1px (as is expected). But for some reason, if you zoom to 200%, it will move half a pixel. And If you zoom to 400%, it will move a quarter of a pixel, and so on.

While there is no way to stop this utterly bizarre behaviour, there is a way around it. By utilizing the "Two-Up" technique from earlier in this list, it is possible to zoom in to your desired location in one window, and use a second window at 100% to do the all the nudging.

The "Half Pixel" Technique

By default, when you use the Transform tool in Photoshop, the anchor point which it uses when making the transformations, is in the center of the object. What this means is that if you alter the size of an object and give it an odd value ie. changing the width of an object from 22 pixels to 23 pixels, the middle of the object stays where it is. And it adds half of a pixel to either side of the object to make the 1px different.

The result is blurry edges. The solution is to add a .5 to the X and/or Y value.

Rotating Objects

This technique ties into the problem of transforming objects and ending up with blurry edges. In fact, this tip can also solve the last problem we discussed in "The 'Half Pixel' Technique". The reason why rotating objects with an odd value width causes blurry edges, is because by default Photoshop is using the middle of the object as the anchor point. Just switch it to one of the corners and problem solved!

Your Thoughts & Tips