Starting with a non-transparent graphic

You may be wondering where the transparent pixels in a transparent web graphic come from.…Of course, you could design your original source file, usually a PSD file, with…transparent areas, but often you're inheriting your graphic from somewhere else…that doesn't have any transparent pixels in it.…So if you're starting with a source file like this one, that has no transparent…areas, it is possible to leave the source file as is and remap some of its…colors to transparency as you're optimizing a copy for the web.…Here's how that's done.…I'm going to open this image in the Save for Web & Devices window.…

Over here on the left is the original PSD, and over here on the right is a copy…of the image as it will look optimized as a GIF.…I'd like to eliminate the purple all around the orange part of the image and in…between this black line and the orange part.…So I'll get the eyedropper, and I'll move into the GIF preview, and I'll click on purple.…Over in the Color Table, you can see this purple color chip is highlighted.…

Resume Transcript Auto-Scroll

Author

Released

7/13/2010

In Photoshop CS5 for the Web, author Jan Kabili shows a wide range of optimal uses for Photoshop in the web graphics workflow. This course shows the most efficient ways to optimize images so that they maintain quality and download quickly in a browser, the why and the how of image slicing, and practical techniques for designing web page layouts, page backgrounds, navigation bars, and buttons in Photoshop. Exercise files are included with the course.