When creating Web and app interfaces, most designers slave over every single pixel, making sure it’s got exactly the right color, texture, and position. If you’re not careful, though, some common functions like moving, rotating, and pasting can undo your hard work, resulting in a blurry mess. But with some small changes to your workflow, you should be able to maintain the highest-quality artwork from the start to the end of the project.
Pixel perfect rotation
If you’re not careful, rotating layers in Photoshop can damage them in a very noticeable, pixel-mashing way. When rotating layers with Free Transform (and some other tools) to exactly 90 or 270°, the quality of the outcome is determined by the layer’s size.
If the layer is of even width and even height, then you’ll be fine. If it’s of an odd width and odd height, you’ll also be okay. But if they’re of an odd width by even height or even width by odd height, then you’ll see something like the result below.
A Fix
Because even-by-odd or odd-by-even dimensions are the problems, we need a way to ensure that the contents of the layer are odd-by-odd or even-by-even. Probably any method you can think of will solve this Smashing eBook #8│Mastering Photoshop for Web Design, Volume 2 │ 127 problems, be it adding a square bitmap mask to a layer or adding more content to the layer that you’re rotating. You could also draw a square on another layer and rotate both at once.
Pixel Perfect Vector Pasting
If you’ve drawn pixel-snapped artwork in Illustrator and pasted it into Photoshop as a shape layer, you may have noticed that the result is not quite what you expect (i.e. a perfectly sharp image), but rather a blurry mess. Here’s how to fix that.
What Went Wrong?
Photoshop’s pasting behavior works in one of two ways. If you’ve made a selection, then the clipboard’s contents are pasted so that the center of the clipboard is aligned with the center of the selection. If a selection hasn’t been made, then the contents are pasted so that the center of the clipboard aligns with the center of your current view. The level you’re zoomed into and the portion of the document you’re viewing determines the result.
An Easier Fix
The marquee doesn’t have to be the exact size of your artwork, though. In our case, a 2 × 2-pixel selection would work just as well, because the center of an even-width-and-height marquee selection and the center of even width-and-height clipboard contents would fall exactly on a pixel boundary, which is what we want. If the artwork was an odd width and height, then a 1 × 1 selection would have been required.
