Photoshop Artboards
Artboards for different devices on the same canvas

If you are a web or UX designer, you increasingly find yourself designing websites or apps for multiple devices. Artboards help streamline your design process by giving you an infinite canvas on which you can lay out designs for different devices and screens. While creating artboards, you can choose from a wide variety of preset sizes or define your own custom artboard size.

Artboards are useful even if you normally design for just one screen size. For example, while designing a website, you can use artboards to view designs for different pages side-by-side and in context. 

Note:

Artboards are optimized for the RGB color mode and advanced GPU drawing mode.

So, what's an artboard?

You can think of an artboard as a 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.

Visually, artboards serve as individual canvases within a document. Any layers in the document not contained within an artboard are grouped at the top of the Layers panel and remain unclipped by any artboards.

Artboard preferences

To customize the look of your artboards select Preferences > Interface > Appearance > Artboards. You have the option to select the artboard matte color and to show or hide artboard borders. 

Photoshop  Artboard preferences

Create an artboard document

  1. In Photoshop, select File > New.
  2. In the New dialog box, specify a name for the document. For example, iPhone website.
  3. From the Document Type pop-up menu, select Artboard.
  4. Select one of the 35+ Artboard Size presets.
Photoshop artboard sizes
Wide choice of artboard size presets

  1. Begin adding your design elements to the artboard. You can add smart objects, layers, layer groups, etc. to the artboard.

Convert an existing document into an artboard document

If you have a standard Photoshop document, you can quickly convert it into an artboard document.

  1. Select one or more layer groups or layers in the document.
  2. Right-click the selection and then choose Artboard From Layers or Artboard From Group.

Add artboards to the current document

  1. In the Tools panel, click the  icon to select the Artboard tool.
  1. Draw the artboard on the canvas.
  2. Resize the artboard if necessary. From the tool options bar, select a preset size from the Size pop-up menu. Alternatively, you can leave the artboard custom-sized.
Photoshop Resize the artboard
Resize the artboard

  1. Rename the artboard to your desired name. Do the following:
    1. With the artboard selected, select Layer > Rename Artboard
    2. Type a new name for the artboard and press Return.
  2. Begin adding your design elements to the artboard. You can add smart objects, layers, layer groups, etc. to the artboard.

Quickly add new artboards to a document

You can add artboards to your document by clicking the + icons that appear alongside artboards currently in the document. These + icons appear wherever the canvas can accommodate additional artboards. To duplicate an artboard along with its contents, Option/Alt-click a plus (+) icon.  

  1. Select an artboard. 
  2. Click a + icon alongside the artboard. Photoshop adds an artboard to the document in the direction of the + icon.
Photoshop Add artboards with plus icons
Add artboards with plus icons

Note:

Option/Alt-click a plus (+) icon to duplicate the currently-selected artboard along with its contents. The new artboard is added in the direction of the + icon you clicked.

Work with artboards

Set artboard background

In the Properties panel (Window > Properties) for the artboard, set the desired value for Artboard Background Color field. You can also set the artboard background to transparent.

Set artboard background

Move elements between artboards

Simply drag the elements from one artboard to another on the canvas. 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.

When you add/move an element to an artboard, the new element moves to the top of the Layers panel Z-order for that artboard.

You can also group layers/elements not included in any artboard with existing artboards. Simply drag the element on the canvas to the target artboard. Alternatively, move it into the target artboard in the Layers panel.

Duplicate layers or layer groups

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

Duplicate Layers: Choose the artboard in which you want to place the copied layer

Move

With the Artboard or Move tool selected, click the label of an artboard to select it. Now, move it to its desired location on the canvas.

Resize

With the Artboard or Move tool selected, click the label of an artboard to select it. Now, select a new preset Size for the artboard from the tool options bar.

If you want to resize the artboard to a custom size, simply resize its boundaries using the handles.

Grids

Select an artboard and select View > Show > Grid to view grids in an artboard.

Guides

With an artboard selected, drag guides from the ruler to the canvas. These guides now move with the artboard. You can also duplicate an artboard with the assigned guides to assign identical guides to the duplicated artboard. Alternatively, you can select View > New Guide Layout to target the desired artboards. To set the guide visibility options, select View > Show.

Photoshop New Guide Layout
(Left) New Guide Layout | (Right) Guide visibility options

Inspect artboard properties

Select an artboard and select Window > Properties to quickly inspect its key properties. You can also resize the artboard from within the Properties panel.

Artboard properties are also displayed in the tool options bar when an artboard is selected. 

Photoshop Artboard Properties panel
The artboard Properties panel

Show artboard names

