Adobe Artboards Tutorial - Photoshop CC 2015

Key Takeaways

Hello everyone, Gary Simon here of designcourse.com and Adobe just released the 2015 CC update for Photoshop, Illustrator, After Effects, and all their other applications. And the feature that I wanted to look at today is artboards. Now, artboards are basically a way to have multiple canvases within the same Photoshop document. So, this is particularly useful for things like responsive web design where you may have mockups for different devices or display advertising when you have banners for a bunch of different industry sizes. All right, so I'm going to switch over to the desktop and show you exactly how to use the new artboards feature. Okay, so let's go to file, new here in Adobe Photoshop CC 2015. We're going to specify for the name banners and we're going to specify artboard. And for resolution, we're just going to leave it 72 since this is web. And artboard size, we don't have to worry about this. We're going to make our custom. And it's just going to be the size of the first banner that we want to design. So we'll say 728 by 90, which is a common size. All right. So the first thing you notice we have the artboard one. We can change this by simply double clicking over here in the layers and we'll change this to 728x90. And another thing right away if you're new to um 2015 is the fact that the default background here for the canvas outside of the document is no longer this dark gray. It's a real light gray. And I I kind of like it a lot better. All right. So it works just the same. Um, so say for example, if we took the re the rectangle tool and we just come out here, you can see it just stays within the document itself. All right. So I'm going to delete that. Or rather, we'll delete after we place another one. We're going to take the rectangle tool and just make something just a little bit larger than document itself. I'm going to delete that first one. And we're going to give it a its own color. So we'll double click on the layer. We're going to change the foreground color to something a little bit darker. So 185 or 1825 2B if you want to use the same color code. And let's go ahead and give it some type real quick. Uh if it's showing up in the outline when you're type tool, just hit control H. All right. So now we'll just type in something like become become a better designer. All right. So mine was centering it. So, I'm going to left justify it. Change the color to white. Hit control T. Scale it up a bit. Maybe right around there is good. And I'm using a font called Source Sandance Pro. It's free. You can Google it and download it if you wish. We'll use the light version. Okay. And then we'll just give a real quick call to action button. So, we'll use the rounded rectangle tool this time. For the border radius, we'll use four. And I'm just going to left click and drag out. And I'll change that color as well. We'll change this to kind of like a teal color, a little bit darker. So that's 01de 7. And we'll give this some text as well. So hit control H. Left click in here. We'll just say uh let's do it. Change the color to this background color. We'll change this here to regular or give it a little bit more thickness because it's just slightly smaller. Control T. And we'll just center that up. Select move tool and hit apply. All right. So, obviously a very simple banner. This isn't a banner design tutorial. Rather just to show how the artboards work. So, let's say for example, this is your banner. And now you want to create another size. Uh let's say for example it'll be 468x60 which is another standard size and it's basically just uh see scaling this leader leaderboard design down quite a bit. All right so what we do is leftclick choose the artboard tool. We have 728 by 90. Let's change that to 468x 60. Click on this right here which is add new artboard. Left click once. It looks like it changed that to 90. We'll change that back to 60. And that is it. So now we can see the new artboard one. Double click that. We'll change that as well. So 468x 60. And now we can see that we have our two groups here. So what we want to do is take all these layers. We're going to rightclick and simply duplicate them. So right click, duplicate layers. It's showing off my screen so you can't see it's at the top. And hit okay. And we want to take all these and drag them inside this 468x60 group. All right. So right now this right here is at the top. That needs to be at the bottom or inside rather. There we go. And then we just need to make just some really quick adjustments. So, we have the become a better designer text right here. Probably going to need to scale that down. So, controll T, hold shift, maybe right around there. And then our call to action button copy. So, that's right here. Obviously, too big. Scale this down maybe right around there. So, the move tool, hit apply, and there we go. Very simple. Now, let's say you want to export these. Uh there's also some new features in Photoshop that makes that very easy to do, especially with these artboards because we have two different files essentially that we want to export. One that's 728 by 90 and one that's 468x60. So, the way you do that is go to file, export, and we could choose quick export as PNG. All right. So, basically, it gives us no options. All we have to do is specify where we want to save it as. So, we'll just choose desktop. I'll hit okay. And I'm looking at my desktop. It's showing off of the the viewable area right here. But I can double click both of them. And there we go. Very, very simple. Now, of course, you're not just limited to that option of quick export. You can do export as. And you can see this gives us a lot more settings to control. So we have the 468x60 and the 728 by 90 and any other artboards that you wish to show would show up there. So the format PNG of course transparency all this information and then you can just simply hit export and specify where you want to save it. Very very simple to use the artboard source. I know for sure myself I'm going to be using this pretty much as a permanent fixture for every document that I do. Uh in terms of specifying file, new artboard and just because I really like kind of how you can just create multiple artboards and be able to quickly export them. So when it comes to web design, responsive designs for showing on a desktop versus mobile. Awesome. Same thing here for the banners. Good stuff. All right. So, if you'd enjoyed this, please check out uh designcourse.com where I have uh video courses right here that are rather cheap. I offer one-on-one design training as well. Please check that out and if you haven't, subscribe here on YouTube. All right. Goodbye. [Music]