Video: Optimizing transparent graphics

When it comes to optimizing transparent graphics, we have two basic choices to choose from: we have a GIF and a PNG. In most cases, you could probably get away with a GIF, but in some cases when you need that complex transparency, or what we call true alpha transparency, you want to go with a PNG. In the case of a logo, like the one you see here on the screen, I would recommend going with a PNG, simply because logos are your calling card on the Internet and they need to be at their best, especially if they have transparent pieces, like this one here has transparency in here between the arm and a lot of transparency around the outside.

This course reveals how designers can create vibrant web graphics, wireframes, and complete web site mockups with the strong layout and color management tools in Adobe Illustrator. Author and Adobe Certified Expert Justin Seeley covers topics such as building responsive layouts with artboards, producing custom color palettes and swatches for web graphics, and making vector shapes and text that seamlessly scale. The course also explores adding drop shadows and other live effects, setting up interface elements such as forms and tabbed interfaces, optimizing and exporting different types of graphics, and speeding up your workflow with reusable image sprites and Smart Objects.

Optimizing transparent graphics

When it comes to optimizing transparent graphics, we have two basic choices to choose from: we have a GIF and a PNG. In most cases, you could probably get away with a GIF, but in some cases when you need that complex transparency, or what we call true alpha transparency, you want to go with a PNG. In the case of a logo, like the one you see here on the screen, I would recommend going with a PNG, simply because logos are your calling card on the Internet and they need to be at their best, especially if they have transparent pieces, like this one here has transparency in here between the arm and a lot of transparency around the outside.

It's not just a square or a circle. So, we need to optimize this in such a way that we get good clean transparency all the way around while still maintaining good color fidelity and all that stuff. So, let's go to the File menu and choose Save for Web, and this is going to open up. Yours may open up looking like this, and if it does, just uncheck Clip to Artboard right there, and that will snap it down to where it's supposed to be. So, let's take a look at this as a GIF first. Let's do the GIF 128. When I do that, you are going to see that it looks okay.

There is a little bit of pixelation going on in some of these smaller areas where the colors seem to run together. Remember, GIFs are good for large, broad areas of color, not these little subtle areas that run into each other. So, we need to be careful with that. You might get some dithering and some banding issues, especially if you are using gradients. So we took a look at the GIF. Now let's take a look at the PNG. I am going to go first to the PNG 24. When I click on the PNG 24, it looks much cleaner to me. It might be hard for you to see onscreen, but it does look much cleaner to me. The lines look a little shaper, colors are differentiated well.

I really like the way it looks with the PNG 24. Let's check out PNG 8, which is essentially a GIF. I still see a little bit of degradation around the edges and things like that. I don't like the choppiness. So I am going to switch it back to PNG 24. Remember, in Photoshop and Illustrator both, PNG 24 is essentially a PNG 32, which means that it has 8 bits per channel and also supports alpha transparency as well. That's why we get that nice clean transparency all the way around it. Let me show you an example of why you would use a PNG 24 over a GIF or a PNG 8 that makes a little bit more sense.

I am going to hit Cancel right now, and I am going to select this robot. And with it selected, I am going to go up to the Effect menu and I am going to chose Stylize > Drop Shadow. I'll turn on the drop shadow, and I am going to set my Opacity to about 60%. X Offset, let's change that to about 3, Y Offset to about 3, Blur Radius to about 5. The color could be black or dark grey-- it doesn't matter--and hit OK. So now here is my object that's got that subtle drop shadow applied to it.

I want to export this out for the web, and I want that drop shadow to look pretty good. So in order to do that, I need to go to File > Save for Web. And so when I select JPEG, right off the bat, you see this is not going to work because the background is white. I want the background to be transparent. Let's change this to a GIF. I do see the transparent areas, but look when I zoom in on this. You see the white band that goes all the way around the outside of it? That's because GIFs and PNG-8 both use something called binary transparency. They do not use alpha transparency. So there is no alpha channel telling it how to actually create this transparency.

It knows it's there, but it just doesn't work well. So what I need to do is change this to PNG 24. Watch what happens when I change it. I get true transparency, with that subtle gradient in the background for the drop shadow. Everything looks nice, clean and crisp around the edges. If I zoom out to its true size, it looks even better. I'll change this to a PNG-8 just so you can see that it is exactly like a GIF. So we don't need to use that. PNG-24, definitely the way to go.

So again, remember, anytime you have a lot of gradients or drop shadows, blurs, any areas of transparency that need to be really extra sharp, try using the PNG-24 versus a GIF. If you have small areas of transparency where the precision is not really required, you can probably save it out as a GIF. But my suggestion would be to come in here and actually play around with the presets. If it looks fine with one versus the other, then go with that. The main thing you need to pay attention to is how big the file is going to be and the overall look of the file over here in the window.

Once you are ready to go, just hit Save. And I can save this out on my desktop as bot_logo, and I'll hit Save, and there we go. Now, anytime I want to use that inside of one of my web site designs, I can do so and it's a nice crisp and clean PNG transparent graphic.

Find answers to the most frequently asked questions about Illustrator for Web Design .

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.

Already a member ?

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships.
Learn more

Upgrade to our Annual Premium Membership today and get even more value from your lynda.com subscription:

“In a way, I feel like you are rooting for me. Like you are really invested in my experience, and want me to get as much out of these courses as possible this is the best place to start on your journey to learning new material.”— Nadine H.

Thanks for signing up.

We’ll send you a confirmation email shortly.

Sign up and receive emails about lynda.com and our online training library:

new course releases

newsletter

general communications

special notices

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

new course releases

newsletter

general communications

special notices

Here’s our privacy policy with more details about how we handle your information.