|We will be updating our servers tonight between 8:30 p.m. and 11:30 p.m. Pacific Time, which may cause some minor service interruptions. We will restore normal service as soon as possible. Thanks for your patience.|
Start learning with our library of video tutorials taught by experts. Get started
Join Justin Seeley, lynda.com staff author and design enthusiast, each week for a new 5-minute, self-contained tutorial that you can use to instantly improve your design workflow. This series covers techniques for print, digital, and web design, addressing the tools that creative professionals like you use most. Learn new ways to leverage layer styles and vector shapes in Adobe Photoshop, work more efficiently with text in Illustrator, and embed videos and even tweets in WordPress posts, and much more. Check back each week for a new installment, and a new design hack.
Hello there, and welcome back to another installment of Creative Quick Tips. My name is Justin Seeley, and this week we're going to be talking about using grids in your web design and how to quickly and easily generate a grid for you to use in your next project. It's all based on this website that I found called Gridulator. That's gridulator.com. And Gridulator basically allows you to make pixel grids very quickly, very easily, and then download those as a PNG file. Which you can then load into any application you want; Photoshop, Illustrator, InDesign.
Doesn't matter. Now, why are grid systems important? Well, I use grid systems to create nice wire frames and mock-ups that really translate well into easily codeable CSS and HTML. And I think that, if you are a designer doing anything for the web or screen-based design, a grid is definitely the way to go. The trick is going to be determining exactly what your grid looks like, and that's going to be based on the scope of your project. But in any case, let's go ahead and move on. I'm going to go ahead and create a grid here, so I'm just going to go in and I'm going to change this overall width to 1,000 pixels.
Then I'm also going to increase the number of columns here to something like 12. You'll notice as I do that, all of the options start to get a little smaller down here. Once you do that, you're then going to just choose how wide you want your columns to be, and how wide you want the gutter width to be. The gutter width refers to the distance between each column. Now, when I'm choosing a pixel grid, I like to have nice even numbers, so something like 65 and 20. I don't like anything arbitrary like 76 and 8, or 54 and 32. I just like these either five or zero based numbers.
So, if I want to preview this, I can take a look at it. That's what it's going to look like, and so I can hide that. That's cool. I'll hit make PNG now, and that's going to download this to my computer. And now I can launch that up in any application I want. So let's go ahead and go over into Photoshop for a second. And inside of Photoshop, what I'm going to do is just Cmd or Ctrl+O. going to go into the Downloads folder and we're going to bring up that PNG file. And so here's my PNG file. It's transparent, which is really great because that makes it easy for me to then put it into another document.
So let's say I was working on a website design. I'll create a new document here. And I'll make this 1,200 pixels wide. And we'll make it about 2,000 pixels tall to have a full width website right there. So, let's just fill the screen with it, something like that. And then let's go over here and let's take this. I'll grab my Move tool with the letter V. Click and drag that over. Hold down Shift, and it positions it right in the dead center of my page. Now, I can free transform this, Cmd or Ctrl+T. And what we're going to do is we're just going to extend it up.
And I'm holding down the Option key while I'm doing that to make sure it extends the full length of the page. And then there we go, we've got my grid system setup. Now if you're not a fan of having this sort of ruby lithe overlay on top of all of your designs, that's okay. Just bring up your rulers, Cmd or Ctrl+R, and then start dragging out guides. And the guides will actually snap to the edges of this, and you can quickly and easily make your own grid using these guides. Then just simply make sure that when you're designing, you stick to the grid that you've created.
Now if I hide this layer, you can actually see there's my grid starting to take shape right there on my Photoshop document. And so how does this work exactly? Well, let's ignore the grid lines that I just drew and turn my grid back on. While I'm designing things, what I'll want to do is grab something like a Shape tool, and then come in here and align it up. And I'll zoom in so I can actually see what I'm doing here. So let's say I wanted a header. Well, the header might go from the start point right up here and go all the way across. And then stop right there. That would be a 100% of that column width.
Right? Everything goes across all of the columns. And you might have a main content area right here. The main content area might span five or six columns. Something like that. Then you can go over here and you could draw out a little sidebar area. You're just basically creating a wire frame based on this grid. And the best part about it is everything is evenly spaced apart without having to worry about margins and padding, and all that good stuff. It's set up based on the grid. So, again, just go ahead and check out gridulator.com.
Like I said, it's going to be different for every single project that you have, but it's a great way to get started creating your own pixel grids quickly and easily for your web design projects.
There are currently no FAQs about Creative Quick Tips.
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.