Design & Publishing . / . WEB . / . PixelSmith

Mr. Pixelsmith Selecting Color for Transparency

...from the letters department:

Scott writes in with questions about
Transparency by choosing colors

Hello, Do you know how I can make a background transparent by 
choosing the whole color?  For example, you know how you can 
change any color to a different color in any part of an image by using the 
REPLACE COLOR command (Image>Adjust>Replace Color).  
    Well, can you choose what you want to be transparent by similar means?  
I know you can make colors transparent by using CLEAR on the Paint 
Bucket tool, but It would take forever to get all the areas with that certain 
color transparent because it is in so many spots. 
   To help understand my question better, I have attached a graphic image.  
Its background is black and I want to make all black color to 
transparent in one step.  
How can I do this?   Thanks
Scott, this is actually a two-part project when it comes to an image like the one you've selected. You never said what the target background would be, but let's assume it's very different from BLACK. (Here's a look at the original image)
__ I always recommend creating transparency over the color you intend to utilize as your background color. This way you don't get the antialiasing problem you're facing in this scenario.
.
First, let's talk about the SELECT > Color Range dialog.
.
Not much has changed in Photoshop 6 with this dialog -- thank goodness -- so you'll probably get the hang of it right away. (Click to open the Dialog in a separate window)
__ When you first open the file, convert to RGB, and open the Color Range dialog. Set the pull-down for "Sampled Colors" because you'll be using the Eyedropper tool to pick the color BLACK. Initially you'll want to start with a color range of '1'. In the preview window you'll see the selected areas of the image. Now, slide the slider and watch the file as the selection tightens around the image.
__ If you want, you can zoom in and use the PLUS Eyedropper (#6) to add to the selection pixel by pixel... but that's very tedious, and you'll almost always miss a color. The idea here is to get the colors selected which will be transparent later.
.
Now compare...
.
In the first image (below) you see the results of selecting BLACK as a single color. You'll note how pixelated the image is, and that's not what you want.

Step 1: Test in QuickMask
For the sake of discovery, go ahead and double-click on the QuickMask button in the tool box. The QuickMask Options dialog will appear, and you want to make sure you choose "Selected Areas" as what the mask will represent. Looking at your image, the red QuickMask (tile #2 above) lets you see there is a lot of black halation around the selection areas. Clicking back to normal mode, let's see if we can fine tune that selection a bit more.
.
Step 2: Broaden the 'range', tighten the selection
Back in our image again, pull out the SELECT > Color Range dialog again. This time move the slider until it moves up to "16" -- notice what happens to your selections. As you see in tile #3 above, we've selected more of the black.
__ Play with the slider until it looks like you've selected enough of the black areas without infringing on the actual objects themselves. This is a tough decision because you won't know the results until you test it.
.
Step 3:Test in QuickMask Again
Once you're satisfied, try the QuickMask again. As you see in tile #4 above, you now have more of the background selected. I cheated a bit by applying a one-pixel feather to the mask further antialiasing it to soften those jaggies.
.
Step 4: Now it gets easy.
Open the file in ImageReady. In the Layers Palette you should see your image along with its QuickMask ready for action. If additional areas need to be added to the transparency range you can do that with the paintbrush or other tools.
__ Now choose WINDOW > Show Optimize to launch the Optimize Palette. Adjust to the appropriate settings and then select FILE > Preview In, your browser.
__ If it looks good, then simply return to ImageReady and say FILE > Save Optimized.
.



Design & Publishing . / . WEB . / . Pixelsmith


If you've got a tip or trick you'd like to share, or if
you'd like Mr. Pixelsmith to answer some of your questions, feel free to
contact us!

Graphic Design .com The Design Center is a spam free website.Thank you for visiting today...
This is the Web Design & Review Web site at: http://www.graphic-design.com/Web/
Copyright 1997, 1998, 1999, 2000, 2001 WebDesign & Review, all rights reserved.

Thank you for visiting WebDesign & Review at http://www.graphic-design.com/web/ Notes: The screen shots herein represent the copyrighted works of their respective owners, and are used here for editorial demonstration purposes. Permission has been granted to display and review all sites in WebDesign & Review by the website owners. Not all areas of the online environment allow special characters such as the registration and trademark marks. This file will alert you to proprietary works that cannot be duplicated or distributed. Copyright 1996, 1997, 1998, 1999 Showker Graphic Arts, for the The Design & Publishing Center, ALL RIGHTS RESERVED. WebDesign & Review, Pixelsmith, WebEye are all trademarks for The Design & Publishing Center. Other products mentioned in these pages are the registered trademarks of their respective owners.
The Design & Publishing Center and WebDesign & Review are Affiliates of The Graphic Design Network. Other Affiliates include: 60 Second Windows, News - Serve Network, The DTP Jumpstation, Photo Warehouse dot com, The Designers' Bookshelf, The User Group Network, The User Group Academy, Office Products, Furniture Systems dot com, Solace, Harrisonburg.org, Shenandoah.org, SVTA.org, Guitar Picks Online, all of which are hosted at RICA.net -- copyright 1994 - 2000, The Graphic Design Network, Showker Graphic Arts & Design, Harrisonburg, VA. Trademarks and Legal Properties Statement