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 topShare on Twitter

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

Advertising
  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!

    6
  2. 2

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

    21
    • 3

      thumbs up to that :D

      -27
      • 4

        Lazy designers use Fireworks. Others are precise.

        -20
        • 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

          0
        • 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.

          3
        • 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?

          1
    • 8

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

      11
    • 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!

      4
      • 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.

        9
        • 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 :)

          2
          • 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.

            4
        • 13

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

          0
      • 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.”

        0
    • 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.

      6
      • 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.

        8
  3. 17

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

    5
  4. 19

    Great thanks for Bjango actions and scripts!

    0
  5. 20

    Spend all day perfecting pixels. Creeper blows it up.

    10
  6. 22

    Some very useful tips, love your work Marc :)

    0
  7. 23

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

    7
    • 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.

      6
      • 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.

        0
        • 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.”

          0
    • 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.

      3
  8. 30

    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.

    1
  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!

    1
  10. 32

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

    0
  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.

    0
  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.

    7
    • 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.

      5
      • 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.

        4
    • 37

      I wish this was my post!

      0
  13. 38

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

    0
  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…

    -6
  15. 41

    Big THANKs !

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

    0
  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

    1
  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!

    7
    • 44

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

      1
      • 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.

        1
  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.

    -88
    • 47

      Are you autistic?

      5
    • 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.

      1
  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.

    -1
  20. 50

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

    0
  21. 51

    Two useful tips from me:
    1) Make your Grid in Photoshop so that it has Gridline every 1 pixels and Subdivisions is also 1. This will make it a 1×1 grid. When you turn on the grid and have “snap to grid”, it actually becomes “snap to pixel”. Very fast and easy when you need to paste, resize, etc.

    2) Use Artboards in Illustrator. Define the dimensions of the artboard to be exact pixels and use Pixel Preview to check if everything is ok before pasting to Photoshop.

    Great article btw

    13
    • 52

      I was quite excited by this suggestion; but found this is only relevant if you use the mouse to move the points. It also works the same if you have the subdivisions set up so they will land on the pixel (i.e. 10 pixel grid with 10 sub divisions).

      It’s being a bit pedantic, but that’s not nudging, that’s just moving.

      0
  22. 53

    Great post. I can pass this on to some other designers I work with to help get the point across. It’s like, “your fly is open”… your pixels are hanging out, tuck them back in.

    0
  23. 54

    Great. This makes perfect sense. After all these years there finally is a solution. Awesome!!! Keep it coming!!!

    -4
  24. 55

    awesome fix – you guys are great!!! saved me a bunch of time….

    -4
  25. 56

    Part of my everyday life!
    What I find easiest is in preferences set the document grid to be every 10 pixels with 10 sub divisions, then ensure snap to grid is enabled. Now when you activate your grid and transform objects they’ll snap right into alignment.

    Also disable the silly grid that appears only at high zoom levels to avoid confusion.

    Hey presto, a perfect pixel grid you can activate with the tap of a keyboard.

    0
  26. 57

    This is a great article.

    For large-scale print jobs this wouldn’t be much of a deal but it’s definitely got value with web design. Can’t wait to put a few of these things into practice. Lots of ideas I’ve never tried before!

    Thanks again for a great article.

    -3
  27. 58

    Great post! Very appreciated, thank you so much.

    0
  28. 59

    That was one very good article, with handy tips to save you from frustration.

    However, I have a little problem and I hope you’ll have a handy tip to fix it as well: adding a stroke around a rectangle shape and then rotating the shape with ‘Free Transform’ tool makes the stroke lines look all crooked. So do share a tip, if you have one to overcome this problem.

    Thanks! :)

    0
  29. 60

    Fireworks is perfect for any web related work, Photoshop can do web work, but Indesign can also, the difference comes from the algoritms that have been used for any particular program. I’ve comed to the conclusion that Fireworks is the perfect program for web based design.

    4
    • 61

      Main difference is that your FW web design will look poop next to its PS counterpart.

      Your gradients will have lower depth banding and your strokes won’t have the same level of AA.

      I don’t mind FW, but this isn’t just about the pixel grid.

      0
  30. 62

    Thanks a lot. I love this post.

    0
  31. 63

    Best.Post.Ever!
    I always wondered why rotating small images gave so inconsistent results. :D

    0
  32. 64

    Time to stop procrastinating and try using Fireworks !

    Stop trying to make Photoshop into something it’s not. It’s called “Photo” shop for a reason.

    3
    • 65

      Yeah … like “Fire”works … *facepalm*

      11
    • 66

      While I can agree to an extent, that sort of mindset isn’t always the best bet. Had people only stuck to using HTML for tables, text and sparse images (as it was originally designed), we wouldn’t be where we are right now on the web. But there were mavericks who decided to “make html into something it wasn’t”. Just because a tool wasn’t specifically design for a task does not mean you can’t use it to complete that task.

      2
    • 67

      Fireworks is great, but so is Photoshop. Of the top UI designers I’ve spoken to on the subject, most use Photoshop. It’s a great tool, especially if you know how to use it well.

      3
  33. 68

    stefano solinas - obsidianart

    April 15, 2011 4:43 pm

    Great, really really great!

    -1
  34. 69

    This is helpful for webdesigner community.

    My personal suggestion is FW is better for the web pages, PS is good for editing and filters.

    2
  35. 70

    If you want to rotate 90 or 270° perfectly, you can simply do it via menu edit > tranform > rotate 90° CW / CCW. No problem with even-by-odd or odd-by-even dimensions, always perfect! :)

    -2
    • 71

      That doesn’t work for vector shapes—they still end up 0.5 px out, depending on your source material.

      0
      • 72

        I guess you are right, but with bitmaps it works just fine!

        0
        • 73

          Yep, they’ve corrected it for bitmaps and using the menu option. I work almost exclusively with vectors, so finding the best way to rotate was important for me.

          0
  36. 74

    I got something what I was looking for.

    -2
  37. 75

    What about vector resizing issues? Any tricks?

    0
    • 76

      If you want to scale to 200% exactly (or 50%), I usually move the vector shape to a new document and scale it there. That way there’s no chance it’ll be shifted. I find this approach far more robust and accurate than scaling and nudging (nudging can look right, but can show issues if you scale up further).

      Also, I find vector shapes preferable to pasting vectors as smart objects—smart objects have some rendering anomalies with their anti-aliasing.

      0
  38. 77

    Great.

    There is an option “Snap to Pixel” for rectangle/rounded rectangle :
    http://www.webdesigncreare.co.uk/blog/web-designers/pixel-perfect-photoshop-shapes.html

    1
  39. 80

    It is funny that at the exact moment I’m facing an issue with this. The worst thing is that this article didn’t solve it.

    I have a vector in illustrator that is compound of several aligned lines. Their stroke is 1px, I checked both documents for color settings.. For pasting, I’ve a new document (which gets the exact hight and width of the clipboard). When I paste it, the lines or become completely blur. I tried making the canvas odd and even, even and odd.. everything.. I’m even pasting as a Smart Object…

    if you have any idea why this happens with lines please let me know! Thanks for the article anyway!

    0
    • 81

      make sure you align the stroke to inner or outer. when it is set to center your stroke will be a half pixel off.

      2
    • 82

      Have you tried dragging the object from window to window? If that doesn’t work, try my suggestion earlier on using the transform and setting the upper left x and y values to be a whole pixel number. Hope that helps.

      0
    • 83

      Sounds like there’s an issue with your Illustrator object(s). You may have to outline the stroke using Object > Path > Outline Stroke. When you paste the paths into Photoshop, you only get the paths, not the stroke etc. So the only thing that matters is if your artwork is pixel aligned.

      I assume you’re using Illustrator with the pixel grid and pixel grid snapping turned on? You may also have to draw a rectangle (pixel aligned), then select that and copy it with the other path(s). When in Photoshop, you can delete the additional box, leaving you with the pixel aligned paths.

      0
  40. 84

    Very good article to a problem I get a fair bit working with print designers who use indesign

    0
  41. 85

    Great tips. This is helpful for me. Thanks

    0
  42. 86

    i like it

    0
  43. 87

    Nice article!

    0
  44. 88

    great tips always tried to solve this kind of problem and found it here!

    0
  45. 89

    Great article,

    Not sure why so many people blast each other’s use of PS over FW or FW over PS- it’s whatever you feel comfortable with. The good thing is files are transferrable so if you need to use one application which is better at one thing than the other – do it.

    I actually build my sites/emails in Illustrator CS5 as I find it quicker, cleaner and more easily editable than starting the process in PS5. Once the design is finalised and approved I simply output it as a PSD file and hand it to the web dev team.

    What I am very surprised about to date, even with PS CS5 is that it still allows for 1/2 and 1/3′s pixel placement – I think any image should fit 100% to a pixel – why can’t the developers just do that – it would save a hell of a lot of time. Am I being over the top or talking sense?

    2
    • 90

      I often do a lot of concept work in Illustrator, too. It’s a good tool. And as you’ve said, you should use the app that gives the best results, as defined by your own criteria.

      0
  46. 91

    Very interesting !

    1
  47. 92

    This is a great article, which succeeds in raising awareness about a key issue I’m sure many designers face on a day-to-day basis – myself included.

    Thank you to the contributors who posted the comments about adjusting the pixel grid to 1px x 1px, and to the chap who mentioned that there is a ‘Snap to Pixels’ option hidden away in the ‘Rectangle Tool (U)’ geometry options.

    If only I knew that a few months ago before I started working on the designs of a new UI! 10-15% of the time spent on these designs has unfortunately been “wasted”, trying to prevent the edges of objects from being half a pixel or so out, thus causing blurred edges.

    Thank you for all of your help and advice. The invaluable knowledge gained from reading this article and its comments, will now help me to streamline my workflow during future design work.

    0
  48. 93

    Illustrator all the way for me.

    0
  49. 94

    Especially working with pixel perfect icons, this blurring issue happens for me when i rotate the images. I was finding the solution to that problem
    Thanks a lot for the article..

    0
  50. 95

    Great article but I would liked to see more on scaling vectors/raster images in Photoshop. There’s a special technique to this as well. For example scaling by 50%, 25%, 12.5%, etc…

    0
  51. 96

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

    0
  52. 97

    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
  53. 98

    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
  54. 99

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

    0
  55. 100

    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
  56. 101

    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
  57. 102

    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
  58. 103

    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
  59. 104

    Nice!!!

    0
  60. 105

    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
  61. 106

    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
  62. 107

    like this..

    1
  63. 108

    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
  64. 109

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

    0
  65. 110

    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
  66. 111

    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
  67. 112

    great post!! thank you soooo much…!!

    0
  68. 113

    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
  69. 114

    Woot! This pixel rotating guide is awesome! Thanks

    0
  70. 115

    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
  71. 116

    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