Hello there. I am Terry and I am a full-time undergraduate based in Singapore. I take photos, write a blog and design websites.

And no, I'm not a teddy bear.

Making Curved Edges

Adobe Photoshop CS2 Tutorial: Making Curved Edges

Have you ever heard of quick masking in photoshop? Well quick mask basically allows you to select a particular area which you will mask it (protect it from being edited), so the area beyond your selection will be free to you for any form of editing!

Quick masking is one of the most convenient method in Photoshop for making selection because it allows you to do anything to make your selection – e.g. you can draw a circle and the area beyond the circle will be selected for editing. In the normal mode you won't be able to make circular selections!

Having the Adobe Photoshop CS2 is a must :razz: Anyway, there is no need for me to upload a demo.psd file since this can be done quite easily, unlike the more complicated Mosaic Tutorial (check it out!). 

Let's go! 

Step 1 – Open the Image 

Step 1 - Open the Image

Spacer

Step 2 – Create a New Layer 

Step 2 - Create a New Layer

It is essential to create a new layer since you will make the selection in the new layer. Being a photoshop amateur I would prefer to create this new layer because sometimes quick mask doesn't work on the locked background layer.

Spacer

Step 3 – Edit in Quick Mask Mode

Step 3 - Edit in Quick Mask Mode

Spacer

Step 4 – Select the Rounded Rectangle Tool

Step 4 - Select the Rounded Rectangle Tool

Follow the mouse cursor. Select the Rounded Rectangle Tool and then set the radius. I've used 30, but you can set it according to the magtinude of the curve you want. The bigger the radius, the larger the curved edges will be. Be warned that you should not set the radius to an extremely high value as it might crop out part of the image which you want to preserve.

Spacer

Step 5 – Check your Canvas Size

Step 5 - Check your Canvas Size

I would not want to draw the curved rectangle manually as it is relatively inaccurate unless you can control your mouse correctly and ensure that it wraps the entire image. So we will first find out the canvas size of the image. However, if your canvas is larger than the image such that you have extra empty spaces, crop the image first.

Spacer

Step 6 – Here is Your Canvas Size

Step 6 - Here is Your Canvas Size

Do remember it! In this case is width:1200px and height:1600px. Remember propoerly as sometimes we might mix up the height and width.

Spacer

Step 7 -  Edit Rectangle Tool Configuration

Step 7 - Edit Rectangle Tool Configuration

Follow the mouse cursor. First, select the Rounded Rectangle, and then click the black arrow to edit Geometry Options. Under the few options available, selected Fixed Size. Do you still remember your canvas size? Enter the height and width values accordingly to set the size of the rounded rectangle.

Spacer

Step 8 – Select Carefully

Step 8 - Select Carefully

Carefully move your cursor to the top left corner of the image. The VERY top left.

Spacer

Step 9 – Click and… Tada!

Step 9 - Click and... Tada!

With the cursor at the top left corner, click the left mouse button and tada! You'll have the curved rectangle completely covering the image (with some empty spaces at the four corners… they will be deleted to create a curved edges effect). Almost there! Remeber that you're in Quick Mask Mode so your original image has not been edited! So fret not about that horrible red thing hovering over your image ;)

Spacer

Step 10 -  Back to Standard Mode

Step 10 - Back to Standard Mode

Now we shall revert back to the Standard Mode by clicking the icon on the toolbar.

Spacer

Step 11 – Effect of Quick Mask Mode

Step 11 - Effect of Quick Mask Mode

Now then you'll see the effect of quick mask mode. The mode will exclude the area you've defined in Step 9 and the undrawn area will be selected now (indicated by the red arrows). 

Spacer

Step 12 – Access the Image Layer

Step 12 - Access the Image Layer

Now we shall revert to the layer where the original image is located. For the past 11 steps we are working on the new layer created in Step 1. Select the layer, right-click it and selected Layer From Background…

Spacer

Step 13 – Done!

Step 13 - Done!

After Step 12, press the "Delete" button on your keyboard and the selected areas will be gone, creating a curved edges effect! Tada! :mrgreen: 

Spacer

And here is the final product of this tutorial. Note that the curves are slighly bigger as seen in the image above because the curve is so small (since I'm working on such a huge image), so I repeated the steps and set the radius at 50px.

Cruedv Edges Tutorial - Final Product

Hope you find this tutorial benefitial! Feel free to comment ;) any suggestions for improvement, flaws etc… just write them in your comments. Have a nice weekend!  

Burn after reading » Now you're done reading. What's next?

Random

Related posts that might interest you:

Popular

Posts that are popular among visitors:

Share it

