Join Justin Seeley for an in-depth discussion in this video Using guides and rulers, part of Illustrator for Web Design.
Two of the most important things that you will use when you're creating a mockup inside of Illustrator are guides and rulers. If you're not familiar with the ruler system inside of Adobe Illustrator, in order to turn those on, there are two ways. You can use Command+R or Ctrl+R on your keyboard or simply go to the View menu, choose Rulers, and click Show Rulers. Once you have rulers turned on, you'll notice the 0 points correspond to the top left-hand corner, and you're able to then use the rulers to create guides in your document as well. In order to create a guide, simply click and drag out from the left or from the top, just like so.
If you want to get of rid of those guides, you can actually click on them and press the Delete key on your keyboard and they will go away. Once you have your guides in place in the areas that you need them to be, you can lock them down, and I'll show you how to do that towards the end of this movie. Once you've got a new document created for your mockup, it's time to determine the overall size and dimensions of the design that you're going to be working on. In this case I think that I'm going to determine that the overall width of the WordPress theme that I'm working on is going to be 960 pixels wide. So I'm going to grab the Rectangle tool, and I'm just going to click somewhere in the middle of the artboard.
I'm going to type in "960" for the Width. The Height really doesn't matter. I'll hit OK. And then I'll switch to the Selection tool. And I want this to be directly in the center of my document. The easiest way to do that is to utilize the Align panel. So I'm going to go to Window, bring up Align. I'm going to go to the top right- hand corner and choose Show Options. And I'm going to make sure that this is aligned to the artboard instead of Align to Selection. That way when I click Horizontal Align Centers, it snaps right to the center of the artboard.
Now you may be wondering why I put the shape out in the middle of my artboard. Let me close the Align panel and show you. Essentially, I've cheated. Because I don't like to do math, basically what I have now is a 960-pixel-wide area which I can then define with guides and then get rid of the shape. It just saves me the trouble of having to calculate how far I've brought in each guide. So I'm going to color this rectangle. It doesn't matter what color it is. I just want to be able to see it. And then I'm also going to zoom in quite a bit, like so. And then I'm going to take a guide and drag it out from the left-hand side.
It should snap to that edge. I'll take out another guide, and it may not snap to this edge. That's okay. Just drag it out close to it and then when you drag it closer the second time, it may snap in place, sort of like this. And if it doesn't, you can always just kind of nudge it around until it snaps on, something kind of like that. So now I have a 960-pixel- wide web site that I've defined. I can delete this, and I'll zoom back out a little bit. I'm now going to define some content areas inside of my document.
In order to do this, I'm going to use guides. And so let's say that I want the header to start at the very top of this, and I'll click and drag a guide down. As I start to drag it down, I can let go anytime I want, and you can see over here in the Info panel where this is. And as I click and drag it now, the Info panel actually reacts to that. So if I wanted this to be 100 pixels tall, I'll just drag it until it gets to about 100 pixels. If you can't get it exactly at 100-- like I'm having trouble here--just zoom in a couple of times, Command+Plus or Ctrl+Plus on your keyboard, and you should be able to grab that and then easily reset it to 100 pixels. There we go.
Now I'm going to drag down and create a guide for the footer as well. This one is going to be a little bit tricky. I'm going to have to do some substraction here. As I drag down, you'll notice that the numbers are really high because this is a 2000-pixel-tall document. So let's say I wanted the footer to be 300 pixels tall. I need to take that to about 1700, so I'll just drag this until it reaches 1700. And I'm just looking in the Info panel, right up there in the right-hand side and when it hits that, I'll let it go. About 300 pixels.
And I can always fix this with my shape layers layer, but for now I'm just defining content areas. And so from here I want to add in some margins, so I'll zoom back in, Command+Plus or Ctrl+Plus and I'll drag out a guide from the top. So that's going to snap to this, and I can drag this out a little bit more. I want this to be about 30 pixels from the top, so we'll drag that down to about 130. There we go. It creates about 30 pixels of space.
So now my header is going to be up here, going all the way across the top, and I have about 30 pixels of space before I get to the actual content of the site. Same thing for the footer. I want about 30 pixels of padding between the footer and the next bit of content, so I'm going to drag that down. And this needs to go about 1640. Here we go. It's about 30 pixels of space. Actually, that's a little bit more than 30 pixels, so let's adjust that a little bit.
It needs to be about 1670. Here we go, and that's about 30 pixels space. So now if I zoom out, I can do Command+0 or Ctrl+0 to see all of the document, and so now I've got my header area defined here at the top. I've got my padding or margin between the header and the content area. I've also get some padding at the bottom above my footer area, which I've defined as well. And I did that with all of these guides that I drug out from the rulers.
Now once I have my guides in place and they're exactly where I need them to be, I need to lock them down, because as of right now, I can still click on these and move them around. So what I'm going to do is go to the View menu and I'm going to choose Guides and choose Lock Guides, and once I lock the Guides, I can no longer click and drag them around. They are just there as informational pieces for me, so that I can use them while I'm assembling the rest of my mockup.
- Customizing a web workspace
- Decoding the mysteries behind screen size and resolution
- Working with Pixel Preview and anti-aliasing
- Coloring web graphics
- Renaming and grouping layers
- Working with shapes and symbols
- Creating wireframes on a grid
- Styling text
- Creating image sprites
- Simulating web pages with artboards
- Optimizing and exporting your work