Join Chris Converse for an in-depth discussion in this video Adding transparency to web graphics, part of Design the Web: Slice Tool.
- View Offline
Now to introduce transparency into our web graphics, we'll need to do a few things. First, we need to set our background to be an unlocked layer. So, on the Layers panel down here you'll see that Background has a padlock on it. If we double-click this, this'll bring up a dialog box which will allow us to convert this into a regular layer. (SOUND) Let's click OK. Now with that background layer converted let's come up and select the Marquee selection tool. Let's come over to the canvas, marquee a selection around the entire slice for the barrel, then hit Delete. Now we'll see the checkerboard in the background.
Next let's come over to the clip layer where the barrels smart object is being clipped into. Let's come down and apply a layer mask to this. Now I'm going to zoom up here. Now with the Layer mask selected let's come over here to the tools and select the Paintbrush tool. Let's make sure that we have a round brush with a hardness of something higher than 95. Let's click return and then make sure that we have black on the foreground for our color swatch. Now we can come over to Canvas and start painting out the background.
Now, I'll speed the video up here so you don't have to watch me painting all of this out, but once we're done, we'll see that we have the entire background of the barrel's graphic masked out. Let me zoom out. Next, we'll come up to the File menu, choose Save For Web. Now inside of this dialogue box, let's select that first slice. Now, Photoshop remembers that we wanted to use a JPEG file format. However, JPEG files cannot have transparency in them. Now, the only two web graphic formats that support transparency are GIF and PNG files. Now, one of the limitations with a GIF file is that it can only have one color of transparency.
I can't have semitransparent pixels to give us a smooth edge. So when we pick a GIF file, we'll have to pick what's called a Matte color. In this case with this graphic here, we can see that the Matte color is white. So what happens is all of the semi-transparent pixels get flattened against white. Now JPEG in the center here don't support transparency. And then ping 24 files can have semi-transparent pixels. So this gives us all of the advantages of a 16 bit JPEG image. With eight bits of transparency effects, very similar to what we do inside a Photoshop with layer masks. Now, the advantage of a GIF file is that the file sizes are really small.
This graphic here would only be 5.7 kilobytes. The center JPEG file would be 22.9 and the 24 bit PNG file would be 34.7 kilobytes. Now, you'll also notice that I listed PNG-8 next to GIF. When you use PNG-8 in Illustrator and Photoshop, they cannot create semitransparent pixels inside of a PNG-8. However, a PNG-8 file can have semitransparent pixels. Now, if you have access to Adobe Fireworks, a Fireworks can create a PNG-8 with semi transparency. And I can show you step-by-step how to do this in my Edge Animated Essential Training Course inside of Chapter three.
And now back in the Photoshop file with our slice selected, let's come over here and choose the GIF File Format. going to zoom up here. So now we can see the matte color for this is set to white. We can come in here and set this to black, for example, and we'll see a live representation of what that haloing effect or the matte color looks like on that graphic. This is also a nice technique to make sure that you've gotten all the transparency here, where I can see I've missed a few spots painting out that mask. Or you could also click on the matte and come in here and pick any color.
So if I pick red, for example, we can see that matted against red. But with this selected, let's come over and choose PNG-24. (SOUND) Again, we can see all those semi-transparent pixels that we just looked at in that last slide. So I like the PING 24. With this selected, let's come down and choose Save. Now from this dialog box under Slices I'm going to come down and choose Selected Slices so I don't overwrite the table.jpeg file. Next let's hit Save.
Now on the desktop I can see I have a PNG-24 file with all of the transparency in place from that layer mask.
This course was created and produced by Chris Converse. We're honored to host this content in our library.