How To Create Rounded Corners for Your Pictures in Adobe Photoshop CS6

Like This Video 48 139 Skeeter
Added by January 9, 2013

Get 7 days of free unlimited access to lynda.com.

Let’s Round Some Corners On Pictures
Using Adobe Photoshop CS6

I really struggled with this one. I literally spent about 4 or 5 hours searching the Internet for a how-to create rounded corners on my picture that I use as a header for this website. All the Photoshop tutorials and videos I looked at online were for Photoshop CS4 and 5. I come to find out there is a huge difference between those versions and Photoshop CS6. This tutorial and video shows how to create rounded corners on a photo or image using Photoshop CS6 and will not work on earlier versions of Photoshop the same way.

Seven Steps to Round Corners on Pictures Using Adobe Photoshop CS6

Written instructions with pictures below this video I made.

These are the 7 steps for rounding corners for photos in Adobe Photoshop CS6. I don’t know anything about Adobe Photoshop CS5 or earlier. The steps for those may be different. I know the shape tools have been changed in Photoshop CS6 because I saw the Video at Adobe TV. The menu for the shape tools has been completely changed. I’m guessing the stuff I saw online when trying to find a how-to create rounded corners using Adobe Photoshop CS6 where actually Adobe Photoshop CS5 users. But anyhow, I am going to show you the right way to create rounded corners for your pictures in Adobe Photoshop CS6 so you can add some pizazz to your photos. The steps are simple once you know about them. You may want to view the video at Adobe TV to see the changes between Adobe Photoshop CS6 and earlier versions

Step One:

Open your picture into Photoshop CS6. Set the background as needed. I set mine to transparent because I needed a PNG 24 image, so if I decide to change the header area of this site’s color, no white corners will show.

Photoshop Rounded Corners

Step Two:

Double click your new background layer and rename the layer to whatever you want.

Step Three:

This and the next step were the issue. I couldn’t find anywhere on the web to explain this part, either correctly, or at all. Make sure your shape tool menu is set to path. Its default is shape. It won’t work if it is set to shape. Your shape menu will appear when you select a shape like rounded rectangle or plain rectangle etc.
Photoshop Rounded Corners

Step Four:

In your menu, go to Layer > Vector Mask > Reveal All.
All but one website I visited missed this step all together. This is important step.

Notice two things:

1-The new layer created next to the image layer is in the same pane, not underneath like you may be used to seeing when creating a new layer. This is done automatically when you go to layer > vector mask > reveal all

2- Notice also the vector mask IS NOT selected automatically. At least not in my version of Adobe Photoshop CS6. There is no trim line around the box like there is on the image layer, and that means the vector layer is not selected. This one issue gave me a 3 hour fit. Again, this wasn’t pointed out on any website where I tried to find help.

Photoshop Rounded Corners

Step Five:

Click the vector mask layer so that it is selected. You can see in the properties box that the vector mask is selected. The vector mask layer will also have a trim around it.

Photoshop Rounded Corners

Step Six:

Select your rounded rectangle tool, (located where your rectangle tool is), and put your cursor in one corner of your image and drag until you have the shape you want, and release, and you will see the transparent background in the corners, (unless you have a background color then you will see that color). Set the radius first before click and drag. You will see the Radius adjustment under your menu bar up top when you select the rounded rectangle. I set my radius to 35 px.

Photoshop Rounded Corners

Step Seven:

Then save. I saved it both as a PSD and for the web as a PNG 24. PNG 24 so I could have a transparent background.

The image I use is provided royalty free – and for free from Stock Free Images.

P.S. If you found this helpful, how about sharing the link to this page with someone..

 

Get 7 days of free unlimited access to lynda.com.

Similar Videos

Photoshop for Web Design | Introduction

0 6 0

Photoshop for Web Design The Photoshop for web design course covers laying out a website in Photoshop, designing websites for multiple screen sizes, creating wire frames, simulating user interactivity and more. View this entire Photoshop for Web Design course and

Introduction to Designing Web Sites from Photoshop to Dreamweaver

0 33 0

Introduction | Designing Web Sites from Adobe Photoshop to Dreamweaver Adobe Photoshop has been a long time favorite among web designers for creating the initial layout of website so clients can preview them and developers can know what the designer

How To Turn Your Favorite Photos Into a Cartoon with Photoshop

0 15 1

How To Turn Your Favorite Photos Into a Cartoon with Photoshop This Photoshop video tutorial we will explore the following Photoshop tools to make the cartoon: – Gaussian Blur – Fade Gaussian Blur – Darken Mode – Dodge Tool -

