Join Chris Converse for an in-depth discussion in this video Setting optimization and image quality, part of Design the Web: Adobe Generator for Graphics.
Adobe Generator also gives us the ability to change the compression and optimization settings with the file name as well. So in the last movie we generated two graphics, a PNG and a GIF by using two different file names in this layer name. Let's come in here and let's change promo2.png, promo2.gif to just promo2.jpg. Hit Return. Notice the Assets folder, the PNG and the GIF were thrown away, and we're left with just the JPEG file. Now to change the compression setting, by default this is set to nine or 90%, but if we come in here and after .JPEG put the number five, hit Return.
What that's going to do is generate a brand new JPEG with an image quality setting of five. So to preview this let's come over here. going to double click and open up this JPEG file, and move it over here a little bit. And so it might be a little hard to see in the video, but if you do this in your computer you'll see that the JPEG artifacting is much more significant here then what we have in our original file. So let's close this. Let's go back to that layer. Let's come in here. We can change this to a one. Which will give us a 10% quality. And again you can see that here, showing up in the preview.
However, you can also use an arbitrary percentage amount by using a number plus a percent sign. So back in Photoshop we can come down and take promo2.jpg, and then the number one, put a three after that, and then a percent sign. So we can get a compression of exactly 13%. Hit Return, and then our graphic will be modified using JPEG 13% quality. Now in addition to quality settings we can also pick different variations of a file format. The portable network graphic, or PNG file format actually has three different versions. A PNG-8, 24 or 32.
So let's come in here and let's rename this back to promo2.png. When I hit Return the JPEG file's removed. We now have the PNG file. And this is a PNG-32 file. If I want to convert this to a PNG-24 we can come in here and after the .png type in two, four. Hit Return. We'll now get a PNG-24 which will be a little bit smaller than a PNG-32. And lastly we can come in here and change this from PNG-24 to PNG-8, and then hit Return.
Now a distinct advantage that Adobe Generator has over the traditional Save For Web in both Photoshop and Illustrator, is that the Save For Web dialog box only gives you the option of a single color alpha when working with PNG-8. This means that we need to specify a matt color, where also my transparent pixels are flattened to a solid color. Now while this is a limitation in the GIF file format, since GIF files can only have one transparent color, PNG-8 files can have varying transparency. However, the Save For Web dialog box in Photoshop and Illustrator don't give us the ability to define that.
Now, if we do specify PNG-8 using Adobe Generator, we will get a semi-transparent alpha in our PNG-8 file. Now, you will have a limited number of colors, just like a GIF file, because we do only have eight bits of data, but we can have varying transparency. So your graphic will blend nicely over different backgrounds.
Skill Level Beginner
Q: This course was updated on 12/02/2014. What changed?
A: We added three new movies in the "What's New in the Creative Cloud Version" chapter, covering changes to the 2014 version of Creative Cloud.
Q: This course was updated on 02/04/2015. What changed?
A: We added one movie, "Creating editable SVG graphics from shape layers," a new feature added to Photoshop CC in December 2014.