Make your own grid

Hi everyone, it’s Dan from Bring Your Own Laptop.

I’ve been asked a question to do with columns and designing websites in photoshop. Now one of my students in one of the online courses, Kerren, has asked - he’s got a page that he has designed in photoshop. He’s got his own page, but he’s finding it hard to keep a consistency across the other pages that he’s designing in photoshop.

Now, he’s asked, can I add a 12 column grid after the fact. He asked this because probably the most famous, or the most common framework for doing this kind of grid system on a website is something called Bootstrap. Now Bootstrap uses a 12 column grid, so he wants to know, can I add it to photoshop after I’ve made it. Now, in terms of adding it beforehand, it’s really easy, - you just find a template that has it. I’ve got one that you can download, - I’ll put a link at the bottom here. Essentially, start with something like this in photoshop, and you can see if I turn the grids on here, you can start to see that there’s 12 columns in all of these.

OK, so you can start with something like this, but say you’ve got an existing file, and you want to add to it. In terms of knowing what kind of columns you need to add is the first part, so if you’re using something like Bootstrap to get your grids going even if you're not, it's a good starting point anyway. I’m using this version 4 which is in the alpha testing at the moment but it'll be live soon. It will be live soon. I go to documentation, then I go down to layout we’re looking for this one called grid. I scroll down here, scroll, scroll, scroll. This is the one I’m looking for, “Grid Options”

So, say we’re designing for this home page here . OK or the large desktop view, which is 60rem now - to go through rems now is not the purpose of this course, it’s in another one that I’ve done, but the basics are 60 times whatever the default rem is which is normally 16 pixels which gives you 960 pixels across. So that’s your width for your desktop view, - so 960 - so you want to turn it into 12 columns. OK So there's a default of 12. What it’s doing now, it’s going to add 15 pixels either side of those columns. OK so you divide your 960 by 12, and then you have to allow 15 pixels on either side of your columns, as like a little bit of a buffer, or a column width. that’s what we need to do. If that bamboozles you, don’t worry, it bamboozles me too. So just copy what I do in photoshop. I’ve worked it out ahead of time. Let’s go to photoshop, and let’s make a new document. I’m going to have a width of 960, height doesn’t really matter, we’ll use 1800.

Let’s go to resolutions 72, so say you’ve got this existing site - this one here. Now what we want to do is, we want to add columns to it, so the long way is, you can turn your rulers on, - you go to rulers and you can start dragging this out. Now the big problem with this is that to be honest it would be impossible. Like you’d be dragging these things out, and lining them up with the rulers. there’s other slightly better ways of doing it, but you’d be there forever trying to line things up. If you’ve done it before you’e probably going to cry when you see this easy method. So let’s switch to the easy method. Let’s go to view, there’s one down here that says “New Guide Layout” so if I click on this one here, it does some nice things. It’s got some presets so I can go to 12 columns. Magic and I can also go to the gutter, - remember the gutters in this one was 30, OK, so you can see in the background here there is gaps of 30, but what I want to do is, I need 15 pixels either side of the column, so I’ve got the 15 pixels either side to make the 30 for these centre ones, but I need 15 pixels on these outside guys as well. So that’s where this little margin comes in. So I turn the margin on - left 15 pixels, right 15 pixels - and click OK. You’ve got a 12 column grid with the perfect 15 pixels on either side, guttering or padding between them, on an existing document.

Now I love to share and help, so drop me any questions you might have in the notes below.

If you’re serious about learning how to make money building professional website mockups in photoshop, now you can check out my full course of over 50 videos, there’s a link in the description. As always please like and subscribe. Haere Ra good people. I always wave at the end here, no reason for it.