It’s one thing when designers perpetuate trends like gradients or huge headers, but in the past year I’ve actually had clients asking for rounded corners by name. Usually it’s because they’ve seen them on a site they like and believe the softer edges make the page friendlier. No argument here, although I sometimes explain that the HTML required can cause bloat.
The initial Mockup
We’ll start by sketching a basic wireframe for them in Photoshop, using the Rounded Rectangle tool:
The client reviews it and says, “I need the Masthead taller and the Content region shorter”. But since the image is raster, not vector, we can’t simply use the Transform tool or the corners will stretch and disort like this:
Making the box smaller
Let’s revert to our first design. We want to make the Content region about 150px shorter. First use the Marquee tool to make a selection:
Then hold CTRL+Shift while tapping the down-arrow button on your keyboard – this will slide the curves downward in 10px increments without distorting them. Or, if you want to move them in 1px increments, hold only CTRL and tap the down-arrow. Or, if you want to slide the curves freely, just hold CTRL+Shift while moving your mouse up and down.
Making the box bigger
Now that the Content region is shorter, we’ll need to re-size the Masthead region. Just select the bottom portion like this:
Then hold CTRL+Shift to slide it down to where you want it. Now make a selection around the top portion, right-click and select Transform:
You may now pull that piece of the Masthead straight down to meet its bottom half, thus making the whole thing taller and without distorting the corners.
Simpler Methods?
My method might sound kind of simple or obvious to others who use Illustrator in conjunction with Photoshop – Smart Objects and all that. But I’ve always found hotkeys and the above method to work more quickly for me, without the need to use vector shapes. I’d love to hear more alternative methods.
And, if anyone needs advice on making logos bigger, there is always this song to inspire and enlighten them.
3:24 pm
thanks for the tips. that’s quite handy even though I use Illustrator as well…
3:31 pm
I like to keep my things editable, so what I do is create the boxes in Flash, and then export as an AI. Flash allows you to do wierd stuff with the corners, like have custom round values for each corner. Anyway, open in illustrator, select the layer, then go to Photoshop and paste as a smart object. Now, granted, you can roundtrip PS and IL when editing but you still run into the same issue as you mentioned, which is distorted curves, even if it is a vector object. But at least you can edit it in IL, save and roundtrip it back to PS without having to re-import it. If i need to make an ajustment like the one you’re mentioning, I’ll measure the size I want, and make one to that spec in Flash and export as AI again. Flash has some interesting drawing tools, and I don’t mind the extra step.
3:33 pm
oh, and I love your Mimbo theme, which is why I visited in the first place. :-)
9:04 pm
I too admit – creating designs in vector illustrating software (like Flash, Illustrator or Inkscape under Linux for example, in my case) saves a lot of time and energy while it comes to situations like you described in this post.
I don’t know how it’s done in Flash or Illustrator, which Chris mentioned about, but in Inkscape I can resize rectangle, while keeping its rounded corners unscaled: edited rectangle has 2 independent “grab-points”: one for scalling rectangle, second one for changing the roundness of its corners.
“Grab-point” are there until I convert the rectangle to path.
But then I can still keep undistorted rounded corners, by scaling the box through moving its specified points at once.
4:41 pm
Very useful post. Thank you. Can you describe how to make a rectangle with a tab? LIke a folder? With rounded corners at each side? I can’t find a tutorial for that anywhere on the web. The only stuff I’ve found uses blur to round out corners.
http://www.adobetutorialz.com/articles/2426/1/Smooth-Edges
That doesn’t seem to me to be the right approach.
5:15 pm
Rick: newer version of Photoshop come with a rounded rectangle tool that lets you set a radius size. I use that in conjunction with the transform tool options and that usually does the trick.
4:14 am
In PHOTOSHOP – it is easier if you draw rounded rectangular tool and leave it in shape mode. You can still resize shape rounded rectangular without stretching rounded corners.
Here’s how:
1. draw rounded rectangular with rounded rectangular tool
2. select Direct Selection Tool (it is below Pen tool, hidden behind
Path Selection Tool)
3. with Direct Selection Tool select only bottom corners, just click
and pull with the mouse across bottom corners
4. now press down-arrow button or SHIFT + down-arrow button for
bigger jumps.
5. you see?
7:04 am
I do it exactly the same way.
If you use shortcuts for the tools you can handle it very fast.
However, this method is not that handy, there is much space for improvement on the part of the photoshop developers.