To show/hide artboard names select View > Show > Artboard Names. Artboard names are automatically truncated to the width of the artboard.

Filter layers by artboard

In the Layers panel, from the Search pop-up menu, select Artboard. Select an artboard or any layer within an artboard. The Layers panel view is now restricted to just the selected artboard. To return to the full Layers panel view, either deselect all layers or select something outside the artboard.

Prevent auto-nesting into or out of Artboards

Assign the lock in the illustration to an artboard to disallow auto-nesting into and out of the artboard, or to specific layers within an artboard to disallow auto-nesting of those particular layers. To revert to the normal auto-nesting behavior, remove any auto-nesting locks from artboards or layers.

Photoshop Prevent auto-nesting into or out of artboards

Artboard positional lock

Select an artboard and assign the positional lock. The artboard now remains fixed in its position on the canvas, but elements can still be added, moved within, or removed as usual. 

Photoshop Lock position

Rename

Double-click the artboard name in the Layers panel and enter a new name. Alternatively, use the Layer > Rename Artboard command.

Dissolve artboards

You can quickly dissolve artboards into their constituent elements. With the artboards selected, select Layer > Ungroup Artboards. The artboards are dissolved and their constituent elements all move a level higher in the Layers panel. If the last remaining artboard in the document is dissolved or ungrouped, the document becomes a non-artboard document.

Export artboards

Export artboards as image assets

You can export artboards as JPEG, GIF, PNG, PNG-8, or SVG image assets directly from the Layers panel.

For more information, see Export artboards and layers.

Export artboards as PDF

You can export artboards as PDF documents. Follow these steps:

  1. In Photoshop, select File > Export > Artboards To PDF.
  2. In the Artboards To PDF dialog, do the following:
    • Choose the destination/location where you want to save the generated PDF documents.
    • Specify a file name prefix for the generated PDF documents. For example, Campaign_insurance.
    • Specify whether you want to export only content on the artboards or also the content in areas overlapping the artboards.
    • Specify whether you want to export all artboards or only the ones currently selected.
    • Specify whether you also want to export artboard backgrounds along with the artboards.
    • Specify whether you want to generate a single PDF for all the artboards in the current document, or generate one PDF document per artboard. If you choose to generate multiple PDF documents, all of those documents take the file name prefix you specified earlier.
    • Specify an encoding for the exported PDF documents: ZIP or JPEG. If you chose JPEG, also specify a Quality setting (0-12).
    • Specify whether you want to include the International Color Consortium (ICC) Profile in the exported PDF documents. An ICC profile comprises data that characterizes a color input or output device.
    • Specify whether you want to also export the artboard names along with the exported artboards. You can specify a custom font, font size, font color, and canvas extension color while selecting this setting.
  3. Click Run. Photoshop generates the PDF document.

Export artboards as files

You can export artboards as separate files. Follow these steps:

  1. In Photoshop, select File > Export > Artboards To Files.
  2. In the Artboards To Files dialog, do the following:
    • Choose the destination where you want to save the generated files.
    • Specify a file name prefix.
    • Specify whether you want to export artboard content only or want to include overlapping areas as well.
    • Specify whether you want to export all artboards or only the ones currently selected.
    • Specify whether you also want to export artboard backgrounds along with the artboards.
    • Choose the file type to whcih you want to export. You have the option to export as BMP, JPEG, PDF, PSD, Targa, TIFF, PNG-8, or PNG-24.
    • Specify the export options for the file type you have selected.
      • Specify whether you want to also export the artboard names along with the exported artboards. You can specify a custom font, font size, font color, and canvas extension color while selecting this setting.
  3. Click Run. Photoshop exports the artboards as files in the selected format.

Device Preview and the Preview CC companion app

Photoshop Preview designs on target devices

Using the Device Preview feature in Photoshop and Preview CC, a companion app, you can quickly preview designs on their target iOS devices. Preview CC connects to Photoshop through a USB port or over Wi-Fi, and renders a live preview of your design. Any changes you make to your design are automatically sent to the device, so that you can preview them.

For documents with artboards, Device Preview attempts to show you the correct artboard by matching the size and position of the artboard with the size of the connected iOS device. You can also use the navigation bar to preview a specific artboard on the device or swipe through artboards in the order in which they're listed in the Photoshop Layers panel.

For more information about Device Preview and Preview CC, see:

FAQ

Can I add an artboard within an artboard?

No. Artboard nesting is currently not supported.

Is artboard a type of layer?

You can think of artboards as a special type of layer groups. Artboards are listed in the Photoshop Layers panel, just like layers and layer groups.

Can I make artboards out of a standard Photoshop document?

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

Legal Notices   |   Online Privacy Policy