Ian Hoar – Passion for Technology – Geeking Out - Technology, Web, Toys, Games, Design, Entertainment, Gadgets, & Geeking Out

Adobe Photoshop CS4: Blurry edges with the Rectangle Tool

Photoshop IconI was playing around with Photoshop CS4 and came across an odd setting. I’m not even sure what the default setting usually is, but for me it was my first time dealing with non-pixel perfect blurry rectangles in Photosohp and it really threw me for a loop. Below you can see two 60 pixel boxes created with the rectangle tool. Both boxes look the same, but upon further inspection you will see that the right box has blurry edges and the left box is pixel perfect and sharp.

Photoshop rectangles 100 zoom

Here are the two boxes zoomed to 300%.

Photoshop rectangles 300 zoom

What the $#%??

This is enough to drive any web designer mad and I don’t really know what possible use the non pixel perfect box would have, but maybe that’s because I’m a web designer and I like clean straight edges and lines. Luckily this setting is super easy to turn off. Select the Rectangle tool then at the top of Photoshop click on the little arrow which will open the Geometry options for the rectangle. If you selected the Rectangle tool, you should be seeing the dialogue below.

Rectangle Options

Select the Snap to Pixels option and now you will have clean pixel perfect rectangles. This option is also available for the Rounded Rectangle tool. No more blurry edges.

27 Comments to “Adobe Photoshop CS4: Blurry edges with the Rectangle Tool”

  • Michelle Bivotti

    Hi, thanks very much for this. This was been my nightmare:))

  • rahulmax

    Thank you very much, I used to zoom up and adjust to pixels, to correct this. Happy now!

  • eido

    Thanks, man!

  • Paul Pritchard

    Amazing! I’ve wasted way too much time trying to draw rectangles perfectly.

  • Tanja de Bie


    I was frustrated with this for a long time!

  • TEd

    Fantastic! Thanks for this, been driving me mad, like others I have been adjusting the corners tags individually!

  • Jörg

    Yeah, this is awesome. Thanks for pointing to this neat little feature, it will save me a couple of workhours..

  • BoneyardBrew

    Thank you so much.

    This “feature” has been causing me headaches since day one and I was starting to think there was no way to turn it off.

    Thanks again!

  • Kivi

    Yes! Just what I needed…
    I’ve used PS for several years now – but newer saw this option… Stupid me!

  • Grodde

    too bad that when you resize your pixelicious vector box, it drown inthe blur madness again.

  • Ian Hoar

    Grodde, that’s why I usually use the “Direct Selection Tool” when resizing. Nudging by 1 pixel or by 10 pixels with shift arrow keys is the most precise way of resizing boxes.

  • Haret Alfasi

    Thank you SO MUCH for this! I had this problem with drawing rounded rectangles and it frustrated me so much!

    Thank you thank you!

  • tentimestwenty

    I have the same problem with the Rectangle Marquee tool. Zoom a 72 dpi document to 100% and then try to select a shape from edge to edge exactly. Release the mouse and the stupid Marquee tool is one pixel off, or sometimes one pixel off on both the left and right sides! I have to zoom to 600% to see the actual pixels before it will work correctly. It’s driving me insane.

  • Sam Doidge

    OH GOD, thank you, this will my Photoshop efficiency 300%.

  • Dannyawesome

    Hey mate. Cheers for this useful tip! I have been struggling with those ugly edges for ages:)

  • steve

    Awesome! This has been driving me crazy!! Thanks!

  • Fash

    Also drag a ruler with shift and it will lock in to the exact pixel

  • HMedia

    Holy god,

    I’m working with webdesign since the early’s 2000, since photoshop 5 i’ve always had this f***ing problem of blurred vector lines….if only i’ve find that before…

    Really thanks, man

  • Deepa

    Thanks for sharing:-) useful tip.. keep rocking:-)

  • Prerna

    Thanks lot man its awsome tip

  • vadim

    thanks a gaziilon aah

  • Matt

    Thanks for this! I’ve been dealing with this for about 3 years now. What a stupid %$&#ing decision, why would anyone want a anti-aliased rectangle by default? I always had to zoom in 300% and nudge my points over with the direct selection tool until I could get a crisp edge. I sure hope this was fixed in CS5…or are we up to CS6 now?

  • Sam

    Thank you so very much for this tip, I have this ploblem for long time

    God bless you

    from thailand

  • Tom

    Nightmare! Thanks for showing how easy this is to fixed. Wasted so many hours carefully resizing…!

  • jamie

    This has been driving me nuts for months!!!! Thank you so much!

  • Leo

    4 years old and still helping!

  • Ian Zachary

    My God there is no excuse for Photoshop not to work right the first time with something this simple… I want a simple 1 px border. That’s it! But no… you get blurry lines. “But I selected 1px in the stroke option!@#!$#@$@” Yeah I was pissed. Thanks for this post.