Join Jan Kabili for an in-depth discussion in this video Working with transparent graphics on a solid background, part of Photoshop CS5 for the Web.
When you optimize a transparent graphic for the web, the trick is to make its edge appear smooth, rather than jaggedy, against a web page background. In this movie, I'll show you how to do that against a solid color web page background. I'll open this transparent graphic in the Save for Web & Devices window to optimize it for the web. I'll zoom in, so you can see the edges of the graphic more clearly. In the PSD file, you can see that the edges have pixels at varying levels of transparency due to anti-aliasing, and that's what makes the PSD file look so smooth. But in the GIF preview on the right, the edges of the graphic are jagged.
That's because this is a preview of a GIF file, and the GIF format doesn't support multilevel transparency like PSD does; instead, every pixel in a GIF is either fully opaque or fully transparent like these, and the same is true for the PNG-8 format. The challenge is to make the jagged edges look smooth on the GIF or the PNG-8, when placed against a web page background. The beauty of optimizing in this window is that I can preview how this image will look on top of a page background from Save for Web & Devices, and the page background on which I want to preview is going to be the same color that I plan to use when I build my real web page.
I'll start by choosing a color in this small box on the left, which is called the Eyedropper Color box. I'll click that box to open the color picker. In the color picker, I'll drag these sliders up until I start seeing some color. Now, I have my color picker set to display only web colors. You don't have to. I'm going to select this de-saturated orange, and then I'll click OK, and you can see that orange now here in the Eyedropper Color box. The next step is to set up a page background using this eyedropper color, against which I can preview my transparent graphic.
To do that, I'll go to the Panel menu at the top right, and I'll choose Edit Output Settings. In the Output Settings dialog box, I'll go to the second menu, and from there I'll choose Background. I want to preview this transparent graphic as a foreground image against a page background, so I'll choose View Document As Image. I'll ignore the Background Image field here. That only comes into play if I'm going to use an image file rather than a solid color as my page background. The Color field is an important one.
This is where I set the color of the page background against which I'm going to preview. I'll change the Color field from its default of None to Eyedropper Color, which is that orange that I selected in the Eyedropper Color box a moment ago, and then I'll click OK. I'm going to leave all of the optimization settings as they are for now, but do notice in particular that Transparency is checked, and that's important in order to preview the GIF as a transparent image against a background. Notice that the Matte field is set to its default of None, which I'll explain more about in just a moment.
First, I'd like to see how this optimized GIF looks with these default settings against that orange background. So I'll click the Preview button, and that opens my web browser, where I can see the graphic against that orange background. Notice that the edges look really jaggedy. To fix this, I'm going to go back to the Save for Web & Devices window. And in the Optimization settings, in the Save for Web & Devices window, I'm going to go to this Matte field, and instead of its default of None, I'm going to set the matte color to the eyedropper color too.
This is that same orange, to which I set the web page background a moment ago, and in the GIF preview, you can see that the edges of the graphic have been filled in with that orange color. Now, when I preview, the image looks smooth against the orange background, and if I zoom in, you can see that that holds up even when I'm looking this closely at the graphic. So that's how it's done. I'm really satisfied with this result. So I'm going to close the web browser, and go back to the Save for Web & Devices window, where I'll zoom back out to 100%.
At this point, I could tweak the GIF settings here to try to get the file size down, but for this lesson, I'm just going to leave them as they are and click the Save button, and in the Save Optimized As window, I'll navigate to the location where I want to save the image, and then I'll go down to the Format field. I'll leave Format set to its default of Images Only. I could have Photoshop write the HTML code that includes the orange background, but as I've explained in other movies, it's preferable to build pages with CSS in a site building program than to use Photoshop's deprecated HTML.
So I'm going to leave Format at Images Only and click Save. Now, out on the Desktop, I'll find the GIF that I just saved and open it in Photoshop, and you can see that this GIF does have orange along its edges, and that's the trick that will make it appear to blend perfectly with the background of the same color when it's added to a web page in Dreamweaver or another site building program. This same technique for optimizing a transparent GIF will also work against some pattern backgrounds, as I'll show you in the next movies in this chapter.
- Customizing a web workspace
- Coloring web graphics
- Optimizing images as JPEG, GIF, or PNG files
- Creating background graphics for sites
- Working with transparency
- Building navigation bars, buttons, and rollover graphics
- Designing web page mock-ups
- Adding animation
- Automating web-related tasks in Photoshop
- Integrating with the rest of the Adobe Creative Suite