48 Comments

  1. Matt
    Matt 20 August, 2014, 10:15

    Thanks! Much appreciated.

      Reply this comment
  2. visionarymarketing
    visionarymarketing 19 July, 2014, 03:04

    You’re a genius! It works. Thanks. Very well made tutorial. Brilliant!

      Reply this comment
  3. Lisa Kucman (@lisakucman)
    Lisa Kucman (@lisakucman) 17 July, 2014, 06:51

    it works!!! I read 3 other sets of instructions and couldn’t get it to work. Thanks a lot!!

      Reply this comment
  4. Leah
    Leah 22 May, 2014, 16:28

    I still can’t post on FB without the white around it?? Any solutions for that??

      Reply this comment
  5. Nikita_Sp
    Nikita_Sp 10 May, 2014, 07:03

    thanx!

      Reply this comment
  6. Kelly
    Kelly 11 April, 2014, 09:20

    Ohh my gosh you are amazing. This is the ONLY post out that I found that gives completely accurate instructions for cs6. Thank you!!

      Reply this comment
  7. John
    John 20 March, 2014, 12:40

    Good job! Thanks for taking the time to help us all out! ~J

      Reply this comment
  8. Traveler
    Traveler 5 March, 2014, 16:45

    I almost skipped this because too many times I have followed online tutorials only to find they didn’t work and I completely wasted my time. Not only did this one work, but it was very well explained and easy to follow. The rounded corners appeared and it was like magic…lol. Thank you.

      Reply this comment
  9. Cindy
    Cindy 9 February, 2014, 18:47

    OMG, thank you so much! I’ve been searching for how to do this for YEARS, and I’ve never found the answer. Thank you so much for this tutorial, thank you!

      Reply this comment
  10. john
    john 27 January, 2014, 21:42

    really helpful, so kind of u

      Reply this comment
  11. fernandomexico
    fernandomexico 26 January, 2014, 18:46

    Best tutorial, I will follow you, thank you.

      Reply this comment
  12. Ian
    Ian 13 January, 2014, 06:59

    Finaly!!! Someone who can explain things simply and quickly.

    Well done & thanks.

      Reply this comment
  13. Alix Danger
    Alix Danger 10 January, 2014, 17:35

    Thank you! I have been looking for a simple explanation for this process for days!

      Reply this comment
  14. Sevan Bomaer
    Sevan Bomaer 5 January, 2014, 20:17

    Hey Skeeter thanks for making something simple that so many people complicate!

      Reply this comment
  15. Alice
    Alice 2 January, 2014, 10:05

    Thank youuuuuuuuuuu very very very much!

      Reply this comment
  16. george482
    george482 28 December, 2013, 06:43

    Thanks a lot, great tutorial!

      Reply this comment
  17. Stephen
    Stephen 13 December, 2013, 12:21

    Terrifically simple tutorial that showed me how to do something I thought should be simple, but every other tutorial was either complex or plain just didn’t work. Thanks for taking the time to figure this out and post it!

      Reply this comment
  18. crispey
    crispey 21 November, 2013, 13:43

    haha, lots of us in the same boat. appreciate the time taken to do this, ty ty ty very much.

      Reply this comment
  19. Sarah
    Sarah 5 November, 2013, 17:36

    Thanks for solving the mystery!! Invaluable information and you saved me a lot of time figuring out how to make rounded corners in CS6.

      Reply this comment
  20. matt
    matt 3 October, 2013, 08:09

    FYI there is a way easier way to accomplish the same thing. You can open an image, use the rectangular marquee tool to select the area you want to keep, adjust the radius by clicking select -> modify -> smooth, then click select -> inverse then click edit -> cut and boom, image with rounded corners.

      Reply this comment
    • Skeeter
      Skeeter 3 October, 2013, 09:23

      Hey Matt,

      Yea as time went on, (this video is quite old) I figured that out. It’s probably time to make another video. The way I do it now is — open photo > make a copy of the background (photo)> select the rounded rectangle tool.> Draw a rounded rectangle and adjust radius on a layer on top of the background copy layer> select the background copy layer > cmd or ctrl click the rounded rectangle to select it. (marching ants) > select > inverse > delete. That deletes everything outside the rounded rectangle. Then turn off or delete the rectangle layer. You have the rounded photo left.. Then if you want to fit the canvas to the rounded photo >image>trim>based on transparent pixels>left, right, top, bottom. That’s all there is to it.

        Reply this comment
  21. Kathy
    Kathy 5 September, 2013, 17:13

    Thank you, thank you, thank you!!!!

      Reply this comment
  22. R.Chalmers
    R.Chalmers 2 September, 2013, 06:13

    Brilliant. Thanks. I’ve been trawling the internet for hours and hours and hours – so much rubbish out there. This WORKS.

      Reply this comment
  23. Tyran67
    Tyran67 21 August, 2013, 08:07

    Impressed :) This has been bugging me for literally months, always kludged it but decided enough is enough. Great stuff, thank you for sharing and the detailed step-by-step!

      Reply this comment
  24. SixShooter
    SixShooter 15 August, 2013, 09:10

    After several days of trying to round corners on photos I found your “How to Video” and in less than two minutes I’m done. Very will done!! Thanks…..

      Reply this comment
  25. DLP
    DLP 13 August, 2013, 20:38

    Very helpful, thanks for spelling it out for us. These were the gotchas that had gotten me…

      Reply this comment
  26. Dawn
    Dawn 8 August, 2013, 11:34

    I hate to be redundant but…. THANK YOU SO MUCH !!! You did a wonderful job with the step by step and the details that were left out in so many other tutorials.

      Reply this comment
  27. Taban Cosmos
    Taban Cosmos 3 August, 2013, 22:40

    Thanks for the tutorial love it

      Reply this comment
  28. Dan Caryll (@dcaryll)
    Dan Caryll (@dcaryll) 7 July, 2013, 11:58

    I’ve always had a hard time finding info on rounded corners. This really was the best tutorial I’ve found out there. Makes it really simple compared to a lot of other difficult ways. Thanks so much for taking the time to write this.

      Reply this comment
  29. vaxman2
    vaxman2 26 June, 2013, 08:48

    Thanks a lot. I feel your frustration when an instructional article skips something critical.

      Reply this comment
  30. Coral
    Coral 25 June, 2013, 16:02

    Thank you. Your video is very helpful and easy to understand.

      Reply this comment
  31. Emil Lindblad
    Emil Lindblad 25 June, 2013, 01:35

    Best guide for rounded corners! Thank you!

      Reply this comment
  32. Wendy
    Wendy 17 June, 2013, 17:39

    GINORMOUS time saver! I needed 3 pics w/rounded corners on website homepage; this is the easiest, most informative tut for CS6 I found! Working the pics now so I can get them up tomorrow! Thank you again for sharing :)

      Reply this comment
    • hardik
      hardik 24 January, 2014, 13:08

      heres a more simpler and less technical way.. and can be used regardless of the version..
      you culd have made a rounded rectangle.. then ctrl+click on the image in the layer in the pane… then select your image layer in the pane and click m
      then right click the image and click select inverse and click delete….
      its simple if u get the logic.. and no need to remind and revise stepss..

        Reply this comment
  33. Rui
    Rui 13 June, 2013, 03:08

    Thanks a lot, mate, now i can create my own pictures with rounded corners. But i can’t do that if i had 2 or more layers. Or is it possible?

      Reply this comment
  34. KARA
    KARA 12 June, 2013, 04:54

    i have never left a comment in a website, but you deserve more than a comment, thank you very much … i really got a lot from this tips …

      Reply this comment
  35. kim
    kim 8 June, 2013, 15:20

    Life-saving time-saver, thanks!

      Reply this comment
  36. Lacretia
    Lacretia 6 June, 2013, 13:00

    You rock! I’ve been pulling my hair out over this!

      Reply this comment
  37. Halfathoner
    Halfathoner 10 May, 2013, 15:14

    Thank you!! No one else had CS6 instructions. This was so easy! I’m sorry it took you hours to figure out, but I’m glad you took the time and then shared it.

      Reply this comment
  38. Wendy
    Wendy 6 May, 2013, 22:51

    Thanks! But how would we do only 2 rounded corners – say one top left and one bottom right?

      Reply this comment
  39. Jill
    Jill 30 April, 2013, 19:01

    Thanks! Finally! I have shared your frustration. Although it would be good if the images were a little clearer so we could see what’s happening in the menus at each step.

      Reply this comment
  40. blakeharrell
    blakeharrell 20 April, 2013, 18:33

    well done thanks!
    Couldnt find those missing steps in any other tut.

      Reply this comment
  41. kristy
    kristy 16 April, 2013, 12:03

    Awesome, thank you!!

      Reply this comment
  42. Ju
    Ju 14 April, 2013, 10:21

    Excellent tutorial – thank you. Before finding this I spent ages googling and could only find stuff that did not work in CS6 or had steps missing etc,

      Reply this comment
  43. Brittney B.
    Brittney B. 26 March, 2013, 14:49

    Thank you! This was a great step by step explanation!

      Reply this comment
  44. Kerck
    Kerck 19 March, 2013, 08:24

    Well done..thank you

      Reply this comment
  45. Jess
    Jess 27 February, 2013, 11:19

    THANK YOU!!! THANK YOU SO MUCH!!!

      Reply this comment

Write a Comment

Your input is valuable. Please leave your comments here.

css.php