Layers - How to tidy up with grouping

Alright, in this video we’re going to look at using layers. Now our documents, slowly but surely are becoming into a crazy mess of things everywhere, ok and it’s going to be a little hard to work with, especially if we send it to somebody, say we’re designing it, and we’re sending it to somebody, who say is a developer, and doesn’t use photoshop very much, and has to work with it, it can become really complicated for them to use. It’s even becoming a little bit too complicated for us to use, so what we are going to use is something called layer groups. Now layer groups is a way of kind of just grouping everything together. and it makes our layers look a little tidier.

So what we’ll do is, we’ll start with our group of our navigation. There’s a couple of tricks we can use to find everything, so what I wanted to do is, actually let’s use this Hero box here, so I’m going to use a little trick. Turn on auto-select, and what auto-select allows us to do is drag a box around everything here, and it will select everything it can underneath that little dotted line, and you’ll notice in my layers panel here, way down the bottom here, it’s picked everything that it found within that layer. Turn auto-select off, ok, and give it a wiggle, just to make sure it’s got everything we need, and nothing it doesn’t. ok. and then I’m going to go to edit undo, or edit step backwards, and put it back where it was, and now I know it’s all in the right place. What you do is, all you do is click this Group 1. Photoshop is pretty clever, ok and it sticks them all in a nice little group, and the group has ended up above our navigation, but that’s something we can fix afterwards, and we’ll call this one Box Hero. ok and that’s this one. I’ll turn it off for the moment.

Alright, the next thing we’re going to do is select the navigation, so I’m going to turn my auto-select on , and grab everything along here. You can see it’s picked these 3 elements here, which is perfect. If I go auto-select off, and give it a wiggle, just to make sure it’s got everything I want, and nothing I don’t. Hit the group button, and let’s call this one Navigation, Box Navigation. ok I’m going to drag him above this guy. Oh, I dragged him into it, so be careful when you’re dragging it, like I dragged this. Can you see the little line running around the outside, that’s going to drag it inside my hero box. What I want to do is actually drag it above, and you’ll see the difference, - see that little line that appears between them, rather than over them, ok that will mean that it’s just above. I’m going to turn both of you off. Now I’m going to grab my tool again, select both of these guys, ok and it’s picked everything I need, group them, and this one is going to be called box, and this one was our who box, our Who we are box.

I’m just going to turn them off now, and turn that one off. ok, and now we are up to our services page. I’m going to grab the same 2, auto-select on, select them all, I’ll have to turn them off, give it a wiggle, - make sure they’re all we got selected, nothing, we don’t, ok then group them. This one is our services box, services ,alright, auto-select on, grab all these guys and add them into the group. Let’s call this one box, and this one is going to be Portfolio. Turn this one off , - this is our teams one. So we don’t want these on, turn it off, give it a wiggle , and we’re going to group this one together. This one is going to be called team box team. Great. Turn that one off, and we’re down to nothing really else, ok.

We’ve got our contact form of footer, and what we’ll do is, we might as well put these into groups now, ok - this one here, if it doesn’t end up in the group, what you can do is click, hold and drag it into the group , ok like I did there, and this one is going to be called box contact form. And this last one, I’m going to put on here ok, we’ll drag it inside, and this one is going to be called box, and this one is going to be called footer. Great twirl these up, these little arrows, turn them off.

You’ll see this guy, this lone ranger here, ok he’s a type layer, but he’s called layer 1. If there’s a type layer, and it’s called layer 1, it means there's a type layer with no type on it, so actually this thing has no purpose in the world. It’s something that I’ve started to type, and I’ve not got around to doing it, have forgotten about it , and left it there, so his guy here is a lone ranger, so he doesn’t appear anywhere on this. If it has a word in here ok. It’ll be a word somewhere hidden on your document, so you need to go and find it, ok. In this case I’m going to delete it, click delete.

You can see now I’ve gone through and grouped everything. It becomes a lot easier to work with, ok, especially when we start doing our mobile design. ok. I can turn everything on, and what I might have to do is play around with the layer order, depending on which layers they are on. I’m going to turn my helpful column guides off. Everything else is stacked up nicely on top of each other, and we’re ready to go.