Solved

Rounding image corners in Photoshop CS3 or other program

Posted on 2008-06-16
11
2,173 Views
Last Modified: 2013-11-19
Hello Experts,

I currently use PS CS3 when working with graphics and images but if there is another program out there that will round corners easily and without too much pain, I'm interested.  Otherwise, I would prefer to have an answer to this question that assume the use PS CS3

So: how do you round corners on a GIF or PNG graphic?  I found what seems to be a decent walk through on how to do this to a photo but when I tried on a PNG graphic I created, it did not work.

Important: I'm a really newbie to PS CS3 so I would appreciate a real step by step answer on how this is done.  

I've also heard this can be done with CSS but it seems like a bit involved and I have to believe it's easier using a program like PS.  If I'm mistaken, please let me know and thanks for the help!
0
Comment
Question by:max7
  • 7
  • 4
11 Comments
 
LVL 26

Expert Comment

by:David Brugge
ID: 21798845
First, understand that the images with rounded corners are not really rounded, the parts outside of the rounded area just hidden.

You can hide them in several ways. If these are images that are going to be printed, you just leave the corners "blank" or white and nothing prints in that area.

If this is an image that will appear on the web, you can make The outside edges the same color as the background and they will disappear.

Or you can  make the outside corners transparent, and save it as a GIF (being sure to check the transparency check box) of a PNG. If you save it as a JPEG, the transparent area will be saved as white.

In Photoshop, there are two flavors of PNG -- the PNG-8 and PNG-24. The PNG-8 works just like a GIF. You are limited to 246 colors and one of those colors can be transparent. PNG-24 on the other hand can have millions of colors, and can have 256 degrees of transparency. That means that you can fade the edges of your images or use anti-aisling to make them look smoother.

As you would expect, PNG-24 files are much bigger than GIFs, JPEGs, or PNG-8s.

Very old versions of Internet Explorer for windows do not support PNG at all,. IE 5.5 supports PNG-24 alpha transparency, but only with a javascript hack. Version 6 and 7 support PNG-24 transparency but still have a few minor bugs.

You are correct that you can make rounded corners using CSS and javascript, an it is not especially hard, but it is not for the beginner.

So how do you get the corners rounded so that you can save it as a GIF or PNG?

If your image is on the Background layer in Photoshop, you will need to change the name of the layer.
PS will not let you make anything transparent on the Background layer.

If you double click the Background layer in the layers pallet, the layer info dialogue box comes up with the default layer name Layer 0. You can click okay, or change it to something different.

Now, go to your Custom Shape Tool and select the Rounded Rectangle Tool. In the Options Pallet at the top of the screen, you will have three options, "Shape layers", "Paths", an " Fill Pixels". Select the middle one, "Paths"

Also in the Option bar is the Radius setting. This controls how round the corners are. Try out different setting until you find the one you like.

Now click on one corner of your image and drag to the opposite corner. If the path outline is not the size and shape that you want hit Esc and start over.

Otherwise hit Ctrl+Enter to turn your path into a selection.

Then hit Ctrl+I to inverse your selection.

Hit the Backspace key to delete the area outside path.

That's it.

Now go to Edit>Save for web & devices, to see a preview of your image as a GIF or PNG. Be sure to look for the checkerboard background pattern in the preview to make sure that the transparency is being preserved.

good luck,

David B.
0
 
LVL 26

Expert Comment

by:David Brugge
ID: 21798863
In the mean time, my fellow "Experts" are trying to explain the same thing here:
http://www.experts-exchange.com/Software/Photos_Graphics/Images_and_Photos/Adobe_Photoshop/Q_23479724.html
0
 
LVL 1

Author Comment

by:max7
ID: 21810079
D_Brugge:  thank you so much for responding to my question and my apologies for not responding sooner; I am right in the middle of doing some major website updates and on a deadline.

I will try out your instructions in the next couple of days and if I have any problems, post again to troubleshoot.  Thanks again!
0
 
LVL 26

Expert Comment

by:David Brugge
ID: 21818307
I understand completely. Take all of the time you need and let me know if I can help more
0
 
LVL 1

Author Comment

by:max7
ID: 21838165
>>>Then hit Ctrl+I to inverse your selection.

Hit the Backspace key to delete the area outside path.

When I do this, the area that I want to keep and have rounded corners is cut out and what remains is a transparent background with rounded corners surrounded by the rest of the image I didn't select.  I attached the result for you to review.  What I am doing wrong?

>>>In the mean time, my fellow "Experts" are trying to explain the same thing here:

