How to Use the Artboards Feature of Adobe Photoshop CC 2018

Artboards simplify mobile app development

The Artboards feature of Photoshop is shown.

 Screenshot from Photoshop

Pull any group of graphics designers together and ask them what their main pain point is when it comes to designing interfaces for mobile apps. They will tell you “Photoshop.” Though this may surprise a few people, it is understandable. The smartphones and tablets out there have varying screen sizes, which inevitably results in a few dozen Photoshop .psd files containing multiple layers and a convoluted workflow. In 2015, Photoshop introduced a spiffy Artboards feature that simplified development for different screen sizes.

If you are an Adobe Illustrator user, you are familiar with the use of artboards. The artboards feature of Photoshop works much like its Adobe Illustrator counterpart.

01
of 04

How to Create an Artboard In Photoshop CC 2018

The Artboard options are highlighted.

 Screenshot Photoshop

There are two ways to create an artboard in Photoshop CC 2018.

  • The first is to create one when you open a new Photoshop document. There is now an Artboard choice in the Preset Details section. When you select the Mobile tab and click Artboard, you see presents that include several iPhone sizes, along with Android phones, iPads, Microsoft Surface devices, Macs, Apple Watch sizes, and a generic size for everything else.
  • The other method is to select the  Artboard tool, which can be found by clicking and holding on the Move tool. When you select the Artboard tool, you go to the top of the interface and choose a preset Size from the same list you see when you create a New Document. You can also set a custom size for the artboard, change the orientation to portrait or landscape, add a new artboard, or choose other options

Here’s the really neat thing about artboards: You can have as many as you want in a single Photoshop file. 

02
of 04

How to Name and Duplicate Artboards in Photoshop CC 2018

The Artboard panel is shown and the name of an artboard is highlighted.

  Screenshot Photoshop

There are two ways of duplicating an artboard.

  • Open the Layers panel, select an artboard, and select Duplicate Artboard from the Context Menu.
  • Select the artboard in the Layers panel and switch to the Move tool. With the artboard selected, press and hold the Option/Alt key and drag a copy to a location of your choosing.

Having generically named artboards doesn’t tell you a thing. To change the name of an artboard, select it in the Layers panel and rename it, so you know which device and orientation apply to each artboard.

03
of 04

How to Add Content to an Artboard in Photoshop CC 2018

The layers in an artboard are shown in the Artboard panel.

  Screenshot Photoshop

An artboard functions as a Layer. Sort of.

Each artboard is a separate layered document, meaning anything you can add to a layer you can add to an artboard. 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 and the order of the artboards.

04
of 04

How to Preview a Photoshop CC 2018 Artboard on an iOS Device

The Device preview panel is highlighted.

  Screenshot Photoshop

When the Artboards feature debuted in Photoshop CC 2015, Adobe released an iOS app called Adobe Preview that allowed users to check their work for the iPhone or iPad on a mobile device providing it was on the same wireless network as the computer or attached to the computer through a USB connection. Adobe received criticism at that time because no accompanying Android app was introduced. Android developers used the Device Preview functionality in Photoshop to preview their work.

Adobe removed the Adobe Preview app from the Apple App Store in late 2017. At the same time, it discontinued the use of the Device Preview functionality within Photoshop itself.

As of 2018, users must rely on third-party preview apps to check their work for mobile devices. Adobe suggests the use of 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.