Categories
Online Marketing

Web Publishing Tutorial: Creating a Custom Grid File

So we can implement a grid system. We’re going to assume we’re using the 960 grid system which comes in 12 and 14 column variations, and it defines 940 pixels of content 940 pixels wide with 10 pixels of gutter on either side of the design now for demonstration purposes will focus in on a 12 Column grid system, but to use a 16 column, we just need to use slightly different values when we set up our guidelines, remember with any grid system online, we’re focused in particular on columns on the vertical lines.

We always want to apply more control and more precision to how our widths are set up than our heights and that’s a main reason for that to get started here. We’re going to go ahead and create our first guideline and we’re going to use those guidelines down the road to guide us as we create boxes and shapes that represent our wire frames. Now, in order to do this, we need to use the rulers in Photoshop and, if you’re looking around – and you don’t see rulers in your version, it may be that you don’t have them active and so to turn them on.

You need to simply tap the command. Our key combination or control our if you’re on a pc, i’m going to do that now and you’ll, see that actually I lose my rulers because they’re already on but command R or ctrl R is a toggle combination. So I just tap it again, and that brings my rulers back now. The other issue that may come up is, we have here a 1200 pixel wide document, its 2,400 pixels tall, and you may have a similar document but you’re looking at your ruler, values and they’re.

Just not matching up now in this case they are. Maybe your values are a lot smaller, though what could be happening is even though you’ve created a document in pixels, your rulers are still up to measure things in inches and any time we’re doing web design. Everything’s a lot easier if we switch everything over to pixels. So in order to do that, all you need to do is tap the command, K or control k.

Key combination: that’s going to open up the global preferences window for photoshop and we’re actually going to scroll down here to the units and rulers subsection and we’re going to check out the units values. Now, I’m all set, my rulers are set to pixels. You can see here, though there are a number of different possibilities and type as well is set to pixels and i’m going to leave both those values.

Just as is so i’ll cancel out of here. Okay with my values, confirmed with my rulers, set up, I’m ready to go ahead and create my first guideline, so I’m going to move my tool set over here on the left a little bit over to get it out of the way, and now I can click And drag from my rulers over on to my document and i’m just going to hold down my mouse or my left trackpad button as I do this and then move this right over onto the document as soon as I release there.

I have my guideline now. If I’m not happy with the placement, I can always move a guideline after I’ve created it. In order to do that, I want to make sure i’m using the move tool which, in my tool palette here, is the very first one. So I can either click on it or I can use the keyboard shortcut v to select the move tool and now I can easily move things around, including my guidelines. So if I hover over this you’ll notice, the cursor changes indicating I can move it left or right and then I can click and drag it in either of those directions.

Now you’ll notice, as I move this guideline, that a little window pops up showing me my exact pixel value for that particular location, that’s a really handy indicator and unfortunately it’s limited to cs6. So if you have an earlier version of Photoshop, you won’t be seeing that value. What you’ll notice, in either case, though, is as I move this even if I’m very careful I’m jumping ahead by four five pixels every time I move my cursor and that’s not very good for the kind of precision work we’re trying to do now, so an easy Way to get more control more precision over what’s happening is to zoom in on the document, and I’m going to tap the Z key to move over to my magnifying glass and because I’m in Photoshop cs6 I’m going to actually click and then drag over here.

Whoop click and drag the other way, and that’s going to allow me to zoom in on the area. If you have an earlier version of Photoshop, you can actually just go to the zoom tool, either click and drag a square over the area that you want to focus on or just keep pressing the mouse button or the left track pad button over the area. You want to zoom in on so now that I’m zoomed in I’m going to just scroll over a little ways here and I’m going to hit V to move back to my move tool.

And now, as I move my guideline left and right you’ll see. Not only can I move it to the nearest pixel, but I’m actually ending up with some decimal values here as well. That’s a little bit frustrating too, because I want to stick to pixels well an easy way to not only stick to integer values, whole integer values, but also to get a little more control over my movement is to hold down the shift key as I do this.

What that’ll do is snap the guideline to the different hash marks on my ruler here so, for example, between 300 and 350, I have four different hash marks, so that means, if I hold down shift, I can go from 300 to 310 to 3. 20. 30. 40. All the way over 250, so down to the nearest 10 pixels, I can move this left and right, which is exactly the kind of control I want for what I’m doing. So. If I wanted to create another guideline, all I do is come back to my ruler.

Click and drag it over and I have my second guideline now the trick is: where do I actually put these guys? Well, I want them in very particular places based both on the 960 grid system. I am based on the fact that I have a document here. That’s 1200 pixels wide well to help us out. I’ve created a document and you can actually download this from the course site in lore. Let’s go ahead and open that up for a second here, so we can see where it is so.

