How to Create Rounded Corners
Contents
[ hide ]
How to Create Rounded Corners
When creating a look that stands out a bit from the rest on a website – like we did for our new Semiomantics Shop at the smashing Ycademy Business Building Seminar this past weekend -, it’s all about details… even if it’s just about whether a corner is sharp at 90 degrees or rounded or swung in a decorative fashion.
With all Seminar participants professionally equipped with Adobe Photoshop, everything becomes possible for the knowledgeable web graphic designer, and here is a brief Web Graphics Tutorial as to “How to Create Rounded Corners” – ending with a picture like this:
How to Create Rounded Corners
Here is a step-by-step guide for you to follow and get the exact same result as I do – just click the images to get a bigger view in the overlay and simply observed what I have done… it should be really clear… :
1.
Open your Photoshop and pull in an image that you want to give some rounded corners, say at 15 degrees.
Open … and browse to your Pictures and select one.
2.
On the left side Tools bar, click the ROUNDED RECTANGLE TOOL.
3.
On the top horizontal bar, set the Radius to 15 px and see to it that you also select the rounded corner rectangle here of course.
Now place the cursor – which is a little cross now – a little to the inside of the top right corner and pull it over your picture, so that you have equal distances and a fine ‘frame’.
4.
Now you’ll be shocked that your picture disappears – duh! What happened?
No stress! Right-click on the layer – which now shows a Shape – and the Layer Styles with the BLENDING OPTIONS at the top open. Scale down the Blend Mode Opacity to 0… and you will see your picture appears again – like magic!
5.
Go to PATHS. If you don’t find them on the right side of your screen, click on Windows at the top, tick Paths and you have it. Whenever you miss a tool, chances are big you find them here.
Now right-click on the highlighted (blue) Shape 1 Vector Mask.
The Make Selection Popup opens – just as you see it on the picture here.
6.
Give it the values as on the screenshot – i.e. :
Rendering: Feather Radius : 0
Tick anti-aliased
Operation: New Selection
OK
You see the ‘marching ants’ now…
7.
At the top, go Edit > Copy Merged
8.
Then go File > New and open a new transparent picture; its size should be big enough for the picture you just worked on.
9.
Then go File > Paste
HOPPLA! Your picture with the rounded corners waits for you!
Now you can save it and use as you intended to!
Ycademy Workshop
I hope this was of help; if I missed something or wasn’t explicit enough, or you get lost somewhere… let me know! We will do this exercise and more about creating Web Graphics and Images at tomorrow’s Ycademy Workshop at 7 pm London time in yorGOtalk, our brilliant Conference Room by Microsoft!
I wish you much success in Creating your own Web Graphics!
Co-Founder of YORGOO, YCADEMY and Semiomantics. If you enjoyed reading the above, please consider following future tips and strategies by RSS reader, Email delivery, or Kindle subscription.
Author: Bianca Gubalke, Art, Media, Publishing.
Thank you for a super tutorial, I was wondering how to do this.
Great Zo! I’m glad it helps! Fire awayyyyy:)))
hi
gonna try it right now! :-)appears very clear. thanks a lot!
i know semiotics and semantic but ….?
kind regards
piet
Hi Piet,
thanks for the flowers :) Great photos on your site. Why don’t you build an eStore and sell your work online? I am busy building a brand-new one right now at http://shop.biancagubalke.net – already on Google. That’s a Semiomantics eShop. You could present just photos . . . with some of them as a background over the whole page. Contact me at bianca (at) ycademy.com and we talk. Groetens van Zuid Afrika!