From the course: Productivity Tips for Web Designers

Improving your layout efficiency with rulers, grids, and guides

From the course: Productivity Tips for Web Designers

Start my 1-month free trial

Improving your layout efficiency with rulers, grids, and guides

Hello, friends. This is Sue Jenkins with productivity tips for web designers. In this week's lesson, I'll be reviewing how you can get the most out of rulers, grids, and guides in Adobe Illustrator. So you can work more productively, when designing elements for the web. When you're designing for the web, it's really important that all of your elements are neatly aligned and positioned, so that the site looks organized, and has a favorable impression to the site visitors. And one of the best ways to do that, is to work with your rulers, your grids, and your guides. But also, possibly, to get a template downloaded from the internet that has a grid structure already built in. So, this layout here, I've used a 960 overlay. So, let me show you what that looks like on top. So, we have neatly divided columns with gutters in between. And then, all of the elements are laid out on top of that. In addition, templates often come with a set of guides that go along with it. Or even if you just get this overlay, you can drag in your own guides. So, let me turn the guides on here. And now, you can see how everything sort of flows within this space. And sometimes, I personally break away from the grid, and these grid lines so that it's a little more Wabi-Sabi, a little more organic feeling. But in general, I try to stick with these guides when laying out my work so that it has a organized feel, and like I said, a nice favorable impression. So let me show you another layout, and then we'll talk about how you can set this up. So, let me hide my after and show my before. As you can see here, is the layout with some of the elements in place, some of them not quite right yet. Generally, when I work in a web design project, I put all of the content out on the page. And then, I start moving it around and playing with colors and graphics and photographs and other things, until I get it right. So certainly, I could use the align and distribution buttons to help affix the navigation buttons and so forth. But generally, I would like to start with a 960 overlay, then I can drag in my guides. And here you can download a template, they've got templates for CSS and Photoshop, and Illustrator, and pretty much anything else you might be using. So once you download it, bring it into your program. And then, start setting up your guides. A quick word here about working with guides. A lot of times you want to have precise measurements, like, drag in a guide at like, 500 pixels. And it's really difficult to tell, whether or not you've done that successfully, unless you zoom way in to see the ruler. But I'm going to teach you a little technique, that will get around that. First, though, I'd like you to open up your Info panel. Mine's already open here in the Panel doc. So what the Info panel will show you, where things are when you move them around. So if I were to grab this Green Tea and then start moving it around on the art board, you'll see that the x, y coordinates change, depending on where I move it. Now, the similar thing happens with guides. And let me hide the overlay, well I'm doing this and move this over. So, when you drag a guide out on to the art board, look, nothing happens in the Info panel. But once I release it and then try to move it again, oh, and if your guide doesn't move, you need to unlock it through the View Guides menu. Unlock your guides. There we go. When you move it again, now look what happens to the Info panel. Now you can get precisely, measured guides on your screen. So, if I wanted to try and get it at 500. Okay. Again, it's giving me not exactly. I could zoom in and get it right on the dot. But, that's one way of working. I'm going to delete that guide and show you yet, another technique that also works. So, let's say again, that I need a guide at 500. What I'll do, is I'll use my rectangle tool. Select it on the toolbar, then I'm going to put my cursor right on the zero guide there. Looking at my Info panel making sure that the x coordinate is set to zero pixels, clicking once on the art board to open up the rectangle dialogue box and then I'll plug in 500 pixels as my width. When I click it, it will add that shape to that location, and it's giving me no stroke, no fill. So I just want to fill it, so that I can easily delete it afterwards. Now I'm going to go to my ruler, and drag out a guide, and drag it over to the right edge. It should snap right into place, at the 500 mark. So the guide is perfectly at 500 and then, I can select my shape and delete it. So that's another work around, when you need to get precise measurements. So as I was saying, generally, you'll download a template, you'll set up your guides and then you can start working to lay out the different objects on your art board. So, in my finished design, I have some boxes here. And I might have them go something like this. Duplicate by holding down my Alt+Shift key. You can nudge shapes with your arrow keys to get them in alignment. I think I made that one too long. Anyway, you get the general idea. I'm just going to send these to the back behind my text using the Arrange from the context menu. So that's how you would do it. Just move things into place. If you like to work with the grid turned on, just want to give you another little secret tip about that. So first, we'll turn on the grid, Show Grid. Now, the grid lines are setup to one every eight of an inch, for 72 points. But if you're working for the web, you may want to override that. And you'll do that in the Preferences. Go up to the Edit menu and choose Preferences and go to Guides and Grids. And instead of Gridline every 72 pixels and subdivisions eight. Want you to change that to one and one. And what the does, and I'll zoom in here so you can see, it gives you a grid line every pixel. Now, that's true pixel precision. And when you're moving your objects around, you can have it snap to the pixels and snap to your guides. And that's really going to make the difference between having a nice clean layout, and having sort of a messy organized layout. So hopefully, you can use these techniques to help you with precisely aligning and positioning the objects on your art board. So that at the end of the process, you'll come up with something nice, neat and organized like this.

Contents