FREELessons: 7Length: 47 minutes

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.1 Grid Planning

In this lesson, I will show you the Photoshop file that you will be working with for the duration of the course, and I’ll explain how to use Photoshop guides to plan out your grid structure.

Useful Links

2.1 Grid Planning

Hello and welcome back. In this lesson we're going to take a look at the Photoshop file that we're going to be using at our starting point for our website. And this particular design was very generously donated to our cause by Anthony Harmon. You can view his website at So this is the basic layout that we're gonna be starting with. Now, in this course, we're talking about broken grid layouts,it's a fairly popular type of layout these days, and it's just what it sounds like. It's a layoff that doesn't fit in the traditional grid based system, or grid based layout system. This is something you couldn't build with Bootstrap, for example. Unless you made some drastic modifications to the Bootstrap HTML and CSS. But as you can see, we have these various blocks of images and texts that don't exactly line up. So you will see the title for this section here is off to the left. If we scroll down a little bit further, we'll find another block of text that is a little bit to the right of where our first block of text is. So it is all kind of offset a little bit, nothing fits within a traditional grid, but it has a really nice flow to it, and it looks really nice. This is what we are going to be building in this course. I want to start off in this particular lesson by talking about how to plan out the grid that you are going to be building. We are going to be using the CSS grid layout model. And as always when you're building something with a particular feature of CSS that might be relatively new. You want to check out websites like just to see what browsers this works in and what browsers it doesn't work in. If you need to support older browsers it might not be a good idea to build your entire design around the grid layout system. But at the time of this recording most new browsers do support grid layout, in fact, all of the major new browsers do support it. Now, one quick disclaimer, I did make some changes to the original file that Anthony sent to me. I changed the fonts, because I wanna be able to access Google fonts here. So that'll be easier to pull in whatever fonts we're gonna be using. So I'm using Google fonts instead of the original fonts that were part of this design. I've also shifted some of the graphics around just a little bit. But that was more for the sake of instruction than it was for needing to tweak the design, the design itself was perfect. Okay, so let's get started talking about how we would lay out this first section. Now if we were using some kind of traditional grid system we would have a series of columns and rows. And then we would try to fit all over our content inside those columns and rows. And it's very limiting, for example, if you're using the Bootstrap grid system, because everything has to be in the right order. The top left grid column needs to come first, the one next to that needs to come next, and there's no sense of layering. And layering is where the real power comes in with the CSS grid system. So let me drag out a couple of guides here to just to kind of illustrate what I'm trying to say. Let's say that we did have some kind of grid here that was all evenly spaced. And you can certainly do it this way doing the grid layout system, but there's a much easier way that we'll talk about in a second. So you could have all of these evenly spaced rows and then evenly spaced columns. And I'm not trying to be real particular here but let's just talk very quickly about how this would work. If this were our grid system that we laid out in CSS. What we would do is, we would tell our browser that, for our logo here in the upper left, that that logo starts in the second row. It starts in the first column of the second row, and it spans two or three columns. For our 2018 here, we might shift these columns around a little bit so they are a little more aligned with that. And we might say that this 2018 graphic here, will start in the third column in the third row, and that it will span four rows. And so you can lay out each little bit of your content like this, and then you could say that this background image with the buffalo in it. It starts in the first column in the first row, and it spans all of our columns and all of our rows down to a certain point. Now one thing I am going to do, is I am gonna split this up into multiple grids. If we were to try to squeeze all of this content into one particular grid system, then we would have a lot of columns and a lot of rows. And it would become unwieldy very, very quickly, it's a lot easier to break these up into small chunks. So what we're gonna do and I am just gonna hit F12 to revert back to the last saved state of this document. And what we are gonna do here is we are gonna break this up. So we are gonna have section one which is just gonna be the buffalo, the 2018 and then the Powderhorn logo. And for that buffalo background, you'll notice that it does kind of come down and blend in with this next background with this lady in a ski coat. And I'm actually going to split these up right about here, so you'll notice our buffalo image is going to come down quite a bit in to this second section here. And that's no problem once we set up our second grid, we'll just pull it upward using some negative top margins. And as for this fall look book text here, on the left this vertical text. What we're gonna do with this one is, we're going to include it in the second section instead of the first because we need it to overlay. We want it to be on top of the first section. And when you're putting two different HTML elements in the same location in the browser. Whichever HTML element comes last it's going to be on top of the first one, unless you manually switch the Z-index. So just to avoid having to mess with Z-index all the time. I'm going to put anything that needs to be on top, after whatever needs to come underneath. So the way that we would set this first section up is I would first identify what objects in this section need to be placed. And in this first section, there are only three things that need to be placed as we've already discussed. We have the background image of the buffalo. We have the 2018 text, which you could actually include as part of the background image if you wanted to. I'm not gonna do that, I'm actually gonna break it out into a separate image. And you also could use actual text in HTML, and then just rotate it with CSS. But just to keep things simple in this course, I'm actually going to export that as an image. And then the third thing that we have to layout on this particular first section is the logo itself. So what i'm going to do in Photoshop is i'm just going to drag some guides around each of these sections that need to be laid out. In order to kind of figure out how large those sections need to be. So these guides aren't actually going to do anything for us in the long run except to help us plan out our grid. So I would surround our Powderhorn logo first of all. Now, if you wanted to get really particular, you could select the Logo folder over here on the right. And you'll notice that has the, if we expand that out ,that has both the vector smart objects that make up our logo, which is the icon itself in the text. And if we have that folder selected then we drag out a guide, you'll notice it'll snap to the edges of whatever it is in that selected layer or folder. But we don't have to get that particular with it, in fact, we can just kind of loosely draw out our guides here. And again they don't have to be perfect, because we're not gonna make them perfect when we pull them in using CSS. We're going to get them close and if that bothers you, then you can certainly make them more precise if you want. So I'm going to drag guides around our 2018 here. And that is the layer that's selected, so you'll notice it is snapping to the edges there, which is fine. And then I want to draw a guide for the bottom edge of our background image where our buffalo are. So I'm going to scroll down a little bit and I'm going to drag a guide down to right about here, and notice that is at about 1221. If you want that to be at a nice round number you could instead go to view, New guide. You drag this over and this is gonna be a horizontal guide, and I can set it let's say at a position of 1220. And there we go, it will place it there for us, so that's our entire first section. Now I am not gonna pull out the guides for the second section yet, because we'll have to surround a bunch of these text her. And the more guides we drag in the more its going to confuse us when we start trying to look back at our first section. So for me its gonna be a lot easier to save this as separate files and each file will have a different set of guides in it. Well the good news is I've already done that and if we jump over to this second file here, which is called layout grids small section one. You'll see that I've already laid out the guides here. And these guides are as you zoom in and look at it they are tightly closed around each of these sections. Which is going to allow us to be pretty precise if we want to and all of these files can be found in your project files folders. So, I'm going to open up that folder, and you'll see that there's a different PSD file for each sections. So section two is going to look identical, it's just gonna have a different section or different set of guides in it. So if we zoom in here, you'll see that we now have guides that are surrounding the fall look book, for example. We have guides surrounding the Powderhorn text in the play button, we have more surrounding the text below it. And then we have another set of guides surrounding the woman down here, as well as this background image that we have here. So we actually have two background images going on. We have the one with the woman in the ski jacket and then the one on top of it that has the clouds and the cliffs and things like that. And for this particular design for this section, I'm going to include this version of the logo here as part of that background image. I'm not going to pull that in separately, but you get the basic ideal. And I would encourage you, before we go any further, to go into each of those PSD files and take a look at how these grids are set up. Once we jump into CSS we're going to actually mimic this grid setup and we're going to define how each of these columns is set up. We're gonna define the width and height of these columns and rows. And once we get that set up it'll be really easy to then drop in the content wherever we need it. So thank you for watching and we'll get started in the next lesson.

Back to the top