Resizing rounded rectangles in Photoshop
The rounded corner style has been around for a quite a while now, and one thing (beyond wanton overuse) has always bothered me about it. When working with rounded rectangles in Photoshop, there seemed to be no elegant way to resize them. The corners don’t remain intact when you use Transform (Ctrl/Cmd-T) to scale the shape. Instead of lightly rounded edges, you end up with ugly mishaps like this:
My default method for getting around it was to rasterize the shape, move the ends around, and then fill the gaps by resizing the middle. Darren Hoyt has a good walk through of that trick here. Another workaround is to create the shape in Illustrator and then paste it in as a Smart Object. But both felt like bad hacks for doing something that should be inherently simple.
As with nearly any Photoshop quandary there is an easy solution that doesn’t involve rasterizing or firing up Illustrator. Here’s how:
Starting with a rounded rectangle shape, use the Direct Selection tool (Ctrl/Cmd-A) to grab the path points for the corners you want moved. To grab multiple points you will need to hold the Shift key down after your first click.
For example, you would grab the 2 points in each corner (four total) to move the top edge:
Once the points are selected you can move them using either the Move or Transform tools. Hold the Shift key to keep them moving in a straight line. That’s it - no additional wizardry needed.
Great advice! Hopefully people will realize how easier a design is to maintain when you always use vector elements and modify them correctly (with the pen tools and direct selection tool).
It’s not at all obvious when you start using Photoshop, that the application is sometimes quite dumb which regards to resizing shapes and creating them. I’m talking about the infamous little anti-aliased lines half-way through a pixel, when you need to zoom incredibly to make that edge look precise.
very nice tip! it helped alot.
i always had the problem you mentioned, so this is a perfect solution. thanks for this!
Great tip. I figured this one on my own a few weeks ago, but it is such a huge time/frustration saver!
Thanks!
Jerome, to get around that, and to add to this blogpost:
Set up your Photoshop so that Units & Rulers are in pixels, and the grid division is exactly 1 pixel. You can do this in your preference pane.
Activate the grid by View > Show > Grid or through the shortcut, and use the same tool (direct selection) to get your vectors to align exactly with the pixel grid. No more fuzzy anti-aliasing for you.
When you move the direct-select points with your mouse, they will move exactly one pixel. Using the arrow keys allows for more precision.
Amazazing. I do this all of the time in Illustrator and sadly I tend to constantly rasterize my squares in Photoshop. Never even thought the same ability from Illustrator could exist in Photoshop as well.
‘Tis true, corners like the ones you first mention are truly embarrassing in the real world.
Thanks for this great tip!
I really like using Fireworks for web graphics, which has a 9-slice feature that does not distort the 4 corners of an object.
Yup, vector shapes are also called life savers in my head. Can’t count how many times it did save me on deadline days. Simply being able to actively resize and re-colour objects on a layout… Oddly enough it’s a tool I have discovered not too long ago myself. Thanks for the tip!
Website design isn’t for the lazy (or at least it shouldn’t be). The little things like the oddly shaped rounded corner can ruin a design for me.
Unfortunately many of us, if not all of us, have made this mistake before. I tend to opt for simply recreating the box versus resizing but I will be adding this to del.icio.us so when I come across this error again, I’ll have the tools to quickly fix it.
Cheers on a great tutorial.
Mike
I find Photoshop is sometimes not all that precise when dealing with vector shapes so I tend to resize rounded rectangles by selecting the side I want to expand and alt-nudging it out.
I was gonna say, Fireworks has a useful feature to scale corners with 9-slice and even 3-slice scaling of buttons. I use it all the time and you can probably make use of the assets in Photoshop too, never tried it though. Wonder if Photoshop will implement the same feature eventually.
Hopefully Adobe will get better vector editing capabilities in the next few years. Vector shapes are getting more and more popular.
Unfortunately, Adobe at the moment is working with Google on Flash development to get some indexability out of the program. I wouldn’t be surprised if Photoshop development has been curbed to some extent because of this.
Here is another method I find quite easy to do in Photoshop:
1. Use the Rectangular Marquee Tool to create you desired rectangle.
2. Select -> Modify -> Smooth
3. Add you desired value for the “Sample Radius” to create you desired rounded edge.
4. Style accordingly!
very usefull!
it’s is a good solution.
thanks for this!
If you hold the shift key while using the transform tool, it will maintain the aspect ratio of both the shape and the rounded corners.
Alternatively, if you want to increase the length but not the width of a rectangular shape in photoshop (assuming it is still a vector and has not been rasterized) you can select just the anchor points on the top end of the vector by using the direct selection tool, clicking and dragging around those anchor points (you’ll have to either lock or hide other layers within that selection area, or target each anchor point on your shape layer individually and hold the shift or command key while selecting each of them). Then stretch that bad boy as long as you want him to be without having to distroy your rounded corners.
Like everything in CS, there are dozens of ways to accomplish the same task.
@Wolf ...and everyone
When using the rectangle or rounded rectangle tool, click the down arrow next to the custom shape tool to bring up rectangle options.
Select the checkbox that says “Snap to Pixels”
No more fuzzies.
The option is only available for rectangle and rounded rectangle. So don’t expect it to work on your custom shapes or, unfortunately, your line tool :-(
Lately, I’ve taken to using Photoshop’s stroke layer style to achieve scalable rounded corners. It’s super simple:
- Use the shape layer to draw a rectangle
- Apply a stroke, with the stroke set to the outside
- Make the stroke colour the same as the rectangle
Take a nap with the time you just saved.
Hmm, you’d have to account for the stoke size when creating your rectangle, but I suppose it could work. I mean, if you want all your rectangles to have a 5px stroke, you just give them all the style and make a 5px smaller rectangle.
Although, I do apple+t my shapes a lot to see what the info says my dimensions are so I can use that for measurements, so that might end up being more of a problem for my workflow.
Oh hey, yeah Mindy! That’s exactly what I do, too.
Rounded corners are sooo much nicer in Illustrator, though, because you can use an Illustrator Filter. You don’t have to worry about resizing and getting wonky corners.
Another helpful use for Illy rounded corners: One time I had a bunch of square markers on a map and after hours of placing each one the client said, “oh, I guess we forgot to mention that we wanted dots, not squares like the sample we gave you.” Doh! Couldn’t have mentioned that earlier, eh? Oh well, Select All, Filter>Stylize>Rounded Corners radius 50 px (or some other huge number) and voila! Instant circles.
I agree, “Illy” does have better rounded corners. Stinks to open an entirely separate app for a few simple vector tools. I wouldn’t mind more vector power in photoshop, but I suppose there’s much room for argument there. My only reason would be for convenience and performance of only running one app. Maybe I should just do my layout mockups in Illustrator..........
........or Fireworks? Anyone use that? Thoughts?
Digital Web Magazine has <a hre="http://www.digital-web.com/articles/photoshop_versus_fireworks/">an article</a> on this. I wonder if anyone at Viget uses Fireworks and if they have a preference using the different software packages.
Oops, messed up my link above. Here it is in case I can’t use html in comments.
http://www.digital-web.com/articles/photoshop_versus_fireworks/
This rocks.
Thank you, Mindy, this was EXACTLY the tip I went googling for.
As Sarah Jean says, you can rectangle-drag the direct-selection tool over the two corners to select the eight points (two for each rounded corner) in one swoop.
Think of all the embarrassing rounded corners you’ve eradicated…
Great tips, and useful in all sorts of situations. It’s tutorials like these that remind even the most experienced of graphic artists that sometimes, we need to find new approaches to the basics.
Nice tip! Thanks for sharing this. Your suggestion helps me a lot.
thank you! this is great :)
Thanks for this!
SWEET!!!!!
Next entry: I Can Has Stock Images!
Previous entry: Getting Rid of Jaggies on Your Photo Borders
Recent Comments
Hi Doug!
I just want to print this article :) But the print version is yet to be fully polished. I hope you guys spend sometime :) Viget inspire is a really nice resource for me....
- Lance on 'What To Expect When You're Expecting CSS/HTML Handoff'.
- Erik Wallace on 'What To Expect When You're Expecting CSS/HTML Handoff'.
- Jonathan on 'Switching Mindsets: From WordPress to ExpressionEngine'.
Subscribe to Comments RSS