Photoshop Artboards – How to use them

We have long used artboards in Illustrator, but if you are a web or UX designer like me, you have probably found yourself wishing Photoshop had that feature as well.

Quick summary

  • What is an artboard
  • Create an artboard
  • Add new artboards
  • Work with artboards
  • Exporting artboards

What is an artboard?

Visually, artboards serve as individual canvases within a document. Artboards are new in Photoshop with the Adobe Photoshop CC 2015 release. If you don’t have CC 2015 or CC 2017 version, you’ll have to update first to get this new feature.

An artboard is some kind of special type of layer group. An artboard clips the contents of any contained elements to its boundaries. The hierarchy of elements in an artboard is displayed in the Layers panel, together with layers and layer groups. Artboards can contain layers and layer groups, but not other artboards.

Create an artboard

Creating an artboard in photoshop is very easy.

  • Select File > New
  • From the Document Type pop-up menu, select Artboard.
  • Select one of the 35+ Artboard Size presets or create one with custom dimensions
new_document

Create new artboard.

Add an artboard to an existing document

You can add new artboard in your document by using the artboard tool artboard_icon and simply draw the artboard on the canvas or you can quickly add new artboards to your document by clicking the + icons that appear alongside artboards currently in the document.

Also, you can create an artboard from existing layers in your document. Just select the layers you want to include in the artboard and go to Layer > New > Artboard From Layers and name your artboard accordingly.

create_artboard

Option/Alt-click a plus (+) icon to duplicate the currently-selected artboard along with its contents.

You can either create an artboard and get to work or start planning your design in advance by creating and duplicating blank artboards. Rename your artboards to fit your needs.

Work with artboards

For easy navigation through your artboards and not spending all your time zooming in and out to find the right screen you can hold down your Option (Mac) / Alt (Win) key and click the desired artboard in your layers panel.

You can easily move elements between artboards by simply dragging the elements from one artboard to another on the canvas.

When you duplicate layers or layer groups in a document containing artboards, you can choose the artboard in which you want to place the copied layer.

duplicate-layers-artboards

You can also set up different guide layouts for each of the artboards you create. Just click View > New Guide Layout and choose the option that’s most relevant to you. You can target the Canvas, a specific artboard or all artboards in your document.

guide_layout

To collapse all the artboards at once, hold down the Cmd (Mac) / Ctrl (Win) key and click an artboard. That way you can easily see the names of all your artboards in the layer panel.

Exporting artboards

You can export artboards as JPEG, GIF, PNG, PNG-8, or SVG image assets directly from the Layers panel. Just select the layers (artboards) you want to export as image assets and click Quick Export as PNG or Export As. Or you can simply go to Layer > Export As and export the artboards from there.

Apart from exporting artboards as images, you can export them as PDFs or some different file type like PSD, TIFF… by going to File > Export > Artboards To PDF or File > Export > Artboards to Files.

Conclusion

Photoshop artboards are very useful. Especially if you are designing for mobile apps and responsive designs. They help us design for multiple screens and see the user experience and the flow across the entire design in a single document.

Artboards also help us with the export of the assets for our designs. Now with the latest update, we can very easily export any assets (or all) in any format and send them over for development.