?
Solved

Circle Crop for Adobe Photoshop CS 8.0

Posted on 2005-04-05
10
Medium Priority
?
8,028 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Optimize your web performance

What's in the eBook?
- Full list of reasons for poor performance
- Ultimate measures to speed things up
- Primary web monitoring types
- KPIs you should be monitoring in order to increase your ROI

 
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

Free Backup Tool for VMware and Hyper-V

Restore full virtual machine or individual guest files from 19 common file systems directly from the backup file. Schedule VM backups with PowerShell scripts. Set desired time, lean back and let the script to notify you via email upon completion.  

Question has a verified solution.

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

Objective of This Article In 1990’s, when I was a budding software professional, I had a lot of confusion about which stream or technology, I had to choose to build my career. In those days, I had lot of confusion like whether to choose System so…
Originally, this post was published on Monitis Blog, you can check it here . It goes without saying that technology has transformed society and the very nature of how we live, work, and communicate in ways that would’ve been incomprehensible 5 ye…
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…
I designed this idea while studying technology in the classroom.  This is a semester long project.  Students are asked to take photographs on a specific topic which they find meaningful, it can be a place or situation such as travel or homelessness.…
Suggested Courses
Course of the Month13 days, 13 hours left to enroll

801 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