Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
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.
When it comes to graphic file formats on the web, we have three basic choices that we need to be aware of and those are GIF, PNG, and JPEG. In this movie, we're going to be exploring the various web file formats that we can export out of Adobe Illustrator and when and why we should use each one. So I've got a document opened here and I'm just going to open the Save for Web dialog box. We're going to go into the Save for Web dialog box a little bit later in depth to explain all the options that I have available to me in here, but for now I just wanted to show you the options that I have in terms of file formatting.
So we have JPEGs, GIFs, and PNGs available to us. I'm going to start with JPEG. And so JPEG is what we call a lossy file format, meaning that when we compress an item with JPEG compression, it does cause degradation and can cause pixelation. The lower quality you set for a JPEG image, the smaller the file size is going to be, but the worse the image is going to look. So for instance, if I happened to turn this down to a low quality, you could start to see some of that nastiness pixelation and chunky artifacts that start to appear. If you've ever done a Google image search, you've probably seen this countless number of times.
The JPEG file format is not good if you always want those good clean graphics, because depending on the compression level, you might not get such a nice result. However, it is the best when you're saving out photographs, because photographs need that large continuous-tone image to be displayed properly on the web, and JPEGs give you the best color gamut for that as well. When you're dealing with photographs on the web, you need to save those as JPEGs. Also if you have smaller graphics that can be optimized at a higher compression rate without losing that quality, you could save those out as JPEGs as well.
But one thing that JPEGs do not do is transparency. You notice here that the background of my graphic is completely white. That's called a matte, and the matte behind this graphic is being caused because I'm using the JPEG. Normally, this would just be transparent, and I could save this out and the logo could just float wherever it needed to go. But since I've chosen JPEG, no transparency whatsoever, so this would actually be a huge graphic in the long run. The next file format that we're going to talk about is GIF, and GIF is good for large areas of broad color and graphics that have really sharp, well-defined edges, without the need of complex transparency.
Now I know that's a lot to swallow, but just let me break it down in terms of this. If you have small icons or big square graphics with large bits of the same color, that's where you need to save a GIF. GIFs are not good for gradients. They are not good for objects that use multiple colors sort of close together. They're also not to be used with any graphics that require the use of complex, or what we call absolute, transparency, things like drop shadows, blurs, and things like that.
So in this case, it would actually work okay with this graphic, because there's no drop shadow. There is really clean defined edges around this robot, and there's only two or three colors being used, and they're in pretty large blocks all the way across. You do see some degradation around the logo right there in the middle, but all in all, a GIF would work okay for this graphic. The other graphic that we have available to us inside of Illustrator is something called a PNG file. And PNG files come in a variety of different flavors, actually: you have something called a PNG-8, a PNG-24, and something called a PNG-32.
When you look inside of the Preset dropdown you will not see an option for PNG-32, and I'll explain that in a minute. You do have the option for a PNG-8 and a PNG-24. The PNG-8 is essentially the same type of graphic as a GIF. It has the same rules and the same type of things applied to it. No complex transparency, large blocks of color, et cetera. PNG-8 is going to give you in most cases a smaller file size than a GIF, so you might want to consider that, as long as you don't have any complex transparency areas. The PNG-24, that is the Mac Daddy of all graphics when it comes to saving out for transparency, because of the fact that it supports something called true alpha transparency.
And the only difference between a PNG-24 and a PNG-32, which is not available inside of Illustrator, is the name. Think of a PNG in terms of bits. So you have 8 bits for the red channel, 8 bits for the green, 8 bits for the blue, and you also have 8 bits for the alpha channel. You add up all those to together, 8 times four, that's 32 bits. In Illustrator and other programs like Photoshop, they simply ignore that last eight bits for the alpha. They do include it. It's in there, but they just don't add it into the file format.
In an app like Adobe Fireworks you actually get a PNG-32, which actually accounts for that last bit of transparency. So if you're in Photoshop or Illustrator and you need something with super-complex transparency that uses drop shadows, blurs, or something like that or it's just a logo that really needs to be absolutely crisp and sharp, go with the PNG-24. If you're in a program like Fireworks, you could utilize the PNG-32 and it would work perfectly as well. So hopefully by now you have a better understanding of what these file formats are for and how they are used and why you should use each one in a given scenario.
My suggestion would be to go through and practice exporting out several graphics at different file formats, take a look at the difference between them, see which one suits your needs the best, and then commit that to memory so that each and every time you come into the Save for Web dialog box you can easily optimize your images accordingly, save them out, and save yourself a ton of time.
Find answers to the most frequently asked questions about Illustrator for Web Design.
Here are the FAQs that matched your search "":
Sorry, there are no matches for your search ""—to search again, type in another word or phrase and click search.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.