Artboards

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. 

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. 

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.

5. 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.

2. Draw the artboard on the canvas.
3. 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.

4. 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.
5. 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.
   

Work with artboards

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.

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.

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.

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.

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.

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

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.

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. 

To show/hide artboard names select View > Show > Artboard Names. Artboard names are automatically truncated to the width of the 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.

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.

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. 

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

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, or PNG 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.

FAQ