 |
|
|
Article Options |
|
Creating Rounded Edges in Photoshop
 Aken
Join Date: Jul 2004
Posts: 129
Web designer, crappy photographer, motorcycle rider, drum banger, air guitar rockin' dude from the cheese state =) Wisconsin, USA
by
25 Jan 2007
Hey everyone! I'm digging the new Articles section of VB.org, so I figured I'd contribute a little tutorial that I learned years ago and use in almost every website design. Creating Rounded Edges in Photoshop!  Note: This process has worked in both Photoshop 6.0 and Photoshop CS (my current version seen in this article). I see no reason why it shouldn't work in CS2. If anyone runs into any problems using other version, please speak up! Preface So you've got your document open in Photoshop, and you're ready to make some rounded edges. Great! If you're not this far, well then that's a problem  Create a new file (Ctrl + N)Step 1: Get a fresh layer. In your Layers window, click the Creat New Layer button (indicated by the red arrow). Feel free to rename it to whatever you'd like. Make sure you select it when you are done, which is indicated by the layer turning blue w/ white text as pictured.  Step 2: Make a block of white. Using the Rectangular Marquee Tool, click and drag the cursor to create a square or rectangle. Whatever shape you create is what will end up with rounded corners, so it's easiest to make this shape accurate to it's final size. (A great way to do this is by using your Guides!)  Once you've got your selection, go to Edit > Fill. Change the Use drop-down menu to White, make sure the Mode is set to Normal, and Opacity is set to 100%. (You can ignore the Preserve Transparency checkbox.) Hit Ok!  Step 3: Cut! With the white box still selected, Cut it out! (Edit > Cut, or Ctrl + X). This effectively copies the white box to your clipboard, then deletes it off the layer. Step 4: Paste to Channels. On your Layers window, select the Channels tab near the top. You will see four layers - RGB, Red, Green, and Blue. Select the New Channels button on the bottom to create a new one. It will automatically default to Alpha 1 and be selected. The background will be black, don't worry about it, it's a good thing!  Paste (Ctrl + V) your white box. It will show up in the middle of the channel and will still be selected. Hit Ctrl + D to deselect it.  Step 5: Blurrr! Here's where the fun begins! Make sure your Alpha 1 layer is still selected, and go to Filter > Blur > Gaussian Blur. Change the Radius to 9.0 Pixels. Hit Ok! Your white layer should now look like this:  You can see that it's getting closer to curved edges! Step 6: Levels change. This step is what changes our curved edges from a wierd blurry looking thing to a nice even white. Open your Levels box by hitting Ctrl + L, or using Image > Adjustments > Levels. I know it looks a little complicated, but don't worry, it's easy  Change the top three Input Levels boxes to the follow, from left to right: 121, 1.00, 136. You should not have to change the Output Levels, but they should read 0, 255. Hit Ok!  Hey, look - we've got some rounded edges!  Step 7: Back to Layers. Now that we've got our rounded edges, we need to get them back to our normal layers. Hold Control on your keyboard and left-click your Alpha 1 channel. This will automatically select your white box. Copy it, then push the Delete Channel button on the bottom, shown below.  Now, click back to your Layers tab, make sure your new layer is still selected (AKA blue!), and hit Paste. Bingo! One white box with rounded edges!  Step 8: Cleanup + tips and tricks. If you've got a keen eye, you'll probably notice that the edges of your box aren't a nice plain white. Often times you don't even want the box to stay white anyway, so that's not a big deal. The easiest and most efficient way to change the color of the box is to Double-Click the layer in your Layers window, which will bring up a box of Styles. Use the Color Overlay section and change it to whatever color you choose. You can also use this Styles box to add other effects to your box, such as drop shadows, gradients, patterns, and more. If you're interested in smaller rounded edges, for a banner or button or whatever, you can change the size of the Gaussian Blur in Step 5 - 4.0 is about half the size of the final result. Thanks for reading, and of course if you have any questions or feedback, don't hesitate to post up! I'd like to hear if someone else has a different technique as well.  No members have liked this post.
Last edited by Princeton; 26 Jan 2007 at 16:18.. |
|
Views: 16273
|
| Comments |
|
#2
26 Jan 2007, 16:19
|
||||
|
||||
|
Great tips
thanks for sharing
__________________
Former vBulletin.org Staff Member Latest Articles: Liquid Layout = Less Ad Revenue? How to Monetize Your Site Improve Web Page Performance How To Write For The Web If it needs instructions, there's room for improvement. Give users what they actually want, not what they say they want. And whatever you do, don't give them new features just because your competitors have them! No members have liked this post.
|
|
#3
28 Jan 2007, 15:49
|
|||
|
|||
|
Top post!
No members have liked this post.
|
|
#4
29 Jan 2007, 07:45
|
|||
|
|||
|
We need more good tutorials on making borders...
Thanks! No members have liked this post.
|
|
#5
29 Jan 2007, 19:39
|
|||
|
|||
|
I dont understand why you would want to make a shape that way. It would be much easier to use your rectangular marquee tool, then making a box. Then going to Select > Modify > Smooth. Then choose how many pixels you want the box rounded off to. Very simple.
No members have liked this post.
|
|
#6
29 Jan 2007, 20:58
|
|||
|
|||
|
Or just use the pen tool & select the rounded rectangle
No members have liked this post.
|
|
#7
29 Jan 2007, 21:38
|
||||
|
||||
|
Well first of all, after you've done this technique a few times and get it memorized, it's very fast and easy to do, even over and over.
This technique also introduces added extras such as filters and channels - things that a lot of new designers aren't going to have a clue what they do, or if they even exist. And while I realize that this tutorial doesn't really explain what gaussian blur or channels can also be used for, it's an introduction to them none-the-less. And more importantly, you can use this exact method to create curves not entirely devoted to just a rectangle or square, for instance:  Try doing that smoothly and quickly with your pen tool I'm aware of other methods to creating just a simple rounded edge on a rectangle, and that's great if it's all you need. But if you're like me, you like learning new and interesting techniques. I think this opens a lot beyond a simple box. No members have liked this post.
|
|
#8
30 Jan 2007, 06:28
|
|||
|
|||
|
I wasn't complaining. I was wondering why you would use steps making it more complex than it has to be. I understand what you were trying to get across now. Great tutorial. Im sure it will help plenty.
No members have liked this post.
|
|
#9
30 Jan 2007, 06:44
|
||||
|
||||
|
Didn't think you were complaining - I understand why you'd be curious. Now you know!
No members have liked this post.
|
|
#10
13 Feb 2007, 12:44
|
||||
|
||||
|
Or you can just make a selection using the Rounded Circle shape... Will save some time...
No members have liked this post.
|
|
#11
14 Feb 2007, 07:33
|
||||
|
||||
|
If you're referring to using the Rounded Rectangle shape tool, I've already explained the benefits of using this technique over it.
If you're ferring to using the Elyptical Marquee tool, I have no idea how that would help. Feel free to explain!
No members have liked this post.
|
|
#12
18 Mar 2007, 19:35
|
|||
|
|||
|
Fantastic, thankyou
No members have liked this post.
|
|
#13
10 Jun 2007, 16:16
|
|||
|
|||
|
I wish someone would write a tutorial for this for Paint Shop Pro.
No members have liked this post.
|
|
#14
12 Jun 2007, 13:15
|
||||
|
||||
|
Thank you, Aken.
__________________
I'm italian, I am learning english.. so, please, if you see any errors in my grammar or spelling, let me know via PM. Danke! No members have liked this post.
|
|
#15
15 Jun 2007, 16:26
|
||||
|
||||
|
Hey, Aken. Now I need to know how to save it for a web site. If I click on Save for Web it save the enire box.. and I need the top-left corner, the top-right corner, the left line, the right line, the bottom line, etc, etc. Wich is the best way for do this?
__________________
I'm italian, I am learning english.. so, please, if you see any errors in my grammar or spelling, let me know via PM. Danke! No members have liked this post.
|
|
«
Previous Article
|
Next Article
»
| Currently Active Users Viewing This Thread: 1 (0 members and 1 guests) | |
| Article Options | |
|
|
| New To Site? | Need Help? |
All times are GMT. The time now is 17:49.
Powered by vBulletin® Version 3.8.14
Copyright © 2023, MH Sub I, LLC dba vBulletin. All Rights Reserved. vBulletin® is a registered trademark of MH Sub I, LLC
Copyright © 2023, MH Sub I, LLC dba vBulletin. All Rights Reserved. vBulletin® is a registered trademark of MH Sub I, LLC
Design by Princeton
Copyright ©2001 - , vbulletin.org. All rights reserved.
vBulletin® is a registered trademark. 