PNG-8 with Adobe Generator and Fireworks - Photoshop Tutorial

Now, in this video, we're going to take a look at ways that we can create a PNG-8 file with Photoshop and Fireworks. So, first let's start with Photoshop. So, inside the Exercise files, let's go into the Photoshop file folder and let's open up logo.psd up in Photoshop. Now traditionally, the way that we create web graphics in Photoshop is to use the Save for Web feature. To do that, we would come over to the Background panel, hide the background so that we can see the checkerboard, then come up to the File menu, come down and choose Save for Web. Now, the problem with Photoshop and Illustrator, at the time of this recording, is that we cannot create varying transparency with PNG-8 with the save for web dialog box. So, what happens here is, we come up to our settings, I come down and choose PNG-8. And what happens here is I can only have one bit of transparency associated to the PNG-8 file. So I can see this background graphic here, which is actually white, which is the matte color for this particular graphic. If I come over here and change the matte color from white over to black, you can see these showing up here on the corner as well. Now, what's happening here, as we can see in the color table, we only have one actual color that can be transparent. And, this is the same limitation we have with transparent GIF files. So what the matte color actually does is it takes the varying transparent pixel and it flattens it against that particular matte color. So in this case, if we take all of our varying transparent pixels and matte them to white, when this graphic shows up against a white background, it looks perfect. Similarly, if we take all of those varying transparent pixels and matte them to black, the logo will look perfect over a black background. The problem comes in when we have varying colors in our background, such as a gradient, or even a photograph. Now, we can see that no matter what matte color we set, we're not going to get that smooth transition in the background. So, back in Photoshop in the Save for Web panel, let's come down and click Cancel. To create a varying transparent graphic, we can't use the save for web feature. Now, one way that we can create a varying transparency PNG-8 file is to use the Adobe Generator plugin. So, let's go into the File menu, let's come down to Generate and choose Image Assets. Once this is selected, what I want to do is create a graphic out of both of these layers. So, I'm going to hold the Cmd key, select each of these individual layers, you can use the Ctrl key in Windows. Cmd or Ctrl+g to group these layers. So now, let's come in here and let's rename this Group, logo.png. Now if we go back to the exercise files, we will now have a folder called Logo Assets. And, inside of there, we have a logo.png. This is a 32bit PNG file which is the default setting for Adobe Generator. To make this a PNG-8, let's go back to Photoshop. Let's go back to that layer group. And let's name this logo.png8, then hit Return. That will generate another graphic. This is going to be a PNG-8. Let's double-click this and open it up. Now, if we open that PNG-8 back up in Photoshop, we can get a sense of what the quality looks like. You're going to create a new layer real quick. going to fill it with white, move it to the background. So, now we can see all the varying transparency back inside of here. Change the background from white to black, and again, we can see what that looks like. So, this graphic isn't looking very good. We can create varying transparency with Adobe Generator, but since we don't get control over the number of colors or the dithering settings, we really don't have a lot of control over how we compress this individual graphic. So, let's close this. Close the Photoshop file, don't save. And what I want to do next is come down and open the logo.png inside of the PNG 24 file folder. And let's open this up with Fireworks. Now, inside of Fireworks, the first thing we're going to do is come up here and turn on the 2-Up view. This will give us a preview of the original file on the left and the compressed or optimized file on the right. Next, in the lower right of the window, let's change the magnification to 400%. I'll hold the space bar and just move this around. I want to be able to see the graphics really large. Let's click on the right side here, the Optimization settings, let's go into the Optimization panel. If its not showing up on the right hand side of your screen, you can go to the Window menu, come down and choose Optimize. For the file format, let's come over and choose PNG-8. Now, with that selected, we'll see some of the same settings we saw inside of Photoshop. We can come in here and pick a matte color. So, I come in here and select Black and that will change the entire background. Notice here, under Transparency, we have No Transparency. If we come down here and choose Indexed, this is basically one bit transparency which again gives us the same limitations that we had inside of Photoshop and Illustrator. And exactly the limitations of a GIF file with transparency. So, we can see the one color showing up here in the color table. Let me make this column a little larger. Now under Transparency, let's come down and choose Alpha Transparency. What this will do is let Fireworks create varying transparency of all of those individual colors. So, we can see in the color table here, all of the colors that have varying transparency. Each one of these relates to a color in our image. Now if I roll my cursor around inside of the image, every pixel that I hover over top of, we'll see the corresponding color in the color table highlight. So now with the transparency in place, let's come over here and change the colors. So, in the Color drop down menu, I can come down to, let's say four colors. That will pick the four most commonly used colors inside of here. Let's come in and choose eight. This is very similar to what we looked at earlier in the course, and let's come down to dithering and instead of zero, let's come in here and change this. So, I'll start by bringing this up to 70%. Now, as I make all of these changes, notice in the bottom of the optimization window I can see the exact file size. So, now this file size is going to be 5.26 kilobytes, that's significantly smaller than the 31k of the original 24 bit PNG file. But again, if we look inside of this image, it doesn't really look very good. We wouldn't want to actually put this on the site yet. So let's come over here, and let's change this to 54 colors. This is going to look a little bit more like what we looked at earlier in the course. And under Dithering, let's come in here and let's bring this up to somewhere above 90. We'll tab away. Now, we'll see these sort of pop into place. Now again, we are looking at this at 400%, so let's come down here and change the magnification back down to 100. Now looking at these side by side, we can see the original image as compared to the compressed image, and we want to take a look at the file size here. So now we're looking at 10.26 kilobytes versus the 31 kilobytes we had for the original image. And of course, you can come in here and add as many colors as you want, and put in very specific colors. So I might come in here and put in 60, hit Tab, and get just a little bit more smoothness in some of the grapes. Now this is something that you'll have to do image by image, but the file savings is well worth the time. And then, once you have the graphic looking the way you want, you can simply come up to the File menu, come down and choose Export. You can target where you want to save this and when you click Export, Fireworks will create a brand new PNG-8 file with varying transparency with a file size of only 10.64 kilobytes.