Pixel Perfection When Rotating, Pasting And Nudging In Photoshop

Advertisement

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 an 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:

1

In this case, the artwork is 20 × 9 pixels: even-by-odd dimensions. The results for bitmap layers and vector layers are different, but they both produce unusable results because the origin of rotation doesn’t fall on an exact pixel boundary.

A Fix

Because even-by-odd or odd-by-even dimensions are the problem, 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 problem, 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.

As long as the dimensions for the layer or layers are even-by-even or odd-by-odd, it’ll be fine.

2

An Easier Fix

rotation-origin

Changing the origin of rotation to the top left (or any other corner) will ensure it is on a pixel boundary, guaranteeing perfect results every time. To do this, click on a corner origin after selecting the Free Transform tool, but before rotating. This works brilliantly and is the simplest solution yet.

Bitmap and vector masks are affected by this issue as well, so please take care. But the issue affects only rotated layers, either via “Free Transform” or “Transform” under the Edit menu. Rotating the entire canvas via Image → Image Rotation has no problem.

To make things even easier, I’ve created some Photoshop Actions and Workflows3 that take care of everything for you.

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.

Below is some artwork as it appears in Illustrator: perfectly formed, snapped to the pixel grid, and at the size we intend to use it in Photoshop.

4

Below are the same paths pasted into Photoshop a few times. Notice how only the top-left version is sharp, while the others are half a pixel out on the x axis, y axis or both.

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.

A Fix

Our test artwork is 32 pixels wide by 12 pixels high. Drawing a 32 × 12 marquee selection in Photoshop forces the artwork to land exactly where we want it and to be pixel-aligned. This works every single time.

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.

If you couldn’t be bothered noting your artwork’s dimensions, then by drawing an appropriately sized marquee, you can draw a 2 × 2-pixel selection and paste. If the image is blurry on the x axis only, make the selection 1 × 2 and paste again. If the image is blurry on the y axis only, make the selection 2 × 1 and paste again. If the image is blurry on both axes, make the selection 1 × 1 and paste again.

It may sound complex, but in practice it’s very quick; you’ll only ever have to paste twice to get sharp vector paths from Illustrator.

Smart Objects

Pasting elements as smart objects doesn’t come with the same issue (at least not in Photoshop CS5 anyway). I like to use Shape layers, though: they allow more control and editability and have better anti-aliasing.

Pixel-Perfect Vector Nudging

When nudging vector points, Photoshop exhibits some strange behavior, related to how far you’re zoomed in. At 100%, nudging with the arrow keys will move your vector point exactly 1 pixel. At 200%, nudging moves the point by half a pixel. At 300%, it moves by a third of a pixel.

The behavior seems intentional, but it’s not usually what I’m after. Most of the time, I want to nudge in whole pixel increments. Here’s how you can do that, without zooming out to 100%.

Open your document, and then create a second window by going to Window → Arrange → New Window. You can then resize the new window and place it out of the way.

5
Large view6

Edit in the other window as normal, zooming in as far as you’d like. You’ll now be able to press Command + ` to switch back to the window that’s zoomed to 100%, nudge using the arrow keys, and then press Command + ` to switch back again. Because the other window is zoomed to 100%, nudging will move the selected vector points exactly 1 pixel.

7
Large view8

Please note that holding Shift while using the arrow keys to nudge always moves by 10 pixels, no matter how far in you’re zoomed. Also, dragging points with the mouse will snap to pixels in most situations — most, but not all.

While not perfect, this technique does remove some of the frustration with editing detailed vector paths in Photoshop. Or maybe it’s just another reason why complex shapes should be drawn in Illustrator first, and then pasted as shape layers?

Take Charge Of Your Pixels

Using the correct techniques, it should be easy to place pixels exactly where you want. Remember, you’re the one in charge. Demand that they fall in line. Accept nothing less than pixel perfection.

Would you like to know more about a particular technique or Photoshop feature? Please let us know in the comments.

(al)

Footnotes

  1. 1 http://www.smashingmagazine.com/wp-content/uploads/2011/04/pixel-rotation.png
  2. 2 http://www.smashingmagazine.com/wp-content/uploads/2011/04/square-selection.png
  3. 3 http://www.smashingmagazine.com/wp-content/uploads/2011/04/photoshop-actions-and-workflows.zip
  4. 4 http://www.smashingmagazine.com/wp-content/uploads/2011/04/illustrator-vector.png
  5. 5 http://www.smashingmagazine.com/wp-content/uploads/2011/04/nudging-menubar.jpg
  6. 6 http://www.smashingmagazine.com/wp-content/uploads/2011/04/nudging-menubar.jpg
  7. 7 http://www.smashingmagazine.com/wp-content/uploads/2011/04/nudging-windows.jpg
  8. 8 http://www.smashingmagazine.com/wp-content/uploads/2011/04/nudging-windows.jpg

↑ Back to top Tweet itShare on Facebook

