Lessons:27Length:3 hours
  • Overview
  • Transcript

2.2 Working With Grids

Hey, welcome to lesson number two. One of the tools that will help you create really good looking websites is represented by grids. Now there are two types, vertical grids, which separate your content into columns. And horizontal grids, which are more commonly known as baseline grids. So, I'm gonna open Photoshop and show you both of them. So the first one I wanna show you is the vertical grid. Now, as you can see we have 12 columns here. 12 grid columns. And the idea is when you're working with with a grid like this is that you will make your content fit inside these columns. So for example, I might have like a sidebar, which will take up three grid columns. So you would do something like this and then maybe you would have some content, which would take up four column grids and you would do something like this. Yeah, and then the rest of five column grids will be used for something else. It's really up to you how you use this grid system. This is mainly used as a guideline, right? It shows you how you align content, how you organize it in your page. And in some cases, the PSD version of the grid also has an HTML and CSS correspondent, so you can port your design really fast from Photoshop to HTML and CSS. Now there are lots of options for these vertical grids. They can come in 12 columns and 16 columns, 24 columns and so on. Some frameworks like tutor Bootstrap, also gives you the option to create your own grid. You know, specify the column width, the gutter, which is this distance between columns and so on. So you're really flexible with this. Now let me give you some example of the grid variations you can use. Personally, I'm a big fan of the Twitter Bootstrap grid system. I can go to, this is a very popular framework, CSS and grid system. Now this is a really, a really complex grid system. You have all of these options for mobile devices, smaller devices. You can see an example of the grid system right here. And if you like to use this, this grid system when you're coding stuff, you can also get the PSD version for it, an exact replica by Googling boostrap3-grid-system. There are a few resources, a few sites that offer PSDs for that particular grid. So check out the lesson notes, I've included a link there. Another option for a grid system is the 960 Grid System or 960 GS. This has been around for many, many years. 960 comes from the traditional content width for, for a website. That used to be 960 pixels. The 960 GS is basically a 12 column grid with a total width, as I said of 960 pixels and you can also grab some PSDs for it. So Photoshop documents. So, I'm just gonna give you an example here. See this this website? If you show the grid, you'll start to get an idea of how the content is organized. Now, if you're just starting out, I recommend using something very simple, like Skeleton. This is really easy to use and it also offers some PSD templates that you can get right here. So you can get started a really fast. You can also see an example of the grid system. How the columns are organized. And basically, you can use any combination of these columns to create your content and let me give you an example of the code behind it. So they have a general container, which will will hold the grid and then they have divs with a class of columns proceeded by the number of columns. So 16, 3, 3, 6 and so on, you get the idea. Now I wanna move on to the baseline grids and I'm gonna go back to Photoshop. And I'm gonna activate and just delete these two and I'm gonna to show this baseline grid layer and as you can see this added a bunch of horizontal lines. That are very similar to the ones you find in the notebooks when you used to write in school and you would do that to learn how to write in a straight line and also how to space text correctly. Well, baseline grid and Photoshop are actually pretty similar. They help you create a nice, a visual rhythm to your page and you can use them to your advantage. For example let's say, I have like a box here. I can quickly align it to the grid like that and also set its height. And if I duplicate it, I can easily set a specific margin from the box above it. Duplicated again and I can easily set the same margin. So, as you can see already, you can start designing faster, because you have this this grid system that help you align things and calculate distances much faster. For example, when I work I, I don't really think about numbers. I have my baseline grid and I set like, when it comes to margins between elements, I set either one row or two rows or three rows and then I stick with that. And it's very easy for me to, to move things around when I know exactly how many rows from this grid system I have to use. So, in this case, I use two rows. So, I have two rows here and two rows here. Now, in order to use these baseline grids, all you have to know is the base font size you're gonna use throughout your design. Once you know that, multiply it with 1.5 and you get the baseline. So for example, if your base font size is 16 pixels, your baseline will be 16 times 1.5, which is 24 pixels. All you have to do now is create your grid. So let me quickly show you how to do that in Photoshop. First of all, you need to create a new document. Width is gonna be one and height is gonna be that number you just obtained. So, in my case, it's 24 pixels. Hit OK. Zoom in to something like this and you need to make a selection of the last pixel from the bottom. I'm gonna create a new layer, fill that with any kind of color. In my case, it's blue, because that's how I usually create my grids. Hide the background. So, it's transparent, then go to Edit > Define Pattern. Give your pattern a name. Let's say, Test Baseline 24 pixels. Hit OK and you can close this document. Now, I'm gonna create a new layer here. Let's call it Baseline Test. I'm gonna fill it with white, all of it and then I'm gonna double-click it and can go to the Layers Styles. Go to Pattern Overlay and from this list, I'm gonna scroll to the very bottom where I have my newly created pattern, Test Baseline 24 pixels. And it also shows you the size, which is one by 24 pixels. Select that. You can hit Snap to Origin, so it begins from the very top. Hit OK. And now what I'm gonna do is I'm gonna lower the fill all the way to zero, so that way I can still see the pattern, but not the solid color. And that means I can overlay this grid on top of everything else, so that's how you create a baseline grid. Now my advice is to always use grids, no matter how simple your project is. Okay. In the next lesson, I'll talk to you about using Google fonts.

Back to the top