Using artboards

Hi. In this video we're gonna look at Artboards. So Artboards is a new feature  that came out in Photoshop CC 2015. Now if you're using a later version, it's gonna work fine. If you're using an earlier version, though,  there was no such thing as Artboards in 2014. So what you are gonna have to do is you are gonna have  to use just separate pages.

But if you are using my version  or later, essentially all they are is a way  of having multiple pages on the one document rather than  separating them into separate Photoshop documents. So to do it, let's go to file. Let's go to new and let's pick  art board from the new document window. And let's put in our wits that we discussed earlier in terms  of the physical sizes of our, let's start  with our desktop view. So our desktop's going to be nine 60 pixels by a height of,  now the height doesn't really matter, um,  because websites change height  depending on what the content is. So I'm gonna put in, let's say, uh, 1500 and click.

Okay. So this is my first outboard. It's called Outboard one. And you can see in my layers here, it's a slightly new one. If you're used to using, uh, Photoshop  before, there's a slightly new kind  of grouping system with Artboards. So I'm gonna double click art board one to rename it.

And I'm gonna call this one. This one's gonna be called desktop  and it's going to be nine 60 pixels wide. Great. And you can see the name changes along the top here. And so to add another view,  so let's work on our tablet view. Next.

We, there's a couple of different ways of doing it. The easiest way I've found is using Layer New  and using this one that says art board. Okay, so this one's gonna be called tablets  and it's going to be seven 20 pixels slide. Okay, I'm gonna make sure it says seven 20 pixels down here  and use the same height click. Okay. And it slips it in next to it there, right?

So the last view we're gonna do is the mobile view. So we're going to go along to layer new, we're gonna go  to art board and we're gonna pick mobile. And this one is going to be, uh, 360 pixels. Okay? That's just the name along the top there. I need to actually change the pixels down the bottom here  and we'll use the same height and we'll click.

Okay, great. So we've got tablet view, desktop view,  and mobile view all next to each other. Now, where it becomes quite useful is when you start  designing across all three  and you wanna make sure they're all consistent. So let's say that I'm gonna use my rectangle tool. I'm gonna pick a swatch color in here,  any old random color and not that color. So one of the big perks for using artboards is the fact  that I can, um, draw something  that's actually quite far over the edge here.

Can you see? It's quite over the edge of here and I let go. You see it crops it down to my desktop view, okay? It's a nice little feature. Now the next thing I wanna do is  I want to, I want the same, let's say this is my nav bar. Um, so I'm gonna double click.

This is my big navigation bar along the top. Okay, so I've double clicked the name  down the bottom and renamed it. I now wanna move it across. Now I'm gonna switch back to the Move tool. It defaults to this art board tool quite a bit when  you're working with Artboards. Okay, so I move the Move tool  and what I'd like to do is I'm gonna duplicate nav bar.

I'm gonna right click it and click the  one that says duplicate. I'm gonna call it nav bar now. So I've got two of them. Now I'm gonna use the Move tool  and I'm gonna click hold and drag  Across the tablet. Now what can happen when you're dragging it, I'll undo  that just to show you again, is  I'm gonna drag nav bar across. And initially it doesn't actually move across.

Sometimes you get a give bit, a bit of a wiggle, okay? Um, just to get it to appear in the tablet view. Then I can let go and it's in there. You can see now I've got this nav bar in my desktop view  and I've got it in my tablet view. It's the last one. I'm gonna duplicate it again.

Okay, duplicate layer. Gonna call it Neva. And in the mobile view, I'm gonna click hold  and drag it member, give it a wiggle  and it'll appear in my mobile view. Now you can see the benefits  for this, I'm gonna pop 'em in there. It allows you to, if you were working on  separate documents, okay? And you have to switch between them, it's really hard  to know is it the same color, is it lined up the same way?

Is it looking consistent across all the different views? Um, upwards is a really nice little new perk for Photoshop  and that is upwards.