Marc Edwards (@marcedwards) is the Director & Lead Designer at Bjango (@bjango) and co-host of the Iterate podcast (@iteratetv).

Advertising
  1. 1

    I live pixel-perfect designs. Thanks for the post.

    0
  2. 52

    With all the articles about A/B testing, UX interface, wordpress development etc. that had become so popular these days.. This is a nice add-on to the basics I learned years ago. Nice!

    0
  3. 103

    Great post. I’ve always had trouble with photoshop in this regard. You’ve shed a lot of light and finally put somewhat of a name to the issues I was facing.

    Thankyou!

    0
  4. 154

    great masterpiece!!!! Fireworkss!! NAhhhh!! Out of my line!

    0
  5. 205

    For the last 12 years I never has such a “blur” problem with rotating bitmap 90-180 or copy/paste. The key here is:
    – using edit > transform > rotate 90
    rather then edit >free transform

    and also, if you wish to stick with free transform just hold your Shift key:-)

    As for the use of FW instead of PS i will quote Sheldon Couper: “Muahahahahaha”

    p.s. seriously, no professional web designer, that can do more then just 2 rectangles will pick FW. In brief, it’s not PS that have problems, it’s the designer that doesn’t know how to use it:-)

    0
  6. 256

    Lukas from Poland

    April 26, 2011 10:41 pm

    I came across this problem many times, but I’ve been using my own method for a while now. When you rotate graphics which have odd-by-even or even-by-odd dimensions you simply use free transformation, but once you turn it 90 degrees left or right AND before accepting this transformation you HAVE TO make sure the position of the graphics is described in whole pixels (without any comas, i.e. 2,3px) both on X and Y axis. It is really time saving, because almost all of us use free transformation tool as it is the quickest form of rotating elements – and all there is to be added to this method is to take a glance at element’s position :)

    0
  7. 307

    One thing i’d add is that when using free transform to re-size and rotate, do one at a time to avoid bad aliasing.

    0
  8. 358

    This is where i and a lot more photoshop user whent, this a great program to bad rotation always destroyes my work.

    Thanks for the solution and clear explenation.

    0
  9. 409

    Nice!!!

    0
  10. 460

    Damn man, if your first image is a vector, just resize it so its much bigger than bring it to photoshop in 150 dpi and you wont have any problem rotating and the quality wont become shitty.

    0
  11. 511

    Bojan Živković

    May 25, 2011 8:35 am

    I would like to see post about patterns in Photoshop. It is ease to create them but problem starts when pattern need to repeat. Can You write about what should be taken in account to make pattern which will repeat nice and properly.

    0
  12. 562

    like this..

    1
  13. 613

    The easiest way to achieve pixel perfection when rotating / nudging layers in Photoshop is to rotate / nudge your monitor instead. Always works for me. ;D

    3
  14. 664

    finally i found you!!! ive looking for this kind of tutorial its really hard to deal with pixels perfection thanks!!!

    0
  15. 715

    Victoria Thomas

    June 19, 2011 9:32 am

    Great information. I have been facing this blurry trouble for some time, now i got the answer.

    Digital Media Distribution

    0
  16. 766

    Great work and even greater replies :) My question is: can you have some settings so that when you draw say rounded rectangle In Photoshop it’s pixel perfect – I always have a problem with this, Photoshop will always make my shape’s edge blurry and it doesn’t look crisp. Ideas ?

    0
  17. 817

    great post!! thank you soooo much…!!

    0
  18. 868

    Photoshop cs6 solve this problem with there is by default in the preferences-> General panel the option to snap vector tools and transforms to pixel grid moreover if you don’t want this option to be on you can just select your vector and click the Align edges option per vector

    2
  19. 919

    Woot! This pixel rotating guide is awesome! Thanks

    0
  20. 970

    I keep putting my shape on an even-dimensioned, square canvas and rotating it using the upper right corner as the rotation axis.. Nothing is working. What am I doing wrong?

    0
  21. 1021

    InDesign wins for web design. I’ve been designing using PS for 10+ yrs. InDesign has paragraph and object styles, liquid layouts and sooooooo much more awesomeness to help you create fast layouts. The text styling, even basic text box handling is far superior. you can have multiple pages and masters. Sp you can have all your web pages in the one document and have a master which contains your footer and header and soooo much more. Also you can export as an interactive PDF with actual interactive hover-states, form fields – it’s crazy. InDesign in about v5 came out with a ‘web’ page setting when creating new doc – choose web instead of print in its setting. Best thing about it, which is why I first started using it for web design, is setting text to sit on your baseline grid. Couple that baseline grid feature with setting a grid and then set everything to snap and you can’t loose. Plus sizing text boxers and boxes in general is soooo easy with ‘orientation’, ‘x’ (width) and ‘y’ (height) coordinates. Omg I can’t begin to tell you how InDesign rules for web layouts too. Check it out. Don’t even get me started with all the shortcuts to fit/align content to frames. InDesign is king.

    0

↑ Back to top