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.