Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Turning white pixels transparent and getting clean edges in Photoshop CS3

Posted on 2008-10-12
3
Medium Priority
?
2,504 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
[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
3 Comments
 
LVL 9

Accepted Solution

by:
Sci-Fi-Si earned 1000 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 1000 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

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

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.
Dramatic changes are revolutionizing how we build and use technology. Every company is automating, digitizing, and modernizing operations. We need a better, more connected way to work together as teams so we can harness the insights from our system…
The purpose of this video is to demonstrate how to set up the permalinks on a WordPress Website. This will be demonstrated using a Windows 8 PC. Go to your WordPress login page. This will look like the following: mywebsite.com/wp-login.php : Go t…
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.
Suggested Courses

688 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