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.
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.
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.
- In Photoshop, select File > New.
- In the New dialog box, specify a name for the document. For example, iPhone website.
- From the Document Type pop-up menu, select Artboard.
- Select one of the 35+ Artboard Size presets.
- Begin adding your design elements to the artboard. You can add smart objects, layers, layer groups, etc. to the artboard.
If you have a standard Photoshop document, you can quickly convert it into an artboard document.
- Select one or more layer groups or layers in the document.
- Right-click the selection and then choose Artboard From Layers or Artboard From Group.
icon to select the Artboard tool.- Draw the artboard on the canvas.
- 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.
- Rename the artboard to your desired name. Do the following:
- With the artboard selected, select Layer > Rename Artboard.
- Type a new name for the artboard and press Return.
- Begin adding your design elements to the artboard. You can add smart objects, layers, layer groups, etc. to the artboard.
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.
- Select an artboard.
- Click a + icon alongside the artboard. Photoshop adds an artboard to the document in the direction of the + icon.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
You can export artboards as PDF documents. Follow these steps:
- In Photoshop, select File > Export > Artboards To PDF.
- 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.
- Click Run. Photoshop generates the PDF document.
You can export artboards as separate files. Follow these steps:
- In Photoshop, select File > Export > Artboards To Files.
- 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.
- 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.
- Click Run. Photoshop exports the artboards as files in the selected format.
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:
Yes. Use the Artboards From Layers feature.
Twitter™ and Facebook posts are not covered under the terms of Creative Commons.