This lesson is exclusive to members

Adobe Photoshop CC - Essentials Training

How to use an Artboard in Adobe Photoshop CC

Daniel Walter Scott

Download Exercise Files

Contents

Certificates

We’re awarding certificates for this course!

Check out the How to earn your certificate video for instructions on how to earn yours and click the available certificate levels below for more information.

You need to be a member to view comments.

Join today. Cancel any time.

Sign Up

Hi there, welcome to the video about Artboards in Photoshop. A quick little run through of what they are. Basically they are just different pages within a Photoshop document. Up until now in this course, we've just been working on one image at a time in its own Photoshop document, but there are times where it's handy to have, multiple pages within one Photoshop document. This is the example we're going to build. It's an Ad banner that I have to make for Google Ads. And the first one is the square shape, they're tile. They also need a leader board version and a skyscraper version. So it makes sense to have different pages within this one document. It's handy for us because we get to see kind of unity between all three, plus we get to copy and paste between these Artboards really easily. Photoshop's handy because what it does is, it will export these as three separate files for us. 
Another good use case is, say for Web design or UI design. Now we're not covering Web and UI design a lot in this course. There is another Photoshop course for Web that I've made. You can go check that out if you want to kind of move on to that kind of use case for Photoshop. But let's say, in this case I've designed a website for desktop. I haven't finished the tablet version but there's one for mobile. You can see they have consistencies across the two. They're slightly different for the different screen sizes, but allows me to just copy and paste graphics between the two. And when I'm finished, exporting them separately. 
Another good use case is, I do this when I'm making my video courses, you're watching my video course. So my promotional images, they have to go in a bunch of different places and a bunch of different sizes. You can see, all very similar kind of graphics but there's, there's more of a letter box design, there is this kind of just standard kind of video shape. There is an overview version, that has this grayed out bit where I put some text on. And a website, there's some small versions, there's a small version with a green banner saying, "Coming soon." Now these are just a couple of my use cases. You might be doing just, it might just be concepts. You might have concept A, B and C. They might be the same size, they don't have to be different sizes, but you can see them all side-by-side. So that's the super long intro for what an Artboard is. Let's go through, create them, use them, and find out some of their quirks now; let's get started. 
To create Artboard, let's go to 'File', I'm going to make new document. We are going to work over here, we're going to be working in pixels, because we're going to be making that banner ad like we saw at the beginning. It's going to be three sizes, often it's 7, 10. Depends on what ad network you're going to. I have to do these kinds of jobs all the time, so Artboards' amazing. So they're kind of standard tile, for Google ads, are 250 x 250 pixels. 72 is the resolution, and it's this little check box here that's not normally on. That's the magic one that's going to create Artboards, let's click 'Create'. Awesome! So I've got a tiny square, that's my kind of Google tile. And the big difference is, can you see my layer structure? This is what's a bit different from using Artboards. Basically they're groups. Everything inside of this little drop down here, that says Artboard, is associated with this panel here.
 Double click this to give it a name. And this one's going to be my Scott Shoes. And this is going to be 250 x 250 pixels. This is just a name, doesn't actually do anything, but if we name these now, it's going to make it easier when we export later on. You'll notice it changes up the top here as well. Great, so that's one page, I want to make another one. I'll show you both ways because they're both useful. Let's go to 'Layer', New', and let's go to 'Artboard'. It's the super long but super clear way of doing it. I'm going to call this one 'Scott Shoes'. And this one is going to be the other, kind of common leader board size, which is a terrible size, it's that long thin one. They call it leader boards, and I'm going to change it down here to match. 
