Join Mordy Golding for an in-depth discussion in this video Using the Web document profile, part of Illustrator CS5 for Web & Interactive Design.
Illustrator ships with a variety of what we call new document profiles. You can actually see these profiles by looking at the Welcome screen on the right side where it says Create New. And you'll see listed here things like Print Document, Flash Catalyst Document, Web Document, so on and so forth. Now, these are just simply settings that were already set up in place so that when you get started creating a document in Illustrator, you have everything set up and ready to go. Now, since as we are working on web graphics, then of course it makes more sense to choose the Web Document profile.
First, take a look at what settings actually are already inside the Web Document profile, and we'll find that may even be a few little things that we still need to add ourselves. So I'm going to start over here creating a new document, so I'm going to click on where it says Web Document. It really doesn't make a difference if you click on that button specifically or not, because you can see over here where it says New Document Profile here in the New Document dialog box, there is a pop-up here where you can still choose between all the different profiles that exist inside of Illustrator. So we'll choose Web over here, and we'll see that the default size is set up to 800x600.
And we could choose from 640x480 or 1024x768, but really just imagine right now this is just one artboard. So unless we are designing a web site with only one page, this one size really doesn't mean much to us. We could change this of course later on once we get in our document, but as an example, if you knew you were going to create an ad campaign that had a whole bunch of different ads of different sizes, choosing that size here wouldn't make much sense here. If you were designing a single web site and all the pages in your web site were all the exact same size, you might create a certain number of artboards here all of the same size.
But again, in my belief it's far more easier to set that up once you're inside the document using the Artboards panel, for example, inside of Illustrator than it is to worry about trying to get them all set up just right here inside of the New Document dialog box. So for the most part, I just kind of breeze right through this area here, because I don't need to know or worry about each of these individual settings. Notice over here the Unit is already set the Pixels, which is perfect. We don't worry about bleed when we talk about web designs. We could just leave those settings alone, but I'm going to click on the Advanced button here, because I want to over here some of these settings.
First of all, you'll notice that the Color mode is already set RGB, perfect. The Raster Effects settings, this is specifically for effects like Gaussian blur, for example, so drop shadows, glows, these things are used a lot in web design. And those are set by default to 72 pixels per inch. This is actually not a bad default setting to work with, especially for a general web design. However, if you know that you're targeting a specific device that has a much higher resolution, you might consider changing the Raster Effects setting. And you can do that later on. You don't need to do that right now inside of this dialog box.
Again, this is just a way for you to get the settings right when you get started, but we can always change any of these settings later on inside of our document. You'll notice over here that the Preview mode, which is set right now to Default. However, when we're working inside of web design, we may often want to use the Pixel Preview Mode. To be honest, sometimes when I'm working with web graphics, I want to make sure that I'm getting my antialiasing perfect. I sometimes forget to turn on the Pixel Preview Mode. So by turning the Pixel preview mode on right now, I know that I'm using that preview mode right from the start.
You'll also notice that now new to Illustrator CS5, the new Align New Objects to Pixel Grid setting is on by default for the Web profiles as well. This ensures that anytime I draw a new artwork, that artwork automatically will snap to the pixel grid, giving me nice clean sharp antialiasing. Now that I've all these settings in place, I can click OK. Illustrator creates the new document for me and I'm ready to go.
- Getting perfectly sized pixel graphics from Illustrator
- Setting up preferences in Illustrator for web design
- Creating custom document profiles
- Getting great color on the web
- Understanding web graphic file formats (GIF, JPG, PNG, SWF, and SVG)
- Setting great-looking type
- Slicing artwork for various tasks
- Creating Flash animations directly from Illustrator
- Working with Photoshop Smart Objects
- Exporting HTML and CSS from Illustrator
- Integrating with Flash Catalyst
Skill Level Intermediate
Q: In the chapter 5 movie, "Simulating the CSS box model," the author details the CSS box, but names the inner portion the margin and the outer portion the padding. This is reversed from what I’ve have seen elsewhere. Is this an error in the video?
A: This video does indeed contain an error where the author describes the margin and padding. The padding should be described as the area inside the border, and the margin the area outside the border.