Have you ever noticed that Photoshop will anti-alias the edge of a rectangle? This is because the edge of the rectangle happens to fall in the middle of a pixel. If you follow these few simple rules when designing websites in Photoshop, you can ensure that the edges of your rectangles will fall exactly on the edge of a pixel, making the shape super crisp and sharp.

The first thing you want to do is make sure that you enable the option to snap rectangles to whole pixels. You can set it through a check-box in the toolbar when you have the rectangle tool selected (shortcut: U). Click the drop-down button next to the “Custom Shape” button in the shape toolbar. Then check “Snap to Pixels.” See the following screen shot:

Now, whenever you draw a shape, you can be confident that you will only fill whole pixels. However, there will still be issues when you try to re-size the shape in the future. If you try to use the transform tool, all bets are off: The edges of your shapes will fall in the middle of pixels. Photoshop will try to make up for it by anti-aliasing, but we want a sharp, crisp edge. See the following screen shot:

Solution: Instead of using the transform tool to re-size your shapes, use the “Direct Selection Tool” (keyboard shortcut A).

With this tool, you can select individual points in your shapes and move them accordingly. Hold shift while clicking on points to select more than one at a time.

When you click and drag your selected points, the line will snap to the edge of pixels. See the following screen shot:

You can also use the arrow keys to move the points around. However, you must make sure you’re not “zoomed-in” or “zoomed-out” at all. You MUST view the document at 100% to make sure the points snap to whole pixels. The only exception to this rule is when you hold the shift key while pressing the arrow keys. This will move your points in 10 pixel increments exactly, regardless of how far zoomed-in or zoomed-out you are. So if your points were already on the edge of a pixel, they will remain on the edge of a pixel when you move it by 10 pixels.

With these simple steps, you can be confident that your shapes are as crisp and clear as possible!

Tags: graphic design, photoshop, web design

This entry was posted on Thursday, July 29th, 2010 at 11:34 pm by John and is filed under Graphics. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.