Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Once you have all of your images loaded into your sprite grid here inside of Illustrator, it's time to take them and export them out for use in an HTML/CSS editor, and to display them on the web. So the first thing we need to do is go to the File menu and choose Save for Web. Once we have that done, we need to pick the best type of export for our icons or whatever it is that we might be exporting. Now, this is going to be dependent on exactly what type of graphics you've created. In this case I've a lot of flat areas of color and I don't have any transparency, so I think the best thing to do here would either be a GIF or a PNG.
So in this case I think maybe PNG would serve me well. PNG-24 might actually be the best, in terms of quality, but it's also going to be a higher file size. But in this case these are so small, 4.5k, it's not that big of a deal. And so once I pick this, I'll go ahead and hit Save, and I'll go out to my desktop and I'll just save this out as social_icons, and hit Save. Once I do that, I now have a PNG graphic saved out to my desktop which I could then hand off to my developer, and they could use that, along with some creative positioning techniques via CSS, to display these individual icons anywhere that they need to on my web site, but they would all load instantly in the background because they're all a part of this one single image sprite.
If you would like more information about how to optimize your graphics for the web, including all types of web graphics with transparency, photographs, et cetera, you want to go back and watch chapter 10 of this course, because that's where I cover all of the optimizing web graphics and how to get your things out of Illustrator at the highest quality for the smallest file size possible.
Get unlimited access to all courses for just $25/month.Become a member
119 Video lessons · 50952 Viewers
117 Video lessons · 38696 Viewers
113 Video lessons · 81576 Viewers
65 Video lessons · 11612 Viewers
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.
Your file was successfully uploaded.