Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
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.
In modern web design we try to stay away from images as much as possible to alleviate the load times on our web pages. We design things using CSS and HTML techniques to simulate what images would actually look like, but we can never get away from actually using photographs. And so we need to be able to optimize our photographs out of programs like Photoshop and Illustrator to effectively display these images on the web at the smallest file size possible while still maintaining a decent amount of quality. That being said, when you start to bring photos into Adobe Illustrator I recommend that you optimize them ahead of time in a program like Adobe Photoshop in order to minimize the size of your Illustrator files as well.
However, if you do want to place high-resolution graphics into your Illustrator files, that's okay, because you can use the Save for Web dialog box in order to optimize out your JPEG images or photographs as well. Let's go up the File menu here and let's go to Save for Web. And let's say that I was going to export out this picture of a robot out for the web. And the first thing I want to do is make sure that I am exporting this out as a JPEG, because remember, JPEGs are the best file format for photographs. And once I do that, I am going to select JPEG High, first off, and when I select JPEG High, you are going to see that the Quality setting is set to High, the Quality is 60%, and you'll notice down here at the bottom that the Size is roughly 13.2K versus 146K of the original file, and that's okay.
What I am going to do now is change the setting, and I want you to watch closely right here on the robot to see if you can see any differences. Let's go from High to Medium, and when I go from High to Medium you shouldn't see too much of a difference, but there is somewhat of a degradation going on in here and some more artifacts showing up. If I zoom in a little bit and switch from High to Medium, you see that extra little bit of artifacting that goes on inside of that? That's because you are compressing it a little bit more and making the file size go down roughly 6.97K, but you are also losing a little bit of the quality of the file.
Since this is a smaller graphic--right now it is only 150 pixels by 250 pixels--the Quality setting doesn't matter all that much. But this was a big photograph that we are viewing in something like a lightbox or it was a product shot or something like that, we would probably want to crank the Quality setting up a little bit. If you take this down to Low, you'll really start to see the chunkiness appear in your graphic. That takes it down to 4K, but you are loosing quality and getting some really blotchy spots all over the whitespace as well.
So I think really you can get away with using JPEG Medium or JPEG High depending on how big you want your file to be. 13K is almost negligible. I don't think that's a big deal. But High is probably as high as I would go for a web graphic and Medium is probably as low as I would go, depending on the overall quality of the file that you are getting. Once you have your file set at the JPEG level that you want, Quality setting that you need, and everything else good to go, all you have to do is click Save, and then I'll just save this out to my Desktop and I'll call this red_robot, and I'll hit Save.
And now that has been saved out to my desktop as a JPEG and if I jump over into Adobe Photoshop, I can hit Command+O or Ctrl+O to Open. And I'll go to my Desktop and select red_robot, open it up, and there it is. And I can actually see here, if I open up the Image Size dialog box, that it's 150 pixels wide, 250 tall, and if I zoom in on it, I can see the quality is not that bad. So it was a pretty decent rendering. And if you want to get really specific, you can launch this up in a web browser. So if I go into my web browser here, go to File > Open File, navigate to my Desktop, and select red_robot, I can actually see what this is going to look like on the web.
And so judging from this distance and everything, it looks pretty good. It loaded relatively quickly. And if I upload that to a server, I could really get an idea of how fast it's going to load. But this looks good. I am satisfied with it, so I'll take it from there. So let's jump back into Illustrator. And so like I said, Illustrator is probably not the best place to optimize photographs; it's better served in other programs like Photoshop and Photoshop Lightroom. But if you want to optimize photos in Illustrator, you certainly can. Just make sure that you follow the guidelines of saving it out as a JPEG, and make sure you zoom in to check the quality so that you are not getting artifacts and pixelation.
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.