How To Use The Artboards Feature Of Adobe Photoshop CC 2017

01
of 05

Overview of Artboards in Adobe Photoshop CC 2017

Two artboards showing a mobile portrait and landscape orientation are shown.
The new Artboards feature of Photoshop CC 2017 is one "slick" addition.

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 and they will tell you “Photoshop”. Though this may surprise quite a few people it is quite understandable. There are a variety of smartphone and tablets out there and they all have varying screen sizes. This inevitably results in a few dozen Photoshop .psd files containing multiple layers and a rather convoluted workflow. As of June 16, 2015, that has all vanished. Photoshop  contains a spiffy Artboards feature that is dead simple to use.

If you are an Illustrator user, you are quite used to the creation and use of artboards. The new artboards feature of Photoshop works very much like its Illustrator counterpart.

Let’s take a look at how to use it.

02
of 05

How To Create An Artboard In Photoshop CC 2017

The Artboard options are highlighted.
There are devices galore to choose from when adding artboards.

There are  two ways of creating an Artboard in Photoshop CC 2017.

The first is to create one when you open a new Photoshop document. There is now an Artboard choice in the Document Type pop down. When you select it, you can choose an Artboard Size from the pop down and your choices range from an iPhone 6 Plus to a 100 x 100 pixel Legacy iPad Spotlight  size.

The other method is to select the  Artboard tool – It can be found by clicking and holding on the Move tool.

When you select the Artboard tool you can go to the top of the interface and choose a preset from the same list you saw when you created 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 from three options as to how the Artboard will be handled by Photoshop CC 2015.

Here’s the really neat thing about artboards: You can have as many as you wish.

03
of 05

How To Name And Duplicate Artboards In Photoshop CC 2017

The Artboard panel is shown and the name of an artboard is highlighted.
Add the orientation and device to the artboard's name.

There are two way of duplicating an artboard. The first is to open the Layers panel, select an artboard and select Duplicate Artboard from the Context Menu. The second method is to 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.

Obviously 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. In the above image, they are iPhone 6 Plus_ Portrait and iPhone 6 Plus_Landscape. This tells me exactly which device and orientation applies to each artboard.

04
of 05

How To Add Content To An Artboard In Photoshop CC 2017

The layers in an artboard are shown in the Artboard panel.
Artboards are "separate layered documents".

As you may have guessed, an artboard is 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. In the above image I have artboards for an iPad Retina that have been set to Portrait and Landscape orientation. Each artboard has its own layers, layer groups, text, Smart Objects and anything else you would add to a Photoshop document.

As well, you can shift the layering order in each artboard and the order of the artboards

05
of 05

How To Preview A Photoshop CC 2017 Artboard On An iOS Device

The Device preview panel is highlighted.
Use Adobe Preview to view your artboards on an iOS device without leaving Photoshop.

This is where Artboards become a “killer” feature in Photoshop.

Along with the release of this update there is also an iOS App for iPhone and iPad – Adobe Preview- that lets you check your work on your iPhone or iPad providing it is on the same wireless network as your computer or attached to the computer through a USB connection..

What you do is install Adobe Preview on your device and open the app.

In Photoshop you simply click the new Device Preview button. The Device preview panel opens and your artboard appears on the device.

Here’s where it gets really “slick”.  If you change the device’s orientation, the appropriate artboard that applies to that orientation appears on the device.

My only complaint is the app is iOS only. Those of us that have Android devices are basically out of luck. Though Adobe has made it very clear many of its Touch Apps will have Android counterparts, only time will tell if Adobe will be making an Android version of Adobe preview available.

To learn more about using Artboards in Photoshop CC 2017, Adobe has a rather extensive overview.