I check this solution out and I was able to make it work.  Is there any advantage in using the Vector Mask vs the method you've given me here?
0
Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

 
LVL 26

Expert Comment

by:David Brugge
ID: 21838206
>>>Then hit Ctrl+I to inverse your selection.

>>>Hit the Backspace key to delete the area outside path.

>>>When I do this, the area that I want to keep and have rounded corners is cut out and what remains is a transparent background with rounded corners surrounded by the rest of the image I didn't select.  I attached the result for you to review.  What I am doing wrong?

One of us has made a mistake and it is very likely me. If you hit delete and everything that you want to keep disappears and the stuff that you want to disappear stays, then the wrong selection is made.

Try it again without the Ctrl+I; which is to say, don't reverse the selection. Whenever this happens, it an easy fix to Crtl-Z to undo what just happened and Ctrl+I again to reverse your selection and then delete the other part.

>>>I check this solution out and I was able to make it work.  Is there any advantage in using the Vector Mask vs the method you've given me here?

Different methods to achieve the same results. The method yarunni is a very good, very professional method. It has the advantage of your being able later to come back and modify or undo the area that was clipped off.

It's a little bit more complicated to do and so I don't use it for beginners. If you can follow it and it works for you, by all means use her method.

Have fun.
0
 
LVL 26

Expert Comment

by:David Brugge
ID: 21838212
I've got to start proofing my responses before I hit "Submit"  Please forgive my many typos.
0
 
LVL 1

Author Comment

by:max7
ID: 21838538
>>>Try it again without the Ctrl+I; which is to say, don't reverse the selection.

I tried it again and following your instructions, I did not do ctrl+I but it still ends up deleting the part I want to keep to transparency!  I believe I am following your instructions correctly each time but I also believe it is more likely that, based on level of experience, I am the one making the mistake here.  Any ideas where I am going wrong?

>>>I've got to start proofing my responses before I hit "Submit"  Please forgive my many typos.

I am the worst with this!  No trouble whatsoever.
0
 
LVL 26

Accepted Solution

by:
David Brugge earned 500 total points
ID: 21838828
Let me start over somewhat and see if I can make the steps easier to understand.

You want to start with an image that is not on a layer named background, so that you can make areas transparent.

Then you want to make a selection with rounded corners. Because you can't make rounded corners with the marquee tool, you have to use the shape tool and convert the path to a selection...
RC-step-1.jpg
RC-step-2.jpg
RC-step-3.jpg
RC-step-4.jpg
RC-step-5.jpg
0
 
LVL 1

Author Closing Comment

by:max7
ID: 31467805
>>>What you want to do is INVERSE the seletion so that the area OUTSIDE is now selected.  You do this by pressing Ctrl-I

Actually, when the same problem continued to happen again (i.e. the part I want to save actually gets deleted) I searched under the 'Select' menu option and found out that Inverse is SHIFT+Ctrl+I and not Ctrl-I.  Perhaps we have different version of PS?

The trim transparent pixels was a great tip, something I never would have thought of.  Thanks your help!
0
 
LVL 26

Expert Comment

by:David Brugge
ID: 21839844
I have to laugh at myself.

I use Photoshop so much that using the keyboard is very much like an experienced musician playing the piano. He doesn't see the note on the music and say "Ah, that is F Sharp, and F Sharp it the Black Key above the F key which is  three keys above C and so I'll press it with my third finger...."

Instead, he sees a shape on the page, his third finger twitches and the note is struck, and he moves on.

When I write tutorials I have to keep Photoshop open, usually because I have no idea where the command to do something is in the menu, and because I have to pay attention to what key combination I press when I do something.

When I read your comment, the first thing that I did was go through the motion of inverting a selection - Well I'll be...I DO hold down the shift key when I press the Ctrl and the "I"...I never noticed.

Thanks for finding the correct answer on your own, thanks for pointing it out, and thanks for your patience and for the gracious grade.
0

Featured Post

Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

Join & Write a Comment

In this article, I'll explain how to change the color of a selection in Photoshop. I'm sure there are a couple different ways to do this in photoshop, but this is my preferred method in Photoshop. I am using Photoshop CS6 and I will be adjusting the…
Many programs have tried to outwit PowerPoint in terms of technology and skill. These programs, however, still lack several characteristics that PowerPoint has possessed from the start. Here's why PowerPoint replacements won't entirely work for desi…
In this Micro Tutorial viewers will learn the basic shortcuts and functions in InDesign.
In this Micro Tutorial viewers will learn how to remove an unwanted object using Photoshop’s feature known as content-aware fill.

760 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now