Artboards allow Photoshop documents to have multiple workspaces at set resolutions. In this video, learn how to create, modify, and rearrange artboards within a Photoshop document.
- [Instructor] Before we get started designing, I want to tell you all about artboards and how they can save you time. I'm here in the new document window and I've chosen the web presets. I'm going to pick Web Large to create a 1920 x 1080 canvas and I just want to make sure that under Preset Details in the right-hand column, Artboards has been checked. Now, I'm going to click Create. Now, this looks like any traditional new document in Photoshop, except that the blank layer 1 is actually nested inside of an artboard.
Artboards are independent work spaces that you can keep inside of a single file. Select Artboard 1 in the layers panel, and then come up over to the top-left corner in the toolbar. Underneath the Move tool is a new tool that was added in 2015 called the Artboard Tool. With the Artboard Tool selected I can actually change among any of the presets for that artboard. So, if I actually needed to design for 1280 x 800 canvas I can change that on the fly.
Additionally, I going to zoom out and show you one other feature of the Artboard Tool. With the Artboard Tool selected, and an artboard selected in the layers panel, you're able to click the + button to create new artboards of the exact same dimensions as the artboard you just clicked from. Going to hit Command + 0 to zoom out a little bit and I'm going to select Artboard 1 again and click a + on the right side as well. Except for Artboard 3, I'm going to change this to Web Medium and zoom back out.
You can have multiple artboards of multiple sizes. This is really great way if you're designing for different sizes and scales of web browsers, for different device sizes or if you just need to be able to focus on different aspects of a design. I'm going to duplicate three more artboards. Artboard 4, which I'll set to Web Small; I'll create an artboard beneath both Artboard 5 and Artboard 3; and hit Command + 0 or Control + 0 on a PC to zoom back out and show you one other feature that you have with the Artboard Tool.
If you click an artboard by its name, you can rearrange it within the document. It even snaps using the default pink guides to tell you where that artboard is positioned in relationship to other artboards. Artboards don't behave the same way as folders do in the layers panel. I'm going to come to Layer 1 and Artboard 1, I'm going to use the Marquee Tool, hitting M, to trace out a rough rectangle and I'm going to switch over to the Paint Bucket Tool by hitting G and I'm just going to fill that in and then hit Command or Control + D to deselect that.
I'm going to move this layer between Artboard 1 and Artboard 3. Clicking and dragging, you'll notice that at a certain point it cuts over in between the layers and as it does the artboard name is bolded. When I let go of this layer, not only did it move it to the right, but if you look at the layers panel, Layer 1 is now under Artboard 3. I can do this with any artboard. I can drag it to Artboard 6, Artboard 2, but if you try to drag it to a location where normally it would overlap, it's only going to display in the artboard that it's contained underneath.
Now, this behavior is wonderful and time-saving if you understand how it works but there's not really a precedent in Photoshop for this behavior, so keep that in mind. I'm going to come back to the Artboard Tool from our Move Tool by hitting Shift + V and I want to disable one setting: Auto-Nest Layers the feature that keeps layers snapped under a particular artboard. If you disable this feature, it allows you to drag the layer from the layers panel up and outside of any of the artboards.
This can be useful if you're annotating artboards and we'll talk some about that a little bit later in the course. But if that behavior is frustrating you, just know that you can disable it. Artboards also have properties that are accessible in the Properties panel. You can set specific dimensions, width and height for the artboard, you can access the X and Y coordinates of where that artboard lies on the overall canvas of your document. You can change your artboard to a different preset the same way that you can at the top bar, when the Artboard Tool is selected and from here you can also change the artboard background color.
This is pretty standard. White, Black, Transparent or a custom color that you can define. I'm going to change that back to white for now but just know that there are a handful of options that you can customize, because if you're working on a white design with white backgrounds, it gets a little difficult. Artboards are a great way to design for multiple devices and outputs at the same time and it makes it easy to store multiple versions of the same screen inside the same file. Now that we've seen just the basics of the Artboard Tool itself, and some of the settings and practices to keep in mind, we're ready to start building.
- Creating a document with artboards
- Using grids, guides, and guide layouts
- Adding placeholders and text
- Using ligature fonts for icons
- Using layer comps to display states
- Using Adobe Preview CC
- Exporting artboards for review
- Exporting assets for use in InVision
- Working with user interface kits
- Extracting CSS values from a design
Skill Level Intermediate
Q: This course was updated on 11/14/2017. What changed?
A: New videos were added that cover how to use user interface kits to create pixel-perfect designs.