Masking corners on round picture

AH
Posted By
Allan_Howell
Jul 18, 2008
Views
309
Replies
13
Status
Closed
Good Evening,
I’m very new to the photoshop product and am trying to create a project. I have a round graphic contained in a square. I need to mask the corners around the picture so they won’t show white when I cut and past the picture to my website. I would like the colors from the website to show instead. Could someone please direct me to a tutorial describing this procedure? Thanks in advance for your time.

How to Improve Photoshop Performance

Learn how to optimize Photoshop for maximum speed, troubleshoot common issues, and keep your projects organized so that you can work faster than ever before!

S
Silkrooster
Jul 19, 2008
First thing to check is if there is any white in the picture it self. If the answer is no then you can use save for web and select the gif option and specify white to be transperent.
If the answer is yes, then you have two options. One is to change the white to another color preferably the same color as your website background. Now you can either just save as a jpeg or make that color transparent in a gif.
The other option is to remove the white background and use save for web but this time use the png format.
The catches – With gif you can only specify a single color that can be transparent and if that color is different than your webpage background you will more than likely see some fringing.
Using jpeg will only work if the background color matches exactly with the wbpage background, because jpeg does not support transparency.
The png format supports transparency and multiple colors as it uses the alpha channel. However Internet Explorer 6 and earlier do not support transparency when they render a png file.
The choice is your on where to go, hopefully other will give more advice on this issue.
P
Phosphor
Jul 19, 2008
"However Internet Explorer 6 and earlier do not support transparency when they render a png file."

There’s a simple javascript fix that will enable PNGs to display transparency properly in IE 6 and earlier. Have a careful read at the following link:

<http://homepage.ntlworld.com/bobosola/>
DM
dave_milbut
Jul 19, 2008
However Internet Explorer 6 and earlier

time to stop living in the past. 🙂

seriously though, IE 8 is due out soon. I hear ya, we’re still using IE 6 at work as the default browser, but we’re nearly done eval’ing IE7. sometimes it takes something drastic for people to move, sometimes it’s a whole lot of little things piling up.
AH
Allan_Howell
Jul 20, 2008
Thank you for your responses. Would your recommendations change if I wanted to past the picture to marketing materials such as a brochure? Thanks!
DM
Don_McCahill
Jul 20, 2008
Would your recommendations change if I wanted to past the picture to marketing materials such as a brochure?

Oh yes. You wouldn’t want to use GIF or JPG for that purpose. You would need a TIFF or PSD file with a resolution of at least 200 dpi, 300 for top quality work. In this case you would use an alpha channel for masking the image to a circle. (And make sure that the DTP application used can accept such a file.)
AH
Allan_Howell
Jul 20, 2008
Could you please offer a workflow of processing this project? Thanks!
P
Phosphor
Jul 20, 2008
First thing you need to reveal is what application you’ll be using to put together the brochure.
AH
Allan_Howell
Jul 20, 2008
I found I wasn’t sure how to complete this when I was building a brochure in the vistaprint.com template builder. I hadn’t really considered further what application. Any suggestions on which would be best?
JJ
John Joslin
Jul 20, 2008
You need to read the instructions in Vistaprint.

I had some calendars made by them (they were excellent) and they were quite specific about file formats, sizes and resolution.

The point that has been made is that the web does only support transparency in certain file formats and a printed brochure is a totally different animal.
I
ID._Awe
Jul 20, 2008
Allan: Which DTP are you using for the brochure? I can give a quick workflow for print & web.
AH
Allan_Howell
Jul 20, 2008
I apologize, I currently have the Adobe Master Collection CS3. Right now, I have the file I’m trying to manipulate in PS but can use illustrator or any of the other products you might suggest.

I have read the instructions in Vista Print, they don’t offer advice on how to add a picture that will white corners of a round picture to be transparent so that it blends with the colors already present in there templates. Thanks!
P
Phosphor
Jul 20, 2008
InDesign is the way to go if you have the Master Collection.
I
ID._Awe
Jul 20, 2008
What you should do is create the image file in PS on a layer so you can get transparency and you can place the PS file directly into InDesign with full transparency available. Then, if you have a solid background on the web site, get the background color number and place a solid fill on a separate layer beneath the image, then use SFW as .jpg, and place into the website. You can toggle the solid background layer view off and on, so that you can turn it off so the transparency will show in InDesign and turn it back on for export for the web.

I do this on a regular basis, right now for a site & print material I am creating for a client.

How to Master Sharpening in Photoshop

Give your photos a professional finish with sharpening in Photoshop. Learn to enhance details, create contrast, and prepare your images for print, web, and social media.

Related Discussion Topics

Nice and short text about related topics in discussion sections