Join Julieanne Kost for an in-depth discussion in this video Adding content to artboards, part of Photoshop CC 2018 Essential Training: Design.
- [Instructor] Before we start adding our assets to these artboards, we need to learn a little bit about working with guides when working with artboards. So right now I have the Cover Two artboard selected. I'm going to click on Layer One in the Layers Panel and I'm going to display my rulers by using the keyboard shortcut Command + R, or you could choose the View menu and then select Rulers. In order to drag a guide on top of the artboard, I'll switch the units of measurement to pixels, and then click and drag over Cover One.
When I release the guide, because I only had Cover One artboard selected, it's going to be displayed on top of that artboard, but it will not be displayed in front of Cover Two. If I want the guide to cross over both artboards, I'll use Command + Z to undo that. Select both of the artboards in the Layers panel and then drag out my guide. But I actually want to create a new guide layout so I'll undo that as well using Command + Z, and then choose View, New Guide Layout.
I just want to add a 70 pixel margin at the top, left, bottom, and right, and I'll target my selected artboard, although I could target a single artboard, or all of the artboards if I hadn't taken the time to select them. I'll click OK and now we have our guides. In order to add a number of assets very quickly, I'll use the File menu, and then Browse in Bridge. I'll open up the folder of Assets, click and drag in order to select all of the assets in the folder.
Reposition Bridge so that I can see the Cover One that I want to drag to. Although I'm not sure that was the targeted artboard, so let's click on Photoshop, and then in the Layers panel click on Layer One so that when I place all of these assets, they'll all be placed on the Cover One artboard. I'll return back to Bridge, and then drag and drop all of these assets on top of the artboard. I'm going to place them all at whatever size they originally were, so I'll just tap Enter again, and again, for each one of these different assets in order to place those documents as layers.
Now, if we look at our Layers panel, there are three photographs, and all three of these photographs need to be resized, so I'll select the Rocks layer, hold down the Command key and click on the dolphins, and the Blue Wave. Then I'll select Command + T or Control + T in order to Free Transform, and I'll just move the transformation handles so that these three images fit within those guides. I'll tap Return or Enter in order to apply that transformation, and let's change the stacking order on the Layers panel.
With those three layers selected, I'll drag them down below the Australia to put them at the base of my Layers stack. Now, I want to move the Rocks layer to Cover Two, and there's a variety of different ways I can do that. Since it's selected in the Layers panel, I can use the Move Tool and move it from Cover One to Cover Two. You'll notice when I release the cursor, it becomes clipped to Cover Two. When I reposition this in the artboard area, you can see that it doesn't extend outside of that artboard.
If I were to drag it far enough, I can actually drag it all the way off the artboard, and then it just sits in this blank document space. And we can see in the Layers panel over here that it's actually removed it from both of these artboard groups. Let's go ahead and put it back on the artboard. We can do that by either dragging and dropping it, or we could do that by dragging and dropping it in the Layers panel. I'll go ahead and just reposition that down a little bit. I want to create another artboard, so I'll click on the very right edge of an artboard, and that will automatically switch from the Move Tool to the Artboard Tool.
I'll click on the plus icon in order to add that artboard, and then use Command + Minus in order to zoom out. I'll hold down the spacebar to temporarily access the Hand Tool, and just reposition those. Another way that I can move layers from one artboard to another is simply by dragging and dropping them in the Layers panel. So I'll select the dolphin layer, and then scroll up to the top of my Layers panel and release it when I see the rectangle on top of Artboard One. So I now have a photograph on each one of these artboards, but I want to duplicate all of the rest of these assets across all three of these screens.
But I'm going to position them where I want them before I duplicate them so that I don't have to lay out each page separately. On Cover One, I'll select the logo, and then reposition that up at the top. I can hold down the Command key because I have my Move Tool selected to automatically select a layer. So I'll move the sign in to the lower left here. I'll hold down the Command key again and select Sign Up, moving it over to the right. I'll tap the dots with the Command key in order to select the circle smart object, and drag that down.
And then, I'll Command + Click on Australia and just move that up a little bit. Now it's hard to read the Sign In and Sign Up and what I'm realizing is that I distorted all of these layers when I transformed them. So using the Layers panel, I'll select the Blue Wave layer. I'll Command + Click to select the Rocks layer, and the dolphins layer. I'll choose Edit and then Free Transform, and I'll just transform them all up a little bit. All right I'll tap Enter in order to apply that transformation.
Now back down on Cover One, the first artboard here, I'll select the Sign Up, Sign In, Logo, circles, and Australia layers, and if I just drag them to Cover Two, that would move them, so I'm going to hold down the Option key and in the Layers panel drag them up above the Rocks layer in order to duplicate them. I'll do the same, holding down the Option key and then dragging them above the dolphins layer to copy them to Artboard One. If I ever wanted to duplicate an entire artboard, I could click on the edge of the artboard in order to access the Artboard Tool.
Hold down the Option key and click on the plus icon, and that will make an exact duplicate. All right I don't need that so I'll tap the Delete key in order to delete that artboard and all of the assets. I'm going to switch back to the Move Tool, and at this point I think you can see how easy it would be if I wanted to rearrange like the logo and the text on each one of these different screens, and yet save them within the same document. I'll select File and then Save As.
I'll append this with an underscore 01, save it into the Artboards folder as a Photoshop document with layers, and click Save. As you can see, artboards make it very easy to lay out multiple designs within the same document.
Photoshop CC boasts tools and features for making tonal and color adjustments, applying effects and treatments to type and graphics, and distorting, filtering, and layering elements—all while maintaining the highest-quality output. In this course, Julieanne demonstrates how to efficiently perform common design tasks, including editing images, drawing shapes, and working with type and fonts. Along the way, she shares the secrets of nondestructive editing using Smart Objects, and helps you master features such as layers, filters, blending modes, typography, custom brushes, vector masks, and much more—increasing your productivity every step of the way.
- Working with Smart Objects
- Linked vs. embedded Smart Objects
- Creative transformations and warping
- Essential filters for designers
- Emulating traditional drawing techniques
- Working with shape and fill layers
- Pen tool basics
- Applying layer effects and styles
- Type essentials
- Creative brush techniques
- Working with libraries and artboards
- Exporting files and sharing images