Solved

Turning white pixels transparent and getting clean edges in Photoshop CS3

Posted on 2008-10-12
3
2,483 Views
Last Modified: 2013-12-20
I have a gif with a white background, and I want to turn all the white pixels in that gif transparent.  I followed the advice of the accepted solution in this thread:

http://www.experts-exchange.com/Software/Photos_Graphics/Images_and_Photos/Adobe_Photoshop/Q_23220932.html

Unfortunately there were off-white pixels that stood out against non-white backgrounds, making the whole thing look messy.  Does anyone have any suggestions as to how I can clean up these edges?

Thanks
0
Comment
Question by:deafpanda
3 Comments
 
LVL 9

Accepted Solution

by:
Sci-Fi-Si earned 250 total points
ID: 22696991

I find if the image you are trying to blend in with a different background colour than the one it was originally rendered to looks bad, you can do:

1. Select > Load selection (this will select the outline of your image)
2. Select > Modify > Border (I use 2 for the width, depending on size of image)

You then might want of adjust the Opacity to 50% or whatever looks right.
Once your image looks smooth in Photoshop, you can make it look just as good in a browser by uning the .png 24 image format - this format preserves the Alpha channel of the image and avoids the problem of .gif's where it is either transparent/not transparent and leaves a nicely blended image identical to how it looks in Photoshop.

3. File > Save for Web & Devices (your save options should have GIF, JPEG, PNG-8, PNG-24, WBMP) select PNG-24 and save the image.

Voila.

All the best
Sci-Fi Si
0
 
LVL 26

Assisted Solution

by:David Brugge
David Brugge earned 250 total points
ID: 22699997
(just to expand on what Sci-Fi Si said...

There is a lot of old, outdated advice out there that tells you to that if you want transparency on a web site you have to use a gif.

While it it true that in the old days, browsers only supported gif and jpeg's, today, all modern browsers support PNG files as well (but beware because not everyone is using a modern browser yet).

As Si-Fi pointed out on his excellent suggestion, 24 bit PNG files will let you have files that will taper off at the edges so that it blends with the background. (as you found out, GIF files chop off at the edges leaving semi-transparent pixels still showing and the edges jaggy.)

24-bit PNG files are definiately the way to go to get smooth transparent edges. However, if the person viewing your site is using Internet Explorer 6 or earlier, the transparent areas will appear gray. There is a java code fix that you can apply to your web site which will make IE 6 and IE5.5 render 24-bit PNG files correctly.
0

Featured Post

Efficient way to get backups off site to Azure

This user guide provides instructions on how to deploy and configure both a StoneFly Scale Out NAS Enterprise Cloud Drive virtual machine and Veeam Cloud Connect in the Microsoft Azure Cloud.

Question has a verified solution.

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

Color can increase conversions, create feelings of warmth or even incite people to get behind a cause. If you want your website to really impact site visitors, then it is vital to consider the impact color has on them.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
Illustrator's Shape Builder tool will let you combine shapes visually and interactively. This video shows the Mac version, but the tool works the same way in Windows. To follow along with this video, you can draw your own shapes or download the file…
The is a quite short video tutorial. In this video, I'm going to show you how to create self-host WordPress blog with free hosting service.

828 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