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.
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.
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.