How to Use the Artboards Feature of Adobe Photoshop CC

Photoshop artboards simplify graphic design for mobile app development

Screenshot of Artboards feature of Photoshop

Lifewire /  Tom Green

Creating assets for mobile apps designed to work on different screen sizes often results in large PSD files containing multiple layers and a convoluted workflow. Photoshop artboards were introduced to streamline the development of graphics for mobile devices.

Instructions in this article apply to Photoshop CC 2019 for Windows and Mac.

How to Create Artboards In Photoshop CC

When you create a new document in Photoshop, Artboard appears as a choice in the Preset Details dialog:

  1. Open Photoshop and select Create New.

    Open Photoshop and select Create New.
  2. Select the Mobile tab.

    Select the Mobile tab.
  3. You'll see presets that include several iPhone sizes along with Android phones, iPads, Microsoft Surface devices, Macs, Apple Watch sizes, and a generic size for everything else. Choose one of the options, then select Create to begin work.

The box under Artboard should be checked. If it's not, click the box to check it.

Check the box under Artboard, choose a preset size, and select Create.

How Do Artboards Work in Photoshop?

The artboards feature in Photoshop works much like its Adobe Illustrator counterpart in that each artboard is treated as a separate layered document. Each artboard has its own layers, layer groups, text, smart objects, and anything else you can add to a Photoshop document. You can shift the layering order in each artboard as well as the order of the artboards themselves in the Layers palette.

A blank Photoshop artboard

How to Name and Duplicate Artboards in Photoshop CC

To duplicate an artboard in Photoshop:

  1. Right click the artboard in the Layers palette and select Duplicate Artboard.

    If the Layers palette isn't visible, select Window > Layers to open it.

    Right click the artboard in the Layers palette and select Duplicate Artboard.
  2. Give the new artboard a name and select OK.

If you want to rename the artboard later, double click its name in the Layers palette.

Give the new artboard a name and select OK.

How to Use the Photoshop Artboard Tool

To adjust the size and orientation of your artboard:

  1. Click and hold the Move tool, and then select Artboard Tool.

    Click and hold the Move tool, and then select Artboard Tool.
  2. Select a preset Size in the tool options bar, or set a custom size and orientation.

    Select a preset Size in the tool options bar, or set a custom size and orientation.
  3. Select the plus signs (+) on each side of the page to add new artboards above, below, or beside the current selection.

    Select the plus signs (+) on each side of the page to add new artboards above, below, or beside the current selection.

You can have as many artboards as you want in a single Photoshop file. 

Multiple artboards layed out in Photoshop

How to Preview Photoshop Artboards on Mobile Devices

Since the Device Preview feature has been removed from Photoshop, and the Adobe Preview app for iOS is no longer available, users must rely on third-party preview apps to check their work for mobile devices.

Adobe suggests the Skala Preview app, which works with macOS to preview work on both iOS and Android devices. PS Mirror is available as a plug-in for Windows computers and as an app for Android and iOS devices for preview purposes.