Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
When it comes to actually designing a web page, it's important to have this concept in mind about working with a grid. Now in general, regular page layout, if you go and take any class or read about books, they talk about creating some kind of a layout grid, and that's kind of nice, but when we think about web design, I'm not specifically talking about how to actually create a grid for design, but more of along the lines of how you intend to actually build this when it comes to actually building a web site using HTML or CSS. Now in truth, if you think about certain types of design, if you know you're going to be building your web site using Flash, you are not really bound to be working inside of a specific grid, because Flash doesn't require you to work in that way.
However, when it comes to building pages using HTML and CSS, we're going to be using divs or these divisions or areas of our web page, and the main goal here is that you're able to actually work with each parts of your page individually. When you think about something called fluid layouts, those are areas where this is a general basic idea what my page might look like, but of course, if I resize my browser or if I view this web site in a different type of device, things may shift and move around. So it's always best to kind of put yourself in some kind of a framework here that you can think about how your design is going to work.
Now in general, I tried to design my web sites to width of about 960 pixels. I do that because the most standard type of monitor resolution out there is 1024x768 and you want to have some kind of wiggle room along the sides for things like scrollbars or the chrome of the browser itself, so I usually have things set to about 960 pixels in width. Of course, the depth really doesn't make much of a difference, so I don't really have that notated here in this sketch that I create, but what I'm looking at right here is some kind of a sketch or a layout that I'm going to be using for my web site design.
Now of course, every web page can be somewhat a little bit different here, but I want to have areas, for example, on the left side here for navigation, maybe I would have some kind of sidebar content, or things that exist here along the bottom. I have some main area here for my body copy,. Maybe I want room for advertising here at the top, for example. So these are all things that I'm keeping in mind as I'm thinking about structuring the design for my web site. Now, I may do this in paper. I may sketch it out with a pencil, so on and so forth. It really doesn't make any difference here. I just want to have some kind of a framework in mind.
I will then kind of translate that into something that I can now use on a computer itself. So I'm looking at over here just my basic sketch and I put out also some pixel measurements, because these are the things that I'm going to use as a base for my design. I am going to switch over to a different artboard here in this document. It's the Grid artboard, and I am going to double-click here, and this is what I'm going to end up coming up with after I've built that. I'm using these boxes, just right now, just regular plain black or gray boxes here to get a better idea to structure, but more importantly, I'm going to be using this to define my slices over general areas inside of my layout.
Now, even if you're not thinking about using slices per se inside of your document, and again, we'll have a whole chapter in this title that focuses purely on working with slices. But for now I'm not thinking about slices as my final output. I'm thinking about slices in Illustrator as the ability to consider or think about each part of my design as a completely separate element. The reason why is if I go down to my page design artboard, you can see how those slices come into play. One of the beautiful things about working with slices is that I have the ability to export those slices as individual graphics.
I also have a way to take those slices and convert them to divs in a layout inside a Dreamweaver. Of course, those slices all had their own pixel perfect dimensions, which can help a developer understand how I better want to layout my page as well. So let me show you how I go about the stage of actually defining this grid. Remember, if I go back here to the sketch, this is what I might create on a piece of paper and maybe scan it in Photoshop and then kind of bring it into Illustrator that I can use it as a base for my design, or even if I just sketch it out on paper, I can now quickly create a digital version of that in the following way.
I am going to go to my Grid artboard here. I'm actually going to take all these elements and now delete them. And I usually start with just drawing regular plain rectangles and I'm going to use the Transform panel to do a really good job on just making sure that everything lines up correctly. I am going to zoom out just a bit here. This way the grid is my active artboard right now. But in this case here I can actually see all the pixel measurements that I've created here inside of my sketch. So I may now start by grabbing my rectangle tool here and just clicking once on the artboard. Remember, when you click once on the artboard with the Rectangle tool, a dialog box shows up that allows you to specify the exact dimensions of that rectangle, instead of trying to eyeball it.
Yes, we have things like guides and things that we can snap to an Illustrator, but I almost never trust those. I simply go directly with the actual measurements that I want to define using dialog boxes. So I know the width here. Overall it's going to be 960 pixels in width. So I may type in 960 - that's the overall width that I have here - and the height really at this point doesn't make much of a difference, so I'm just going to type in about 1200 and click OK. Notice that my rectangle is right here. I am going to change its color to kind of a dark gray here, maybe about, this one right here.
This I find very useful. You'll find that the profiles that come with Illustrator all have a color group that is called Grays, and it just makes it easy for you to quickly mock up a document using different shades of gray, especially here where we don't care about the colors. We just want to know a quick way to make a distinction between different areas. So I'm going to choose like a dark gray color here for the fill. I'm not going to be using a stroke here. Even though that Illustrator does have this pixel snapping ability, I want to make sure that I'm working directly with just to fill up my objects, so I know distinctly which areas and what dimensions those areas are going to be.
So, I now want to position this rectangle where it needs to go. I am going to come here to my 9- point proxy and make sure that the upper left-hand corner is chosen, because when I do so now I'm always going to be measuring my position and the artwork itself from that upper left-hand corner. It's just going to be easier to memorize. We'll see later on I may decide to actually change that a few times here and there. So, I have now the ability to see that my width and height are the same that I specified, 960x1200, but I want to change my x-coordinate to zero and my y-coordinate to zero.
I'm going to hit the Tab key as I enter those in. So now I can see that box now snaps right into the perfect position just where it belongs. This is actually one of the nicer things that's new also in Illustrator CS5. It's that now the origin point or the 00 point of my ruler is now on the upper left-hand corner. It used to be on the lower left-hand corner, which made it difficult to think about how to position artboard, but now it's really so much easier. So I'm now going to create now a second rectangle. I am going to click again once on my artboard, I'm going to change this rectangle to be 270x675, and I'm just reading those values right off of this rectangle that appears right over here.
So I'm going to click OK. I'm going to change the change the color of this rectangle to a wider gray, maybe around this color right here, and now I want to position that in the right place. Remember that I've specified padding here of 20 pixels that's basically the area that exists between the divs that I have right over here, and I can use that in various ways when I'm building CSS. But for now I'm thinking about padding in that way, so I want to actually offset this to 20 pixels, so I'm going to change the X value to 20 pixels and the Y value to 20 pixels. So again, that snaps right into position. Again, I'm hitting the tab key after I type in all these values.
A little tip here, by the way. You can actually click on the X or the Y here to highlight the whole thing. I don't spend time like clicking and dragging to highlight these things, because it's just extra wear and tear on your wrist, and it's hard to kind of highlight those areas, and then once I have a value highlighted, I'm using the Tab key to actually move between these different values. One think you can also notice that Shift +Tab will take you backwards throughout those fields as well. So now I've the first rectangle. Let's now create the second rectangle. So I'm now going to go ahead now and click once on the artboard here.
Let's do this one right over here. Let's do 630 pixels wide by 110 deep. Click OK. Now I know that the Y value here is going to be actually 20 pixels, because that's going to be offset from there, but now I've to figure out exactly where it's going to go in this case right here, and this is what I love about working Illustrator and the transform panel is that it works with math. It's just like a calculator. Every single field in Illustrator is a calculator. I'm going to click on X over here to highlight the value. I know that right now this one is 270.
I also know that I've a padding of 20 pixels on this side, and I know I going to want another 20 pixels of padding on the right side of this. So it's 270+40. You can actually just type in here 270+ 40 and hit the tab key to accept that, and it automatically does the addition. It makes it 310, and this way I don't have to worry about having a calculator by my side and try to figure out the math on my own. You know, I realize now that I typed in 360 instead of 630 for the width, but that's totally fine. I can just hit Tab over here, type in 630, and then correct that right here as I'm working.
Let's create one more rectangle here. I'm going to click right now on the artboard. Let's go ahead and create this one right now. I'll do 630, instead of 360 this time. That's just me being dyslexic, by 545, I'll click OK, and I'll want to snap that right into position. So once again, I'm going to click on the X value here. I know it's 270+40, which is 310, so I'm going to type in 310 for the X value. And now for the Y value, it's going to be 110+20 and 20, which makes for 150, so I'm just going to type in 150 here and now that rectangle snaps right into position.
So you can see how I'm building this grid here and eventually this grid is going to be my web design. Once I'm done, what I'll do is actually take all these elements and select them, and I'll give them a fill of none and a stroke of none. I don't need to see them. In fact, you may also decide to put them on a separate layer. Notice over here I've a grid layer that I've created and then what I would simply do is go to the Object menu and choose Slice > Make, and this actually converts them all into slices for me. Now I have the entire structure the way that I want my web page set up.
I can start to actually lay down the design elements as well. The main thing to think about here is that you're first creating some kind of a grid and you're using Illustrator's Transform panel to precisely position these elements, which will then turn into slices that you can usually used to export your artwork as needed later on inside of your workflow.
Get unlimited access to all courses for just $25/month.Become a member
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.
Your file was successfully uploaded.