So the top bit along the top is just me writing it, just so I know what size it is, but this is the actual dimensions. Click 'OK'. Ended up in a strange place. This happens with Artboards, they're kind of new for Photoshop, so there's a few bugs. So to move Artboards around, it's hiding underneath your Move Tool, there's like an Artboard Move Tool. Click on him, and grab the name. And just kind of drag it out so it's in a nicer place. Now they are on this tool, you'll see that, because we're on the Artboard Tool we get a few extra features. This is one of them, click on that, and we get a duplicate. So that's really handy if you were just making, say it's just-- you just want to make concepts, so you're doing a design for a website, or for a brochure, or a flyer, you just want to make a bunch of different options, you can make them within here. And we'll show you how to export them at the end, so I'm going to go back. 
So this guy here, I am going to select him. And what you'll notice is, can you see up the top here? This is where I can adjust my size. I can go back to any of these ones, so I can click on him to see the names, it's Scott Shoes 250 x 250. They're out there. That's how I make my amendments, I'm going to click on 'Artboard 1'. So you can either click on the layer name over here or just the word over here. And I'm going to change this one to the other kind of common size. Just as ugly, it is 120 x 600. Super tough, this is the skyscraper, super tough kind of dimensions. Let's double click it over here, and let's call this one 'Scott Shoes'. This was 120 x 600. So that's how you make your Artboards. 
Let's work through a little project, so that you can see kind of pros and cons for using it. So I'm going to bring in my graphic, I'm going to 'File', 'Open'. I've got a file ready for you in your 'Exercise Files' under 'Artboards'. So '12 Artboards', we're going to bring in 'Shoe.jpg'. Awesome! So I've got this guy here, I'm going to go back to my 'Move Tool'. Click, hold, drag, drag, drag. Where are you going to drag it? Which Artboard? We're going to try for this one, but it really is up to Photoshop. It decides where it's going. So this is one of the fun things about using Artboards. Where did it go? I can see it there, I can tell what layer it is on. Often just kind of clicking and dragging to see where it is, and then try dragging it on the right Artboard, let go. So that's a fun game; it tries to automatically do it. And sometimes it doesn't. Sometimes you just need to say, "Actually, friend-- I'm going to double click him, he is called 'Shoe'. And I want you to be on this first tile here, which is going to be, that far, which is my 250 x 250. 
What you also might do to keep things a little bit easier to work with, is use your Artboard Tool, and just keep these guys separate. I'm not going to, but when you're new it's easy, just to keep these guys far apart so they don't end up dragging into the wrong parts. But I keep them tight so that you can see what I'm doing. So back to my 'Move Tool'. I've got my giant shoe. I'm going to convert it into a Smart Object because we are professionals. Then I'm going to transform it. And I'm going to put my shoe in here, just because that's the-- some of the graphics we've been working on, I want to add it in here. I want to have a copy on this version as well. So what we'll do is we'll right click it here and we'll duplicate it. Shoe, just going to keep calling it Shoe, Shoe copy, even. And I'm going to drag it to-- what's the name of this one? Drag it into this guy. You end up over there. I'm going to transform it again. I'm going to rotate it around. 
Now this isn't the best ad I've ever made. I'm going to duplicate it, right click, duplicate. I wanted to cheat, I've been trying not to use too many shortcuts, but hey, it's hard. If you want to duplicate this, Shoe Copy, just drag it down to the new little tab there, and it makes a copy, it's a little automatic one, it's on the top. So I'm going to Transform, move it around. Come on, we're 70 videos in, shortcuts are not that bad. We get to the Advanced Course, we'll go super shortcuts, but for this one, Essentials, we'll try and keep it good. 
So I've got a couple of versions of it there. I want another one down here, so which one do I want to duplicate? I'll use this one here, which is on the-- it's right here. 'Duplicate', put it on to-- if you’re like me, can't see that top layer, I kind of dragged and held, you might actually have to close some of these down, or just move this up a little bit so you've got more room for your layers. I'm just dragging in between these layers, eventually you'll see that little double arrow. Cool, there's that fellow, and you, my friend are going to go down here. So we're part of the way there, and before we go on too much further, I want to show you the perks of using Artboards and Smart Objects. 
Now these two things tie together and make for a productivity amazingness. So when we first brought in this guy, we convert him to a Smart Object because we are professionals. Why is that so good? In an earlier tutorial we looked at Smart Objects, and we looked at this little icon here. To indicate that they're a Smart Object, but what happens when you duplicate a Smart Object, is that there are actually copies of each other so they're all linked in a fashion. We were able to rotate and scale them. And the resolution's still locked in there, the perk of a Smart Object, but they are all connected. So watch this, if I double click any of these guys, double click the little icon here. We did this with Vector Art. What ends up happening is, there's that shoe, I'm going to close that down. 
So this is the one I'm working on. And I'll close this down again, just so you can see, so just the guy I've got open, unsaved. If I double click on this little icon, it opens up this weird file. It's the same name, it's called Shoe, it's the name of the layer, but it's called as PSD. Don't worry about the name, what it is, it's the Smart Object, so we kind of like dived inside of this guy here, and he's opened in another tab. What I can do in here now though, is I can make adjustments to one, that adjusts them all. So Shoe layer selected, 'Adjustments Panel', I'm just going to grab the 'Hue & Saturation' slider, and just drag this hue around to pick a different color shoe. 
Say that I want this color shoe. I go 'File', I go to 'Save'. Then jump back into this first tab, and, cool, huh? So that's the real big perk of using Smart Object. Especially when you start using Artboards, because we've done three sizes here, I've got jobs that do have 10 or 15 different sizes. Especially for things like these ads, it might be print ads, it might be web ads. It might be just concepts, lots of different concepts. But when you can update one, and they all update, man, it's a lifesaver. So I can go back into here again now and make another adjustment. Hit 'Save', then back into here, and it adjusts. When you finish-- this thing here is, not really a file you want to save, it's just kind of-- you can just close it down, it's done. To get back in there again just double click the icon and it opens back up. You can see there, my layer structure's still there, all very non destructive. 
Let's look at a couple of other things, let's bring in a logo. So when you're bringing in a logo, especially if it's vector, something is being made in something like Adobe Illustrator, you either copy and paste it from Illustrator like we did earlier on, or go 'File', 'Place Embedded'. It's instead of going 'File', 'Open logo'. If I open it in Photoshop it loses some of its Adobe Illustrator magic, the vectorness of it. If that's really kind of unclear for you, you're not sure what vector is, whenever it's a .ai or .eps instead of something like a JPEG, just go to the File, and go to Place Embedded. Retains a little bit of quality. 'File, 'Place', love it all, click 'OK', get it to a right size. And when you do it this way it will automatically be--
Hit 'return' to kind of confirm it to say, yes that's the size I want to be. And you'll see, it's automatically a Smart Object. So I'm going to make a duplicate. Drag it to this one. You'll notice, before, when I did a duplicate, so I duplicated here, I was dragging it to this specific layer. Whichever way works well for you, so I can drag it to here. And I know it's on this layer, or this duplicate here, I'm going to drag him over here and pop him in there. Either way works. Sometimes when you're dragging it like that second way I did, Photoshop has a bit of breakdown. So if you do find like, Artboards are like, man, they're crazy sometimes, they're new and they do go a little bit crazy. You also notice that the quality's not super amazing. It's mainly because I'm working with such small sizes, they should be about there. That's how we're going out to Google for our Ad banners. Basically we're just going to look at the same principles as before. 
So we went through and double clicked the icon for the shoe, we're going to do the same thing for the logo, you can do any of these guys here. The difference is, if I double click on it you need to have Illustrator installed. It's going to slowly open up in the background, there it is there. We'll speed it up. If this appears, just click 'OK', and here we are in Illustrator. If you are not good at Illustrator, and you want to, I've got a course on it, an Essentials and an Advanced Illustrator course. But what we're going to do is we are going to grab the 'White Arrow'. We're going to click on one of these little corners here, and just click and drag it around, so click at it once. Then click and drag it, we are totally wrecking this by the way. It's not looking good, but I guess what I want to do is show you that you can distort this, and if I hit save, 'File. 'Save', so I'm inside Illustrator, and I jump back to Photoshop, you notice they all update. 
So using Artboards and Smart Objects, you can see, it's updated across them all. Back to illustrator, and I'm going to say I want-- using my 'White Arrow' I'm selecting all of these guys, and I want to change the Fill color to dark gray. Hit 'Save', now I'm going to close it down, back to Photoshop. Magic. I want to go and create the buttons and stuff but that’s kind of not-- I'm just going to draw a rectangle and put text on it. What I'll do now though is I'll show you how to export these guys as separate layers, so that you can send them off to whoever needs them. So we're going to do exporting in a greater detail, but I don't want to kind of leave this video without showing you how to get these out. 
So this is the short version, you go to 'File', you go to 'Export'. And you go to this one that says 'Export As'. The cool thing about it is because we name them, you see here I've got one, two, three images ready to go, I can decide on this first one here, actually I want you to be a JPEG, and I can play with the quality slider. You can see how big it's going to be. Same with you. Actually I might select both of these at the same time, and say, I want you both to be JPEGs. And both, I want you to be about 60. You can see, nice small file sizes. Let's hit 'Export All'. And where am I going to stick them? I'm going to stick them on my Desktop, I'm just going to click 'Open'. And off they go. 
Let's check my Desktop. Here we are, there's my three little images, ready to go, all kind of cropped out, the right sizes with the right names. So make sure you name your Artboards, just saves you time here, because especially if you have to do an update-- so I'm back in Photoshop and I decide, actually this shoe was the wrong color. I'm going to go to a blue, hit 'Save'. Come back into here, you can see all updated. You can see now we're getting our flow on, 'Export', 'Export As'. It remembers all my settings, it's got all my names, and this is where we become a super Pro. Back to the 'Desktop', and voilà, that new kind of file format, at their new image but the same-- with that new kind of color, but they all have the new colored shoe. All the new names. 
So we're starting to get nice and streamlined and work flow. I'm going to go through now and finish off my ad with some buttons, for no good reason. Just, I feel like they need buttons. So you can skip on, but to wrap up, it doesn't really matter what you're doing, banner ads are a great example. Social media posts, there might be an Instagram, Facebook, Twitter, using all the different shapes and sizes, you could create graphic doing that with different Artboards. If Artboards are freaking you out because there's Smart Objects, and naming them, and exporting those, a bit hard, just have separate documents, there's no problem with that. 'File', 'New', make one that's 250 x 250. Save it as a JPEG and then close it down, open up the next one and do the same thing. And do the different size, I'm not going to know. 
And maybe whereas your skills develop in Photoshop, you might revisit this video to get a better understanding of Artboards, but know they are a little tricky. You can see them over here, you can tidy them all up by closing them down. How tidy that is for the Artboards. So I'm going to draw my button now, you can go, I'm going to pick a color. So I've picked my Rectangle Tool and I've picked this guy here. I'm going to zoom in. I'm going to hit my button. Buy Now button. I'm going to put little rounded corners on the edges. Can't really see right now, here we go. So how many pixels? Two pixels. So there's my little button. I'm going to add a tiny Drop Shadow to it. 
Now probably we mentioned this already. If you want to get into like full UI and Web design at a Photoshop, we're going to use a lot of the same skills we learned in this course, but we'll use them specifically for that. I've got a course, like 100% dedicated to App and Web design. So we're not going to cover that all in this course. Click 'OK', 'Type Tool'. 'Type Tool', and if you end up clicking on here, we've handled this problem before, it tries to join these two up which is problematic. So I'm going to 'Esc', and I'm just going to click over here. And not use my ginormous font. 10 pts, I'm going to make the color white. And I'm going to type, 'Buy Now'. 'Buy Now'. 
You've probably noticed already, but I often don't use the font sizes, I'll just use the Transform Tool. Unless I know it has to be a perfect size, but-- my Buy Now button is a bit big. The Buy Now button's never big enough. So what I'm going to do is I'm going to-- where are we? Working on this one here. What is that layer? I'm going to delete that. Some random text that I made. I took on my Rectangle Tool by now, so I'm going to select both of these. So I click on the top one. Hold 'Shift', click the second one. And I drag them both down to my little turned up page. Then I grab both these guys and move them over here. You'll work there for me. Same with you too, make a new one. Drag it over here. I'm going to transform both of these guys. 
If you've got them both selected, they'll transform together. I'm going to try and stick you in the middle. Now finally save this document. I'll stick it on my Desktop as Banner Ads, this is for Scott Shoes. 'Banner Ad'. Often I'll put the version number just so-- there's going to be lots. Lots of dates from the client especially because the ad's not very good. Need some more graphics, and going on, but I'm trying to keep it simple for this tutorial. 
Last thing we'll do as well, is I've added some adjustments, I'm going to go 'File', 'Export' again, 'Export As'. I don't have to do anything, just click on 'Export All'. 'Open', and hopefully we'll be able to go check my desktop. You know they all are with my Buy Now buttons. Awesome, huh? All right, that is the end of this video. Well let's move into the next one.