Using artboards

Hi, in this video we’re going to look at artboards. So artboards is a new feature that came out in photoshop CC2015. Now if you’re using a later version it’s going to work fine. If you’re using an earlier version though, there was no such thing as artboards in 2014. So what you’re going to have to do is, you’re going to 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, lets go to file, lets go to new, and lets pick artboard from the new document window and lets put in our widths that we discussed earlier in terms of the physical sizes, Lets start with our desktop view. So our desktops going to be 960 pixels by a height of – now a height doesn’t really matter – because web sites change height depending on what the content is – so I’m going to put in – lets say - 1500 – and click okay. This is my first artboard – its called artboard1 – and you can see on my layers here, it’s a slightly new one. If you’re used to using photoshop before, there’s a slightly new kind of grouping system with artboards. So I’m going to double click artboard1 to rename it and I’m going to call this one – this ones going to be called desktop and its going to be 960 pixels wide. Great. And you can see the name changes along the top here.

So to add another view – so lets all work on our table view next. There’s a couple of little ways of doing it – the easiest way I’ve found is using layer – new – and using this one that says artboard. So this ones going to be called tablet and its going to be 720 pixels wide – I’m going to make sure its 720 pixels down here – and use the same height. Click ok and it slips it in next to it there.

Right, so the last view we’re going to do is the mobile view - so we’re going to go along to layer, new, then we go to artboard, and we’re going to pick mobile and this ones going to be 360 pixels. Ok, that’s just the name along the top there – I need to change the pixels down the bottom here and we use the same height and we’ll click ok. 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 want to make sure they’re all consistent. So lets say that I’m going to use my rectangle tool – I’m going to pick a swatch colour in here – any old random colour and – not that colour – so one of the big perks for using artboards is the fact that I can draw something that is actually quite far over the edge here – can you see its quite over the edge here and I let go. See it crops it down to my desktop view? It’s a nice little feature.

Now the next thing I want to do is I want the same – lets say this is my navbar – so I’m going to double click this as my big navigation bar along the top. So I’ve doubled the name down the bottom and renamed it. I now want to move it across. Now I’m going to switch back to the move tool. It default to this artboard tool quite a bit when you’re working with artboards. Ok, so I’ll move the move tool – and what I’d like to do is I’m going to duplicate navbar – I’m going to right click it and click the one that says duplicate. I’m going to call it navbar. Now, so I’ve got two of them now. I’m going to use the move tool and I’m going to click, hold and drag it across the tablet. Now what can happen when you’re dragging it - I’ll undo that just to show you again – is I’m going to drag navbar across – and initially it doesn’t actually move across. Sometimes you’ve got to give it a bit of a wiggle – ok – just to get it to appear in the tablet view – then I can let go and its in there. You can see now I’ve got this navbar in my desktop view and I’ve got it in my table view.

That’s the last one. I’m going to duplicate it again. Click duplicate layer – going to call it navbar – and in the mobile view I’m going click, hold and drag it and give it a wiggle and it’ll appear in my mobile view. Now you can see the benefits for this – I’m going to pop him in there – if you’re working on separate documents and you have to switch between them, its really hard to know - is it the same colour? – is it lined up the same way? – is it looking consistent across all the different views? Artboards is a really nice new little perk for photoshop.

And that is artboards.

Now I love to share so I made a few of these videos free. Of course, I’d love for you to go on and do my full course of over fifty videos. There’s a discount code in the description. Please like and subscribe and Haere Ra good youtube people. Now I’m saluting and waving, but you cant see that, can you?