Layers - How to tidy up with grouping

This lesson is exclusive to members

Course contents
SECTION: 7
Color 3:42
SECTION: 10
Page adjustments 1:28

Questions

0
0

Course info

49 lessons / 3 hours

Overview

Web design skills are one of the most employable opportunities of our lifetime. In this course you’ll learn how to design a professional website in Photoshop. We’ll start right at the basics of Photoshop and work our way through to building professional website concepts.

I created this course for people new to the world of website design and Photoshop. I created this for people nervous about changing their careers into the world of web design.

You’ll learn how to design desktop, tablet and mobile versions of your website. You’ll learn what types of files and code are required at the end of your job. This course is for people serious about making money as a professional web designer.

Now let me help you earn more money, get that job and become more awesome!

What are the requirements?

  • You'll need a copy of Photoshop CC 2015 or above. A free 30 day trial can be download from Adobe here.

  • No previous Photoshop or web design experience is necessary.

What am I going to get from this course?

  • 49 lectures 3 hours of content!

  • Forum support from me. 

  • All the techniques used by professional website designers.

  • Ways to preview your designs straight to your mobile device.

  • Firm understanding of responsive web design.

  • Professional workflows and shortcuts. 

  • A wealth of other resources and websites to help your new career path.

What is the target audience?

This course is for beginners. Aimed at people new to the world of web design. No previous experience is necessary. 

This course is NOT suited to people highly experience in the world of website mockups in Photoshop already.

Course duration 2 hours 43 mins

Get the completed files here
Daniel Scott

Daniel Scott

Founder of Bring Your Own Laptop & Chief Instructor

instructor

I discovered the world of design as an art student when I stumbled upon a lab full of green & blue iMac G3’s. My initial curiosity around using the computer to create ‘art’ developed into a full-blown passion, eventually leading me to become a digital designer and founder of Bring Your Own Laptop.

Sharing and teaching are a huge part of who I am. As a certified Adobe instructor, I've had the honor of winning multiple Adobe teaching awards at their annual MAX conference. I see Bring Your Own Laptop as the supportive community I wished for when I was first starting out and intimidated by design. Through teaching, I hope to bring others along for the ride and empower my students to bring their stories, labors of love, and art into the world.
True to my Kiwi roots, I've lived in many places, and currently, I reside in Ireland with my wife and kids.

Downloads & Exercise files

Transcript

All right, in this video we're gonna look at using layers. Now, our documents slowly  but surely becoming into a crazy mess  of things everywhere, okay? And it's gonna be a little hard to work with,  especially if we send it to somebody who's,  say we are designing it  and we're sending it to somebody, say, as a developer,  and doesn't use Photoshop very much and has to work with it  and can be really complicated for them to use. Um, it's even becoming a little bit too  complicated for us to use. So what we're gonna use is something called Layer Groups. Now, layer Groups is a way of kind  of just grouping everything together  and it makes our, 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, is actually,  let's use this hero box here. So  I'm gonna use the little trick turn on the Auto  Select. And Auto  Select allows 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 where,  Down the bottom here, it's picked everything that it found  In that layer Turn auto select off.

Okay? And give it a wiggle just  to make sure it's got everything  We need and nothing it doesn't. Okay? And then I'm gonna go to edit, undo, or edit step  Backwards and put it back where it was. Now I know it's all in the right  Place. What you do  is all you do is  Click this group button.

Photoshop's pretty clever, okay? And it Sticks them all in a nice little group,  And the groups ended up above our navigation. But that's something we can fix  Afterwards. And we'll  call this one Box Hero. Okay? And that's this one.

I'll turn it off  for the moment. All right. The next thing  I'm gonna do is select the navigation. So I'm  Gonna turn my auto select on,  grab everything along here, and you'll see it's  Picked these three 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. Let's call this one Navigation box Navigation.

Okay? I'm gonna drag him above this guy. Oh, I dragged him into it. So  Be careful when you're dragging it. Like I drag this. Can  You see The little line running around the outside  that's gonna drag it inside my hair 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? Okay. That'll mean it's just above. Okay? So I'm gonna turn both of you off.

Now  I'm gonna grab my tool again. Select both of these  Guys. Okay? And let's  Pick everything I need. Group  them. Okay?

This one's gonna be called Box. And this one was  Our Who  Box. Our Who. We are box. Okay, so I'm gonna turn 'em off  now and we'll turn that one off. Okay?

And now We're up to our services page. So I'm gonna grab the same two Auto select  on, select them all. I like to turn them off, give a wiggle,  make sure they're all what we got selected. Nothing we don't, okay? And then group them. Okay?

And this one's our services group box services. All right, auto select on, grab all these guys into group. Let's call this one box. And this one is gonna be portfolio. Turn this one off. This is our teams one.

All these on, turn it off, go to Wiggle. Okay? And we're gonna group this one together. This one's gonna be called Team Box Team. Great. Turn that one off.

And we're down to nothing really else. Okay? We've got our contact form in footer,  and what we'll do is we might  as well put those into groups now. Okay? This one here, if it doesn't end up in the group,  okay, what you can do is click hold  and drag it into the group. Okay?

Like it did there. And this one's gonna be called box contact form. Okay? And this last one put in here. Okay, we'll drag it inside. This one's gonna be called Box.

And this one's gonna be called Footer. Great. Twi these up using little arrows. Turn them off. You'll see this guy Lone Ranger here. Okay?

He's a type layer, but he has called layer one. If there's a type layer,  and it's called layer one, 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 round to doing it  and forgotten about and left it there. So this guy, here's a lone ranger,  so he doesn't appear anywhere on this if it  has a word in here, okay? It'll be words somewhere hidden on your  document that you need to go find.

Okay? In this case, I'm gonna delete it, click delete. You can see now that I've gone through  and grouped everything, it becomes a lot easier  to work with, okay? Especially when we start doing our mobile design. Okay? I can turn my, I can turn everything on.

Okay? And what I might have to do is play around  with the layer order, depending on which layers they're on. I'm gonna turn my help for column guides off,  but everything else is stacked up nicely on top  of each other, and we're ready to go.
  • Powered by Marvin
  • Terms of use
  • Privacy policy
  • © Bring your Own Laptop Ltd 2025