Working with Artboards in Photoshop CC

Just like in Adobe Illustrator, Photoshop artboards provide the capability to build separate pages or screens within one document. This can be especially helpful if you are building screens for a mobile application or small brochure.

You can think of an artboard as a special type of layer group created using the Layers panel. Its functionality might not be as intuitive in Photoshop as it is in Adobe Illustrator, but with a little practice you should get the hang of it. Follow these steps to see how you can make artboards on your own:

1. In this example, a new document is created using the iPhone 6 start document. If you are starting a new document with the legacy New Document window, create a new file with these dimensions: 750 wide x 1334 high.
   Create a document the size of the iPhone 6.
2. If you created your new document with the iPhone 6 start file, you already see an artboard listed in the Layers panel.
   The Layers panel with an Artboard already created.
3. If you don’t see an artboard, create one now by choosing New Artboard from the Layers panel menu.
   You can add your own Artboard using the Layers panel menu.

   While creating artboards, you can choose from a wide variety of preset sizes or define your own custom artboard size.

4. Choose File→  Place Embedded and navigate to the Book03-Photoshop folder. Double-click to select the image named water_sky or select the image and press Place.
5. When the image appears on the artboard, grab one of the corner handles, hold down the Shift key and click and drag outward in order to scale the image and fill the entire artboard. When the image is sized and positioned, select the Commit checkbox in the Options bar, or press the Enter key to confirm the placement of the image.
   Place an image and stretch it to fit the entire artboard.

   Next, you add a text layer.

6. Select the Type tool and click and drag on the artboard in order to create a text area and add a new text layer.
7. Type the text, WATER & SKY. Using the controls in the Options bar, set the type to the following properties:
   • Font: Myriad Pro Bold
   • Size: 110 pt
   • Color: White
8. Select the Commit button in the Options bar after you have set your type.
   Add a text layer to your artboard.

   You can press Ctrl+Return (Windows) or ⌘  +Return (Mac) in order to commit a type layer as well.

So as you see, you work with Artboards just like you would work with any other Photoshop document. The difference comes in the next step, where you will find how to add additional artboards to your file.

Adding additional artboards

You can also create additional artboards. Perhaps you want a multi-screen mobile app created in Photoshop, or you just want to create multiple versions of one screen. For these instructions, you continue with the project started above.

1. Click on the Move tool and select the hidden Artboard tool.
   Use the Artboard tool to manipulate the artboards and create more.

   Plus sign icons appear on all sides of the artboard. You can click on these plus sign icons in order to add additional artboards.

2. Click the plus sign icon to the right of your existing artboard to see that a new blank artboard is added.
   Add a blank artboard by clicking on the plus sign icon.

   Take a look in the Layers panel. Ensure that, just like layers, the newest artboard appears above the selected layer.

You can also use the Artboard tool to create your own custom sized artboard. Do this by clicking and dragging with the artboard tool on the Photoshop canvas. From the tool options bar, select a preset size from the Size pop-up menu, or just leave it in your custom size.

Naming your artboards

Before this file becomes more complex, it would be wise to name the artboards. This is done in the Layers panel.

1. Select the initial artboard (Artboard 1) and double-click on the artboard name. When the textbox is active, type the name Home.
2. Double-click on the name Artboard 2 in the Layers panel and name this layer Beach.

Adding content to the second artboard

Now, add an image and some text to the second artboard:

1. Click on the Artboard tool and switch it back to the Move tool.
2. Make sure that the Beach artboard is selected in the Layers panel and choose File→ Place Embedded. Navigate to the Book03_Photoshop folder and select the image named Beach and press Place. The image is added to the second artboard.
3. As with the last image you placed, hold down the Shift key and Shift drag on a corner point in order to proportionally scale the image larger and fill the screen.
4. With the Move tool active, click and drag the image. Note that even though it is in the same document, it does not overlap or interfere with artwork on other artboards.

Cloning from one artboard to another

Now, clone the text from the Home artboard to the Beach artboard:

1. With the Move tool still selected, Ctrl-click (Windows) or ⌘  -click (Mac) on the WATER & SKY text in the Home artboard. This activates that layer.
2. Hold down your Alt (Windows) or Option (Mac) key and click and drag the text from one artboard to the next.

   If you hold down the Shift key while dragging the image will remain aligned.

3. Switch to the artboard and double-click on the newly cloned text to activate the text area and type FUN BEACHES.
   A Photoshop file with two artboards.

Moving elements from one artboard to another

To move an element from one artboard to another, simply drag the elements from one artboard to another. When you move an element between artboards, Photoshop tries to position it in the same location relative to the ruler origins located in the upper-left corners of the artboards.

Exporting your artboards

You can save your file as a Photoshop file to maintain layers, but in this example you will export the file as a two-page PDF. Or, use the File→  Export feature in order to export your artboards as PNGs, JPEGs, PDFs, and more.