I’m inside of war and web publishing, I’m going to go over to resources to grab this document and it’s the guide placement for 12 and 16 column, 960 grids, so I’ll click on that and I’ll click to download. It’s like I’ve already grabbed it a couple times and I’ll pop it up here. So what this document gives us is the pixel values that we want to use for each one of our guidelines and each line in the document represents a different column, and so we need to guidelines for each column.

In this case, the left guideline is going to be at 130, the right guideline at 192, 10 to 70 and so on all the way down. If I wanted to use a 16 column grid, I would just use the values listed under there. I went ahead and printed this document out, so I have it at the ready and just remember it’s not only assuming a 960 grid, but it’s also assuming a 1200 pixel wide document, and so that’s going to mean that all of our guidelines are going to be Lined up just right so that our web page is centered on this 1200 pixel document.

Let’s come back into Photoshop in fine tune, the ones we’ve already created here. We know we want our first one to go to 1 30, so I’ll hold down shift and move this on down down to 130, and I know I want my second one at nine or 190, rather so I’ll move that to 190. My third one is going to be 2 to 10, so i’ll click and drag hold down shift that snaps to my hash marks on the ruler move that to 210, and my next one is going to be at 270, so i’ll jump over to 270.

Ok, I could keep going just like this and create all my guidelines. Show you one more way to do this, though, that’s available in all the recent versions of Photoshop, and it may be a little faster, especially for those of you using older versions who don’t have the benefit of the little display that pops up and shows me. My exact pixel value as I drag so it turns out. We can create these guidelines using the menu and we do that by going to view up in the menu area here at the top, and we come down to new guide and it’s going to give us two options.

Basically, we can choose the orientation. Remember we’re sticking with vertical, so that’s good and then we simply provide the position value. So I’ve created my first four guides. I know my fifth one has got to be at let’s see here to 90, so i’ll type in 290 and hit ok and there’s my guide so back up to view down to new guide and I’ve created 290. So 350 comes next punch that in and there’s my next guide.

Well, there’s always a way to do things faster and it turns out. Even this can be sped up a little bit by using a keyboard shortcut, and this is actually a good trick to know any time you want to speed up something that doesn’t already have a keyboard shortcut available. This is a really great flexible way in Photoshop to customize the interface so you’ll notice. If I come to view new guide, does not have a keyboard shortcut set up for it, and I know that because to the right here, there’s no key combination as you’ll notice.

On some of these others like, if I wanted to see extras, I can do command H and, as we saw earlier, rulers our command are well. I have no keyboard shortcut for new guide, but that doesn’t mean I can’t set one up and in order to do that, all I need to do is come over to the Edit menu and then come down to keyboard shortcuts from here I can choose my different Menus and I’m going to go back over to view because that’s where the command, I’m looking for libs and I’m going to scroll down and there’s so many different things that can be mapped to keyboard shortcuts.

But I’m going to come all the way down to new guide there. It is and to provide my shortcut. All I need to do is literally click in here and then type the shortcut literally type, the shortcut that I want to use for this particular command. Now the trick with this is because there are so many shortcuts already set up. It can be tricky to find one. That’s not in use now, I’m pretty sure if I do command shift one that that is a available shortcut.

So let me try that command shift. One: okay and if you’re on a PC you can do ctrl shift one to do that as well. I’ll do command shift one. I got no warning telling me that it was taken, but you’ll notice. If I get rid of that and do say command R, which we know is taken now I get a warning saying it’s actually going to replace that old command. So I don’t want to do that so I’ll undo that and again we’ll do command shift.

One control shift: one is a possibility, if you’re on a PC, although frankly you could make this anything. You want just make sure you remember how you’ve set up your shortcut, so you can easily get back to them. Okay, command shift one and will enter in there to save that, and then click. Ok, now that we’re back in our document, we can command shift one, and lo and behold our new guy dialog box opens up.

We can set the position we just did 350. So now we’ll do 370 and we hit enter and there’s our guide command shift. One to create another guide will do 430 and we’ll just go through a couple of these, so you can see how fast this process really can get. And again I printed out the document with the ruler values or the guide values I should say so. I have that right beside me here to speed this up and i’ll do one more okay, so once everything is done, we can zoom back out and we’ll have ourselves the makings of a really good wireframe document with our 12 different columns or if you wanted to You could use a 16 column grid, no problem right about this time.

It’s probably a good idea to save the document, save all that hard work that we’ve put in here and in a follow-up lesson, we’ll talk more about actually creating wireframes and we’ll see you then


 

By Jimmy Dagger

Find out my interests on my awesome blog!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.