Menu Search
Jump to the content X X
Smashing Conf Barcelona 2016

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

Pixel Perfection When Rotating, Pasting And Nudging In Photoshop

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 Link

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:


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 Link

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.


An Easier Fix Link


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 Link

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.


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? Link

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 Link

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 Link

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 Link

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 Link

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.

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.

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 Link

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.


Footnotes Link

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
SmashingConf Barcelona 2016

Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Barcelona, on October 25–26, with smart design patterns and front-end techniques.

↑ 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).

  1. 1

    Great Post! I always had trouble when importing vector object into Photoshop. This explains a great method/practice when it comes to smaller pieces!

  2. 2

    Or just do it all in Fireworks and stop worrying about this kind of silly stuff! ;)

    • 3

      thumbs up to that :D

      • 4

        Lazy designers use Fireworks. Others are precise.

        • 5

          Hyper-active designers use Boujou for 3D motion tracking of a footage, 3ds max for 3D elements creation, cinema 4d for virtual 3D landscape and camera creation that lines up with boujou tracking data, and After Effects for compositing and color correction. =D

        • 6

          If by “lazy designers” you actually mean designers who value streamlined workflow for a specific purpose. Many Fireworks designers were first Photoshop and Illustrator experts anyway. Each is better in specific areas and lacking in others. It depends on what you’re trying to do.

        • 7

          I would say that Fireworks is so much more precise and intuivite than PS, and I have been using both programs for a long time. Sure, FW doesn’t have all of the effects that PS has but when it comes to speed FW is so many times faster. The way you can work with Symbols is just superior.

          I’ve tried the “open a new window” hack to be able to push pixels perfectly but as soon as I go in to edit a smart shape, that whole idea falls.

          Also: having the grid on in PS? That’s like painting in the dark! Where do I find an opacity setting for the grid?

    • 8

      Chris Roberts

      April 14, 2011 5:41 am

      Finally someone talking sense, Fireworks was designed for pixel perfect vector graphics.

    • 9

      My thoughts exactly, I’ve just finished a project in Photoshop actually and I swear 20% of the whole project was spent fixing the pixel problems mentioned in this post, I wish I’d have read this yesterday but I wish more that Photoshop would work properly!

      • 10

        See my response to “Jeprie” below….Photoshop works great, you just change your grid prefs to a 1×1 pixel grid and have it snap. Done.

        • 11

          It’s funny actually, I read that yesterday and tried it out, it does seem to work pretty well, and I came up with the same idea for iDraw on iPad a week or so ago so I’m surprised I didn’t think to try and do something similar with Photoshop!

          Unfortunately it still doesn’t make it as intuitive as Fireworks though, for example in FW, if a path has gone off the pixel grid you just right click and ‘Snap to Pixel’.

          Thanks for the tip though it’ll save me a lot of stress when using PS :)

          • 12

            Ya, the only downside is that the grid HAS to be on for it to do this, but it is a simple command+”. I’m sure at some point they will kill off Fireworks and wrap the functionality into Photoshop.

        • 13

          Thanks man!! That should be added to the post.

      • 14

        Gotta love it when people blame the software for their own lack of knowledge. “Photoshop sucks. By the way, I wish I knew all this yesterday. But Photoshop still sucks, durr.”

    • 15

      I agree. When it comes to user interfaces and web designs Fireworks is the choice. If you want to take the zit out of a beiber face you should use Photoshop.

      • 16

        Fireworks treats strokes and some other effects horribly.

        Sure I can work ‘to the pixel’ easier in fireworks, but the end result won’t look as good.

        And I’m not talking about the users skill or ability (or even ingenuity), the fundamentals of the two software render different results, and photoshops is better.

        Same with gradient banding etc. etc. etc.

        So really there’s no perfect option. Annoyingly you either have to use fireworks and live with its many pitfalls, or use Photoshop and deal with the pixel grid issue.

  3. 17

    SSSSssssss….. That’s a nice post you have there.

  4. 19

    Great thanks for Bjango actions and scripts!

  5. 20

    Spend all day perfecting pixels. Creeper blows it up.

  6. 22

    Some very useful tips, love your work Marc :)

  7. 23

    While designing interface, I always nudge the vector. I really wish Photoshop has a Snap to Pixel function.

    • 24

      Actually it does, kinda. I turn off the new pixel grid and go into my prefs into the guides and grid section > and change my prefs to make a gridline every 1 pixel, and subdivision every 1 pixel as well. As long as the grid is on, and “snap to grid” is checked in the view menu, you’re set. You don’t even have to do all these crazy rotation techniques explained above. Works great.

      • 25

        Alan, thanks tons. No more pixel pushing. I colored my gird white so it pretty much mimics the new pixel grid. It would be super cool if I could add some transparency.

        • 26

          True, I just color mine to a light pink, dotted lines work well too, it’s whatever you like. I did the same custom grid thing in Illustrator as well, works great. Just uncheck “grid in back” and “pixel grid above 600% view.”

    • 27

      If you use e.g.Rectangle tool (U) you can turn “snap to pixel” in Rectangle options. You’ll find them by pressing the “down arrow” button on the top toolbar. Just right after Custom Shape icon. It also works for Rounded Rectangle I think.

  8. 30

    Gerd Wippich

    April 14, 2011 6:25 am

    This means that the workflow between Adobe applications still needs to be optimized. Great post, thanks a lot! More articles like this one, yes please.

  9. 31

    I been using Photoshop for years, I had no idea that my problems could be fixed.

    Thank you for the excellent tips on being pixel perfect!

  10. 32

    Great tips, thanks! This always frustrates me to no end.

  11. 33

    It’s ridiculous that we even have to think about this stuff. I shouldn’t care about what it rotates around, the bitmap shouldn’t change when rotated by 90-180-270 degrees. Period. If I want to keep it centered (really?) I’ll nudge it by half a pixel down and half a pixel to the right.

  12. 34

    Thanks for the excellent article.

    Apparently some commenters need to switch to decaf, then stop for a moment and acknowledge that Photoshop is used for more than just Web projects.

    Note to Adobe: Get your act together and purge the Macromedia cooties from Fireworks, then share the good features of Fireworks with Photoshop. With its release of CS5, Adobe sent the message that bringing FW up to speed was not a priority.

    • 35

      Rubén Gómez Radioboy

      April 15, 2011 6:42 am

      No, thanks.

      For photo editing the pixel adjustment would be a liability.

      The solution is to use each application to what has been created. Photoshop is best for retouching photos. Fireworks is the best to design interfaces and websites.

      • 36

        That would be true IF fireworks was better for creating interfaces; the simple truth is that its not.

        Its workflow is better suited, and it has many features that work great for web work; but you still cant get the same great results you get in PS in FW (and I’m no noob, and have tested many a scenario with coworkers where I need to use FW as part of my workflow).

        Simple thing is that PS needs to take on some of the functionality of FW; and then Adobe can make their whole ‘workspace’ thing actually useful. i.e. toggling between photographer and UI designer could enable some of these pixel features and paging/state functionality.

        FW is a nasty old Macromedia throwback; we just need 2 or 3 of its features – not a full merge.

    • 37

      David Anthony

      June 26, 2013 7:53 pm

      I wish this was my post!

  13. 38

    Thanks for the post. I’ve been looking for something like this.

  14. 39

    Why not just use Fireworks!!!

    Even Adobe says its the tool to use for web design, can’t argue with the company who makes both applications…

  15. 41

    Big THANKs !

    I’ve been worried why the pixels were off, now I know the why and the how to fix it !

  16. 42

    If you love the creeper so much, give him a hug. He’ll explode with joy, I’m sure.
    Oh, btw, nice article. ;D

  17. 43

    I’m curious to hear all the plaudits for Fireworks. I gave up on it because its type spacing and rendering was an utter disaster compared to PS or Illustrator. When I raised the matter on an Adobe support forum I got abuse because apparently “there’s no such thing as half a pixel”. I guess it may have improved since then.
    I’d love to work with a designer that understands what this article is on about; I’ve often received Illustrator “web-ready” artwork that has no concept of pixel alignment and is mostly unusable.
    Adobe apps have always had a bad default paste location when there is no selection. The centre of the current view is pretty much guaranteed to be always wrong. MacDraw did it better 25 years ago!

    • 44

      Fireworks CS5 uses the same text engine as Photoshop. problem solved. and you even get to keep all your beloved Photoshop layer effects.

      • 45

        Really? Cause I use PS and FW CS5 and they both render text completely differently.

        They also both have different options.

        Although now I’d actually argue that FW is better; but that’s only because Adobe has some massive problem with Helvetica in PS whereby it renders like poop.

  18. 46

    I have no idea what any of you guys are talking about… Pixel Perfect? mmmm sounds like an Adobe to Microsoft problem… I have never had a problem with my pixels in Photoshop… ever… If you design your vector correctly in Illustrator than you should be fine pasting it into Photshop! I really am perplexed here… really. The only time I have ever seen pixel problems in Photoshop is when I was using my girls Dell Duo laptop thing to work out of. But when I worked from my Mac I saw sharp vector transfers every time. Must be a Microsoft problem because my site (designed on a MAC) comes up beautifully on her screen.

    • 47

      Are you autistic?

    • 48

      Sorry mate, but this isn’t a race war.

      I work on a Mac and will experience sub-pixel nudging EVERY TIME I nudge a pixel outside of 100% zoom.

      Let us know when you’ve done a few more design tuts.

  19. 49

    I haven’t checked out the actions, but I have a simpler way… use the transform dialogue to make sure the upper left corner is landing on a whole pixel on both the X and Y axis. Then go to where it says 100%, and, while referring to your info window for the dimensions, type in your exact pixel size for width or height to make sure it’s, say, 120 pixels, rather than 120.23 pixels. You can just type “120 px” instead of “100%”, and PS knows what you want. Hit the chain to lock the aspect ration, and, if you like, go to the rotate and type in a rotation there (or just do the adjustment I described after rotating). I never transform vectors in PS without keeping an eye on this.

  20. 50


    April 14, 2011 10:02 am

    This is a very great article, first of all thank you very much for your well informed set of tools. Keep them coming!


↑ Back to top