Solved

Turning white pixels transparent and getting clean edges in Photoshop CS3

Posted on 2008-10-12
3
2,473 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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

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…
An enjoyable and seamless user experience can go a long way on an eCommerce site. While a cohesive layout and engaging copy play roles in creating a positive user experience, some sites neglect aspects that seem marginal but in actuality prove very …
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
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.

910 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

20 Experts available now in Live!

Get 1:1 Help Now