Page guides, columns & rulers

When you are working with a responsive layout in photoshop,  I use the term column, grid  and guides a lot interchangeably , because the overall term is called a grid, but really when you’re looking at them they’re just columns, and to define these columns in photoshop we just use guides.  Confusing, yes, kind of.

So have a look at the finished version of this one - you can see here these little blue lines. These light blue lines are guides.  They help me make up my columns in my responsive layout. So if I go back to my empty document, - how to make a guide, how to make your own guides, go to view, and you’ve got to make sure that something called the rulers is turned on.And what you’ll notice is that on the sides here, the top and the bottom, that these  little rulers have appeared.  What we can do is anywhere in this area here,  we can click, hold, drag, drag, drag, drag, drag, that would dump a guide on our layout.   We drop ones from the top as well and what will happen when you’re working with the downloaded template that I’ve given you, is that you might need to move them, or turn them off, or lock them.  By default your template is probably locked. That’s because I didn’t want you to go and wreck the guides - that if you want to move them around, or lock them or unlock them, go to view and go down to lock guides, and what that means is that I won’t be able to move these.  I won’t be able to move them.  Watch.  they’re kind of all stuck there. 

If I want to unlock them I un-tick this and then because it changes a little bit then I can move them around afterwards.  Say there’s a guide I don’t need anymore, what you can do, is you can select it, and to delete it, you click, hold, and drag it back into the ruler where you got it, and it disappears forever.  OK, I’m going to delete that one, go back over there.  When you are working though,  you’ll notice on - say this one here,  those guides can be quite distracting.  Helpful when you are first starting out, but quite distracting later on.  So what you can do is turn them on and off.  So go to view, there’s one under show, and it’s this one here called guides.  Now you’ll see this shortcut here, -it’s  command and semicolon, or control and semicolon on a PC.  I use that one quite a bit.  So when I’m working, I’m hitting command, semicolon on and off, when I’m working, because it’s a lot easier to see, and kind of get a bit of a visual going without the guides.  But structurally  the guides are quite helpful.  That’s how to create, modify or delete guides.