If you've enjoyed the post, or think that it might be useful to others, do share in on a social network site that you're using. Thank you!

  • Digg
  • del.icio.us
  • Facebook
  • Mixx
  • Google Bookmarks
  • StumbleUpon
  • Technorati
  • LinkedIn
  • Reddit
  • Design Float
  • Identi.ca
  • Live
  • Ping.fm
  • Print this article!
  • Twitter
  • Netvibes
  • HackerNews
  • Slashdot

13 responses to “Making Curved Edges” » Leave a response

  1. lunaticgalResponse

    great teddy! thanks for the tutorial again :)

  2. MelissaResponse

    i can always count on you for the photoshop tutorials =). One question though, where to put the smiley ar??? i mean where you all get?? oh and another question, i’ve seen another blog which is powered by wordpress too. The words can be coloured. Now im not very sure what kind of codes to use and i couldnt seem to find any options or enlarge the font or colour it. Any suggestions?

  3. yanniResponse

    im going to try this when im free… more tutorials please!!!

  4. qureyoonResponse

    nice step-by-step tutorials ;)

    great one ted ^^

  5. jigsawmeResponse

    i like this one

  6. lunaticgalResponse

    teddy: i followed all your steps and after i save my picture and have a look, i stil find there are white color background but not transparent at the curved..

    what can i do now :(

  7. chris

    I have been trying to do this for so long…and now I know how..many thanks

  8. thecoffeesnobResponse

    I’ve had this bookmarked forever and finally gave it a shot this morning. It works!- not that i had any doubts in you, i’m that hopeless with Photoshop. Thank you once again for your wonderful, clear instructions, Teddy :lol:

    Check out thecoffeesnob’s last blog post: Melbourne Food & Wine Festival ‘08: Sizzle! The Great Aussie BBQ.

  9. thecoffeesnobResponse

    Sorry it’s me again, Teddy. I’ve just got one question- i’ve been trying to do a collage of 4 pictures with rounded edges and it seems to me that they seem to vary in size slightly despite my resizing them all to the same size before following the steps you provided. Any insight as to why this is the case? I’ve been editing them all one after another to make sure i did them all exactly the same way. Thanks in advance :D

    Check out thecoffeesnob’s last blog post: Melbourne Food & Wine Festival ‘08: Sizzle! The Great Aussie BBQ.

    1. teddYResponse

      Thanks for your comment! I’m glad that you find the tutorial useful :mrgreen: heh. Oh and urm because you’ve created the rounded corners before resizing them, the radius of the curved corners will vary after resizing the images. One workaround is to resize the images first, and then create rounded corners later.

    2. thecoffeesnobResponse

      Ahh. Okay, thank you for clearing that up!

      Check out thecoffeesnob’s last blog post: Melbourne Food & Wine Festival ‘08: Sizzle! The Great Aussie BBQ.

  10. AmarilysResponse

    Very nice!!! Thank you very much :mrgreen:

Leave a Response » Share your thoughts or Return to top

Your name is required. Why?

  • So that I can address you personally (which I'm more than happy to do).
  • Everyone loves their name to be called, right? Nobody wants to be referred to as 'a certain someone' or Mr X (X-Men members aside).
  • If your post too much spam, your name will be imprinted on a personalised voodoo doll, completely free of charge. I'm just joking!

Your email is needed. Why?

  • Your email is, and will, never be given out to any third party under any conditions (except for people sneaking up behind me when I'm on WP admin).
  • So that I can contact you personally in case of certain issues that I wish to address personally.
  • If you post too much spam, I'll email the same spam you've posted 10 times back to you, completely free of charge.

You can always leave a personal URL behind

  • It can be anything - most people put their blog URL, their facebook page, their Twitter URL, their MySpace or etc.
  • I give love back by saying NO to no-follow. All of your webbie links are dofollows instead.

Twitter. Twitter. Twitter.

  • What is Twitter?: Twitter is a social networking and micro-blogging service that enables its users to send and read other users' updates known as tweets. Tweets are text-based posts of up to 140 bytes in length.
  • What is my Twitter ID?: To get a Twitter ID, you simply have to sign up for an account at Twitter.com. Your ID will be in the format of your profile's URL - http://twitter.com/[userid].

Comment notes

  • Gravatar: You can register for one at Gravatar.com
  • XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" highlight="">
  • Codes: Wrap them up with <code></code> tags.

Hello Easter Egg hunter! You've discovered the magic of the Konami Code!

Yea. You probably know what the Konami code is before getting to this page. So now what? Here is a randomised YouTube video on my favourites list... which includes Rickroll, if you're luck enough to get it.

You are currently watching Heineken - Walk in Fridge. Loving it? You can even watch the video in its full screen glory :)

The Konami Code:
Konami Code sequence