Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

Circle Crop for Adobe Photoshop CS 8.0

Posted on 2005-04-05
10
Medium Priority
?
8,031 Views
Last Modified: 2013-12-16
I have a photo on my web page that is very squareish and want to either circle crop it or round the edges.  I have the file saved as both a pdf and jpeg.  I am working on a laptop and my freehand skill are not good at all.  Is there a crop tool that is a circle or elipse.  Or is there possibly a tool that I can use to round the edges.

Thanks for the help in advance.
0
Comment
Question by:rngrfan
  • 4
  • 3
  • 2
  • +1
10 Comments
 
LVL 5

Expert Comment

by:freeman118
ID: 13709893
U could use the vector mask tool. Create a new file in photoshop with the dimensions of your image and paste it into this file as a new layer. With that layer selected, go to Layer->Add Vector Mask->Hide All, don't worry if your image disappears. Then grab the vector shape tool(9th row on the tool bar next to the pen tool). Press and hold the shape tool(a square), and more shapes will pop up, select the rounded rectangle tool(or elipse tool if u want a circle). Then, making sure your new mask is selected on the layer pallette, draw out your round rectangle along the borders of your image, u may want to use the grid to help u align things(ctrl+", Edit->Preferences->Guides, Grid and Slices, to adjust its size), u can also set the radius of the corners for the rounded rectangle; when u select the tool its tool options will appeare at the top of the screen, in the radius box choose how big you want the rounded corners to look. Once u have drawn your rounded rectangle or circle, the part of the image in the cricle or rectangle should reappear, and voila thats it, a nice rounded image.
0
 
LVL 3

Accepted Solution

by:
C_Chambers earned 500 total points
ID: 13710534
One way to accomplish this is to click and hold on the rectangular marquee tool (top left in the toolbar) . . . in a few seconds you will have the option to change the shape.  Pick the oval, and then click and drag around the area you want to keep. If you want feathered (fading) edges, you can pick that now on the menu at the top. Now, press <CTRL-J> to make a new layer from your selection, and delete the old layer. Now you can Save As, and change the format to PNG with transparency selected, and you should have the effect you are looking for.

Please let me know if you need clarification on anything or it is not working for you.

Chuck
0
 

Author Comment

by:rngrfan
ID: 13712831
Chuck your idea was fine with one exception.  Now when the photo is upload there are white edges instead of my web background showing through.  I did save in PNG format with transparency selected.  Is there a way to delete the checkered background  to make it truly a circular photo.
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
LVL 5

Assisted Solution

by:freeman118
freeman118 earned 500 total points
ID: 13712923
If ur looking to make an image with a transparent background, its important to realize that IE only supports 1bit alpha channels(transparency). If u want a transparent background with a smooth transition(without a jagged coloured edge) u need full alpha channel support, see this thread: http://www.experts-exchange.com/Web/Graphics/Photoshop/Q_21372850.html#13697485
for more info.
0
 
LVL 17

Assisted Solution

by:Lobo042399
Lobo042399 earned 500 total points
ID: 13723369
Hi mgrfan,

First, there's no way to make an image file to be other than rectangular. You can add transparency to a selected area to make it look like the image is a circle or whatever other shape, but the file itself will always be a rectangle. Now, about PNG, problem is that IE doesn't support the transparency in it; so a PNG with transparency will show fine in Netscape or Firefox or Opera, but in IE the area that's supposed to be transparent does show as white or light blue (or some other random colours).

That leaves you with two options: make the background transparent and save your image as a GIF, which will give it very rough edges; or make the background the exact same colour as your page's background, so that even though there is no real transparency it will look as it there was.

Good Vibes!

Lobo
0
 
LVL 5

Expert Comment

by:freeman118
ID: 13723415
Yeah, IE does not natively support full png transparency, but there is a work around:  There is a way to make PNG transparency work in IE: http://webfx.eae.net/dhtml/pngbehavior/pngbehavior.html
You can also use Flash to accomplish the same thing, as I mentioned in the other thread I posted a link to.
0
 
LVL 17

Expert Comment

by:Lobo042399
ID: 13723730
You can import a PNG into Flash use a background colour as a background layer and then Publish the whole thing as a SWF...  except that... for some weird reason the colour of the background under the transparent areas does shift slightly. This would make the Flash unusable since the background rectangle would be of a different colour than the page background colour.

The link didn't work here, btw.
0
 
LVL 5

Expert Comment

by:freeman118
ID: 13725152
Ok, let me start again. If u are looking to create images on your page that have transparent backgrounds(say for that rounded image, or any other irregular shaped image), you have two main approaches:

1. You can either use a PNG file, with the IE work around, so that it is displayed correctly(http://webfx.eae.net/dhtml/pngbehavior/pngbehavior.html, this link works fine for me, or did u mean the EE link? That also seems to work for me). Here is the same info from MSDN: http://msdn.microsoft.com/library/default.asp?url=/workshop/author/filter/reference/filters/AlphaImageLoader.asp

2. You can use Flash to produce Flash movies/swf files that have transparent backgrounds(not just in flash, but on the webpage too.), see here for more: http://www.macromedia.com/cfusion/knowledgebase/index.cfm?id=tn_14201
This is accomplished by either importing a PNG with transparency(alpha channel) into Flash and publishing it with the html code for transparent backgrounds(described by the macromedia link), or by importing an image(any kind) and its mask into Flash and publishing the same way as the PNG. You can then stick this html into a <DIV> layer and you can increase its z-index and place it above your other html layers, and have a nice smooth transparent effect, with what ever was behind the layer showing through the transparent areas properly, no jagged edges.

I hope that is clear enough.
0
 

Author Comment

by:rngrfan
ID: 13727377
Well I dont have flash and would have no clue how to use it so that option doesnt work for me.
Changing the background would be tough for me to line up because of the pattern.

I thought there would be an easy solution but most of this is way over my head and I think the square picture isnt that bad after all.  Maybe one day when I have a few hours to play around I will try it again.

I am going to increase pts and split because you all gave me valuable input.

Thanks
0
 
LVL 17

Expert Comment

by:Lobo042399
ID: 13729873
Thanks rngrfan. Glad to be of help.

Good Vibes!

Lobo
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In this short web based tutorial, I wanted to show users how they can still use the powers of FrontPage in conjunction with Expression Web 3.  Even though Microsoft eliminated the use of Web components, we can still use them with FrontPage and edit …
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…
The purpose of this video is to demonstrate how to reset a WordPress password if you are locked out and cannot reset the password. A typical use would be if you cannot access the email to which WordPress would send the password recovery email to…
The purpose of this video is to demonstrate how to set up an RSS Feed on a WordPress Website. This will be demonstrated using a Windows 8 PC. Feedburner will be used for this demonstration. Go to your WordPress login page. This will look like the…
Suggested Courses
Course of the Month11 days, 21 hours left to enroll

564 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