Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
In Illustrator CS5 Web and Interactive Design, Mordy Golding shows how to create pixel-perfect graphics for use in web sites, video compositions, and mobile apps. This course covers a wide range of workflows, from creating online ad campaigns, web sites, icons, to taking art from Illustrator to Flash Professional. Sharing tips, tricks, and creative techniques along the way, Mordy provides insight and instruction for taking projects from initial concept straight through to production. Exercise files accompany the course.
While the GIF format was probably one of the first graphic formats ever used to transmit images over the web, there were a few legal battles in its history around who owned the compression algorithm that it used to make file sizes smaller. So there was another image file format that was created called PNG or Ping. The interesting thing about the PNG file format is that there are a variety of different types of PNG images. And it kind of allows you to pick the best of both worlds, meaning that it has some attributes of the GIF file formats, but it also has some attributes of the JPEG file format.
So let's take a look at how we might export our files as PNG images out of Illustrator. I'm going to go back over here to the File menu and choose Save for Web & Devices, and I want to go down and click on this logo right here and choose to optimize this as a PNG file. Notice that there is something called PNG-8 and PNG-24. And I had mentioned before that there is a similarity between PNG, and GIF, and JPEG as well. You can think of PNG-8 as closer to the GIF file format and PNG-24 as closer to the JPEG file format.
So let's start off with the PNG-8 file format. Like a GIF file, it's limited to 256 colors and of course you can choose various ways to reduce the number of colors to those colors here. You can get smaller file sizes by actually reducing the number of colors inside of the file. And in addition you could choose to have transparency, so you can choose one color to actually become a transparent color. However, I'm now going to hit the Spacebar to give me the hand grabber tool to move to this part over here, this slice with the image, and I'll select this slice.
And now instead of the PNG format, PNG-8, I'm going to choose PNG-24. Notice here that all those settings go away, similar to again the way that JPEG is. That's because PNG-24, which is 24 bit, is not limited to the number of colors that PNG-8 is like 256 colors. So it allows you to simulate something called True Color or Continuous Tone, where you get beautiful ranges of colors which are great for photography. However, there is another benefit to using the PNG-24 file format. Notice that over here it does allow you to use transparency.
Remember that JPEG did not have a transparent option, but here we do have transparency. If I did have some kind of an image that was not a rectangular shape, I could of course use transparency to make, let's say, a background color go away, but the beautiful thing about using PNG-24 is that the transparency that's supported actually supports 256 levels of transparency. So that means you could theoretically create some artwork that has a soft drop shadow. And you could make that sort drop shadow have a transparent background, so that that soft shadow actually blends perfectly into any background or even on top of other photos.
Now, later on inside of this video title, we're actually going to see how we can do that. And how we can test to make sure that it looks great in a browser, but for now, you now know that you can actually create these PNG files using both PNG-8 and PNG-24 to export artwork out of Illustrator. One of the really interesting things to note about the PNG file format is that it's supported by many different browsers and even applications. For example, Microsoft's Office can import images in the PNG file format and it's even the preferred way of getting artwork from Illustrator into, for example, PowerPoint presentations.
Find answers to the most frequently asked questions about Illustrator CS5 for Web and Interactive 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.