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 this movie, we're going to be exploring the Save for Web dialog box inside of Illustrator, and if you're using an older version of Illustrator, you'll probably see some differences between the one that's available in CS6 versus the one that's available in the older versions. That's because in Adobe Illustrator CS6 they have streamlined the Save for Web dialog box to only include what they consider to be the most essential pieces of a web designer's workflow. So if you see some subtle differences, that's okay. Most of the big-time functionality has not changed whatsoever. In order to access the Save for Web dialog box, you can get there one of two ways: you can go to the File menu and choose Save for Web or you can simply hold down on the keyboard, Shift+Option or Alt, Command or Ctrl and the letter S, and that will automatically open up the Save for Web dialog box for you.
Once inside of the Save for Web dialog box, you're going to notice on the left-hand side that you have several tools available to you. You have a Hand tool that allows you to pan and zoom around inside of your document. You also have a Slice tool if you need to make slices of individual pieces in your document. You have a Zoom tool that allows you to zoom in and out on various pieces of your document at any given time. If you want to zoom back out, you can hold down the Option or Alt key and then click to zoom back out. You have an Eyedropper tool which allows you to sample various colors, to check the colors, and you can also toggle slice visibility if you're working with slices.
At the top you'll be able to see things like the original image, an optimized version of it, and then you can also view a 2-up display with the original image on the left and the optimized version on the right. This is a great way to check the fidelity of your export to make sure that what you're getting out of Illustrator is exactly what you want. So if you were to optimize this as a JPEG, would it look just as good as the original, or do I need to up the compression, change the compression; what do I need to do? You can also review things like the file size, right here, 2.99 MBs, right over here 18.97K, so a big difference there.
On the right-hand side, you're going to find most of your presets. The presets can be located here underneath where it says Name. You can drop those down and you have presets for GIFs, JPEGs, and PNGs. These are just mainly used as jumping-off points though. Chances are you are going to tweak the settings individually for each graphic to make sure you get the optimum amount of quality with the smallest amount of file size. So my suggestion would be just to pick one-- like for instance JPEG--and then go though and make adjustments in these areas down here until you get exactly what you're looking for with the file size that you need.
Underneath that, you have Image Size controls. The Image Size controls are really easy to use. All you have to do is change them and the link is already connected here, so they will automatically change Width and Height values for you. You can also change based on percentage as well. If you do not want this to be clipped to the artboard, you can uncheck this box and it will clip it to the artwork that is on the artboard. That makes it so much easier to export out individual graphics, in my opinion, so I usually go ahead and turn that off as soon as I get in here to clip it right to the artwork that I have on my screen. I can see the true size of the artwork and then make adjustments.
For instance, if I needed this to be exactly 250 pixels wide, I just change that to 250, tab it down, it makes the adjustment for me. It also adjusts the percentage for me as well. Once you are ready to save out of the Save for Web dialog box, just come down to the bottom right-hand corner and click Save. It will automatically bring you to a Save As dialog screen, and you can save this out to your desktop or wherever you might be trying to go. Hit Save and you're good to go. That's a brief tour of the Save for Web dialog box. We're going to continue using this throughout the chapter as we explore various ways to export things like photographs and transparent graphics, so you'll get your fill of the Save for Web dialog box going forward.
I just wanted to give you a brief tour of this so you understand exactly what's going on in here as we continue forward in this course.
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.