Go Back   vb.org Archive > vBulletin Article Depository > Read An Article > Graphics Articles
FAQ Community Calendar Today's Posts Search

Reply
 
Thread Tools
Creating Rounded Edges in Photoshop
Aken's Avatar
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
Show Printable Version Email this Page Subscription
Aken Aken is offline 01-24-2007, 10:00 PM

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 :up:

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.




Reply With Quote
  #12  
Old 02-14-2007, 06:33 AM
Aken's Avatar
Aken Aken is offline
 
Join Date: Jul 2004
Location: Wisconsin, USA
Posts: 129
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

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!
Reply With Quote
  #13  
Old 03-18-2007, 06:35 PM
giovannicosta giovannicosta is offline
 
Join Date: Feb 2007
Location: London, England, UK
Posts: 200
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Fantastic, thankyou
Reply With Quote
  #14  
Old 06-10-2007, 03:16 PM
Ohiosweetheart Ohiosweetheart is offline
 
Join Date: Dec 2005
Location: N.E. Ohio
Posts: 2,291
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

I wish someone would write a tutorial for this for Paint Shop Pro.
Reply With Quote
  #15  
Old 06-12-2007, 12:15 PM
Triky's Avatar
Triky Triky is offline
 
Join Date: Mar 2007
Location: [Italy]
Posts: 728
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Thank you, Aken.
Reply With Quote
  #16  
Old 06-15-2007, 03:26 PM
Triky's Avatar
Triky Triky is offline
 
Join Date: Mar 2007
Location: [Italy]
Posts: 728
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

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?
Reply With Quote
  #17  
Old 06-16-2007, 09:44 PM
Aken's Avatar
Aken Aken is offline
 
Join Date: Jul 2004
Location: Wisconsin, USA
Posts: 129
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Typically when I want to create a box outline for a website, I use the following steps:

1) I start off by adding Guides to get the appropriate size box that I'm looking for.

2) Make the box using the steps in this article.

3) Using the Rectangular Marquee tool, I select a small square box (usually about 20-25 pixels) around the left corner, use the Copy Merged function to copy everything inside of it (in case you didn't know, Copy Merged copies every layer instead of just the one you currently have selected in the Layers palette), and then open a new image, paste it, then Save for Web.

4) Use the selection / copy merged / blah blah step for the other corners, the whole top, the background, or whatever other parts of your box you want to use.

5) Use and enjoy


Currently my normal computer is broken, so I'm stuck on my mom's laptop, otherwise I would've made that little how-to a little more in-depth. Hopefully I made it clear enough. If you have any questions, just ask!
Reply With Quote
  #18  
Old 06-18-2007, 10:09 AM
Triky's Avatar
Triky Triky is offline
 
Join Date: Mar 2007
Location: [Italy]
Posts: 728
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Thank you, I will try!
Reply With Quote
  #19  
Old 06-25-2007, 03:56 PM
Triky's Avatar
Triky Triky is offline
 
Join Date: Mar 2007
Location: [Italy]
Posts: 728
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

How can I define wich colour the Alpha 1 will come with?
Reply With Quote
  #20  
Old 07-27-2007, 11:15 AM
beer4life beer4life is offline
 
Join Date: Nov 2006
Posts: 13
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Quote:
Originally Posted by Ohiosweetheart View Post
I wish someone would write a tutorial for this for Paint Shop Pro.
Not to deride this excellent article, but to point out the simpler alternative for casual use.
I must point out that you will get obvious pixel degradation on the curves as you will with whatever method you use. A couple of samples for you to see.
Kindest Regards, Bill.
Attached Images
File Type: bmp Sample_Paint.bmp (411.4 KB, 14 views)
File Type: jpg RoundedCorners.JPG (17.7 KB, 0 views)
File Type: jpg Sample_Paint.JPG (15.6 KB, 0 views)
Reply With Quote
  #21  
Old 09-16-2007, 05:43 AM
Aken's Avatar
Aken Aken is offline
 
Join Date: Jul 2004
Location: Wisconsin, USA
Posts: 129
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Sorry to anyone who viewed this article in the last week or so, and saw no images in the first post. I recently switched web hosts, and forgot I had the images hosted on that site. They have been re-uploaded and work fine once again
Reply With Quote
Reply


Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 02:31 AM.


Powered by vBulletin® Version 3.8.12 by vBS
Copyright ©2000 - 2025, vBulletin Solutions Inc.
X vBulletin 3.8.12 by vBS Debug Information
  • Page Generation 0.04892 seconds
  • Memory Usage 2,331KB
  • Queries Executed 28 (?)
More Information
Template Usage:
  • (1)SHOWTHREAD
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_header_end
  • (1)ad_header_logo
  • (1)ad_navbar_below
  • (1)ad_showthread_beforeqr
  • (1)bbcode_quote
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)modsystem_article
  • (1)navbar
  • (4)navbar_link
  • (120)option
  • (1)pagenav
  • (1)pagenav_curpage
  • (2)pagenav_pagelink
  • (11)post_thanks_box
  • (11)post_thanks_button
  • (1)post_thanks_javascript
  • (1)post_thanks_navbar_search
  • (11)post_thanks_postbit_info
  • (10)postbit
  • (3)postbit_attachment
  • (11)postbit_onlinestatus
  • (11)postbit_wrapper
  • (1)spacer_close
  • (1)spacer_open
  • (1)tagbit_wrapper 

Phrase Groups Available:
  • global
  • inlinemod
  • postbit
  • posting
  • reputationlevel
  • showthread
Included Files:
  • ./showthread.php
  • ./global.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/class_hook.php
  • ./includes/modsystem_functions.php
  • ./includes/functions_bigthree.php
  • ./includes/class_postbit.php
  • ./includes/class_bbcode.php
  • ./includes/functions_reputation.php
  • ./includes/functions_post_thanks.php 

Hooks Called:
  • init_startup
  • init_startup_session_setup_start
  • init_startup_session_setup_complete
  • cache_permissions
  • fetch_postinfo_query
  • fetch_postinfo
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • style_fetch
  • cache_templates
  • global_start
  • parse_templates
  • global_setup_complete
  • showthread_start
  • showthread_getinfo
  • forumjump
  • showthread_post_start
  • showthread_query_postids
  • showthread_query
  • bbcode_fetch_tags
  • bbcode_create
  • showthread_postbit_create
  • postbit_factory
  • postbit_display_start
  • post_thanks_function_post_thanks_off_start
  • post_thanks_function_post_thanks_off_end
  • post_thanks_function_fetch_thanks_start
  • post_thanks_function_fetch_thanks_end
  • post_thanks_function_thanked_already_start
  • post_thanks_function_thanked_already_end
  • fetch_musername
  • postbit_imicons
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • postbit_display_complete
  • post_thanks_function_can_thank_this_post_start
  • postbit_attachment
  • pagenav_page
  • pagenav_complete
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • showthread_complete