Creating a grid from scratch

OK, so you’ve been asked to design a website for a great company, you’ve sketched some ideas down in your sketch book, and now your about to jump into your favorite design package but how do you go about taking your lovely scribble into something you can present to your client here’s how I start.

thumbnail_design

This is a simple tutorial to show you how to create a grid from scratch visually it’s an easy way to avoid doing doing to much maths cause I hate maths! There are many other ways, but this is my preferred method.

For this tutorial, I’m going to create a 960 pixels grid, but you could do it for any size document, the process is the same. Create a new file in fireworks or photoshop, I’ll be using fireworks for this tutorial, but the tools are very similar. I’m creating a document 1200 pixels by 1200 pixels so I will have plenty of room on my screen.

Setting the Base measurement

The first thing I do is set my base units. go to preferences > units and guides, I set my grid settings to 10 pixels by 10 pixels, that means, every 10 pixels we will get a guide, both horizontally and vertically, and set my snap distance to 10, this means any objects I place in my canvas will snap every 10 pixels giving me lots of control to keep things lined up nicely later on while designing.

prefrences

I then go to view > grid > show grid, we can now see our base grid.

Step 1

The next step is to create a vector box the size I want my main grid to be. Remember, I said this was going to be a visual way to create a grid. I create a box 960 pixels wide (as this is the width I want my grid) and 1200 pixels high the height of the document. If you hold down the “shift” key then play with you arrow keys, you’ll see the box you just created moving in increments of 10 pixels.

step1

Step 2

Next I use my align tools to center the box on the canvas and align it to the very top. Go to window > align and make sure its checked, you should get the align tool box appear. Check the relative to canvas button, the align to center and align to top. This puts our box dead center of the canvas and at aligned to the top of the doc.

step2

Step 3

Next if your rulers aren’t already visible, go to view > rulers, the drag a guide out to both sides of your box. The guides should snap to both sides, At this point we can turn off our base grid for now.

step3

Step 4

From my thumbnail design, I know I need at least 3 columns in my grid, and in between each column i want 10 pixels each side, so that gives me a bit of breathing space. Here comes the worst bit the scary math!

OK we’ve got a 960 pixels area to work with, I need to divide that up by 3; 960 / 3 = 320, so we now have 3 x 320. We want 10 pixels either side of each column so that 320 – 20 = 300. Phew, you can relax, thats the scary part out the way. So we now know we need to create 3 columns of 300 pixels each with 10 pixels either side.

Step 5

First thing I do is drag the very top corner of the rulers out to the top left edge of our box, that sets the rulers to 0,0 at the top left of our box, next drag a new guide out to 10 pixels within our box.

step4

Step 6

Next, select the box and change its width to 300 pixels and snap it the the edge of the guide we jus created, then drag a new guide out and snap it to the right edge of that box, and add another new guide 10 pixels to the right of that (all your guides should be snapping 10 pixels). That is our first 300 pixels column with 10 pixels margin either side created. Now we just repeat the process.

step5

Step 7

Now we’ll create our second column. Drag a new guide out and place it 10 pixels to the right of our last guide, Copy and paste the 300 pixels box, and snap it to our last guide, add a new guide to the right edge of that box, add a new guide 10 pixels to the right of that. now Just copy and paste the box to create the last column, and position it into the remaining space.

step6

step7

We can now just repeat the process to create a 6 column, 12 column, by starting dividing each column by two for each step.

Now turn that thumbnail into something a bit more like a website!

final

Do you want to learn more about designing websites?

Check out our Webdesign Beginner and Webdesign Intermediate courses. You will learn about making wireframes, sitemaps, CSS, Html, SEO, WordPress and so on. Contact us here to ask any questions about our courses.

  • Pingback: week 25 | Koen at WCB

  • http://www.webcoursesbangkok.com yoav

    That’s awesome article.I was always wondering about this before

  • Bill

    That was good.I was looking for the way to make it happen.