Adobe Photoshop CS4: Blurry edges with the Rectangle Tool
I 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.
Here are the two boxes zoomed to 300%.
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.
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.
Michelle Bivotti May 7, 2009 at 4:02 am
Hi, thanks very much for this. This was been my nightmare:))
rahulmax June 8, 2009 at 6:48 am
Thank you very much, I used to zoom up and adjust to pixels, to correct this. Happy now!
eido July 14, 2009 at 11:05 am
Thanks, man!
Paul Pritchard July 20, 2009 at 8:54 am
Amazing! I’ve wasted way too much time trying to draw rectangles perfectly.
Tanja de Bie July 22, 2009 at 1:09 am
THANK YOU!
I was frustrated with this for a long time!
TEd July 30, 2009 at 4:15 am
Fantastic! Thanks for this, been driving me mad, like others I have been adjusting the corners tags individually!
Jörg August 6, 2009 at 11:09 am
Yeah, this is awesome. Thanks for pointing to this neat little feature, it will save me a couple of workhours..
BoneyardBrew September 13, 2009 at 6:59 pm
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 October 23, 2009 at 7:47 am
Yes! Just what I needed…
I’ve used PS for several years now – but newer saw this option… Stupid me!
Grodde November 15, 2009 at 4:57 pm
too bad that when you resize your pixelicious vector box, it drown inthe blur madness again.
Ian Hoar November 15, 2009 at 5:25 pm
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 January 15, 2010 at 6:47 am
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 March 10, 2010 at 2:24 pm
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 September 16, 2010 at 5:50 am
OH GOD, thank you, this will my Photoshop efficiency 300%.
Dannyawesome March 16, 2011 at 2:16 pm
Hey mate. Cheers for this useful tip! I have been struggling with those ugly edges for ages:)
steve July 12, 2011 at 11:36 am
Awesome! This has been driving me crazy!! Thanks!
Fash August 8, 2011 at 6:50 pm
Also drag a ruler with shift and it will lock in to the exact pixel
HMedia August 16, 2011 at 5:48 am
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 August 17, 2011 at 6:58 am
Thanks for sharing:-) useful tip.. keep rocking:-)
Prerna September 7, 2011 at 12:12 am
Thanks lot man its awsome tip
vadim October 18, 2011 at 1:25 pm
thanks a gaziilon aah
Matt January 4, 2012 at 2:01 pm
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 February 13, 2012 at 8:12 pm
Thank you so very much for this tip, I have this ploblem for long time
God bless you
from thailand
Tom May 28, 2012 at 8:55 am
Nightmare! Thanks for showing how easy this is to fixed. Wasted so many hours carefully resizing…!
jamie January 25, 2013 at 10:47 am
This has been driving me nuts for months!!!! Thank you so much!
Leo April 17, 2013 at 1:26 am
4 years old and still helping!
Ian Zachary October 2, 2014 at 10:22 am
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.