Artboards are the backbone of any multi-page project in Photoshop since the artboard is the blank canvas that holds all the layers and elements of the project. Just as in Adobe Illustrator, Photoshop can create multiple artboards to use as a type of layer group, which is useful when creating a brochure or multiple screens for mobile applications.
Creating separate artboards is useful because it allows you to keep all the elements of a particular project in one document. This is perfect for interface designers and beginner editors because they are really easy to use.
While artboards may seem confusing at first, here are the basics of everything you should know about them and how to use them.
What Are Artboards In Photoshop?
An artboard in Photoshop is the blank canvas on which you can add images, objects, text, and other elements. The artboard can hold multiple layers and layer groups that you add to the project.
The difference between an artboard and a simple canvas is that you can create and store multiple artboards in one document. Each artboard can hold different layers and layer groups which allows you to create multiple pages for one project. Artboards can be placed next to each other in the workspace to simultaneously work across various artboards.
All the elements on an artboard are clipped by the edges of the artboard and won’t be visible when the project is exported. This allows you to place large objects on an artboard that you would like to creatively clip with the edges of the artboard.
Artboards can hold layers and layer groups but can’t contain another artboard. Each element placed on an artboard will be added as a new layer underneath the artboard tab.
Artboards Vs Canvases In Photoshop
A canvas in Photoshop is the work area within the program that holds an image, shapes, text, or any other element as layers. This is the blank page that is opened when you create a new document. To create a canvas, select New File when opening Photoshop.
You can then select a default canvas size or add your own dimension and resolution on the right of the panel before selecting Create.
A white page will open up in the workspace and this is your canvas to which you can add elements. If images are added to the canvas changing the image size will not affect the canvas. When changing the canvas size it won’t affect any elements on the canvas including shapes and text.
There can only be one canvas added to a workspace in Photoshop at a time. If you want to create a new canvas, you will need to create the canvas in a different window. These canvases stay separate and are saved into separate documents.
Artboards are also created in the same manner as a canvas and it is also portrayed as a white page in the workspace. However, multiple artboards can be added next to — or above and below — other artboards to allow you to work seamlessly across the different canvases.
This makes it easier to move elements between artboards and makes it easier to see how the different elements from the different pages will work together. Artboards are also a good way to keep everything within a project in one single document.
Artboards are not always the best option as they create large documents and this can take up too much space and processing power on certain systems. However, artboards are best suited for certain situations as you’ll find out next.
When Would You Use Artboards?
Artboards can improve your workflow and efficiency in certain instances. You would generally use artboards when creating elements for a mobile application, where you need to create multiple pages that work together. Artboards are also helpful when designing other digital interfaces.
Designing pages for websites is an instance where artboards are also useful, as you can see how each page looks alongside the other pages. You can also use the artboards to design the same webpage for various screens and devices to show the different displays for desktop vs mobile for instance.
When artboards are created in Photoshop, they are optimized for the RGB color mode as well as the advanced GPU drawing mode, which makes them well-suited for digital projects.
Artboards are also useful when designing brochures and other marketing collateral that are spread out across multiple pages. Even though printed material is usually designed on Indesign or Illustrator, there are instances where you may need to edit elements in Photoshop while you see how it will work with the other pages.
Artboards can be used to easily create multiple frames for animation projects. Having each artboard in the same workspace allows you to keep the design continuous throughout the project. The artboards can all be exported together in image file formats or in PDF to create a presentation.
How To Create Artboards In Photoshop
Artboards can be created in two ways, either when starting a new project or when you have already begun a project on a normal canvas. Once an artboard is created, you can easily add more artboards, move them around, and edit the elements of the various artboards.
To create an artboard when starting a new project, select the New file button when opening Photoshop. You can also navigate to File > New or press Control + N (Win) or Command + N (Mac) if you already have an open project.
Once the New Document window opens, you can select a default-sized artboard or navigate through the various tabs for specific canvas sizes, such as the Mobile tab. You can also type in a specific document size and resolution on the right-hand side of the window.
Once you have the correct dimensions set, you can change the document color mode, the color of the artboard, and other settings. Then make sure you select the checkbox next to Artboards and select Create.
You will now have one artboard within the workspace, set to the dimensions you have selected. You will also notice that the Layers panel has created an Artboard 1 group for your project, this is where your layers will be added when working on the selected artboard.
If you have already created a single canvas and added elements, you can easily convert this into an artboard without losing your work. To do this, select the Artboard tool from the toolbar. This tool is located within the Move tool, so click and hold on the icon and select the correct option.
You can then set certain settings in the Options bar such as setting a custom size for the artboard. You can also use the Size drop-down menu to choose a default size for the artboard, such as an iPhone X size.
Once you have chosen the right dimensions, select the Add Artboard icon in the Options bar and click once anywhere on your current canvas.
Once you click on your canvas, it will change into an artboard at the dimensions you set in the Options bar. Your layers with various elements will remain on the new artboard, but you may need to move or resize them to fit better on the artboard.
You can also convert a normal canvas to an artboard by selecting the layers or layer groups in your Layers panel, right-click (Win) or Control + Click (Mac), and select Artboard from Group or Artboard from Layers. This method doesn’t allow you to set the artboard dimensions before creating the artboard.
How To Add And Modify Artboards
Once your artboard is created, when you select the Artboard tool, you will notice plus signs around the artboard. You can click any of these to add a new artboard above, below, or on either side of the initial artboard.
Select the sign on the right to add another artboard to the right of the first artboard. This will create a new artboard with the same dimensions as the original artboard.
If you want to create a new artboard with different dimensions to the previous one, you can change the dimensions in the Options bar as above, or you can click and drag anywhere on the workspace and create a custom-sized artboard.
You can move an artboard anywhere in the workspace by clicking on the artboard name and dragging the board to the new position on the canvas.
Once you have created your artboards, you can change the size or background color of the selected artboard in the properties panel.
You can also customize the artboard even more by navigating to Edit > Preferences > Interface (Win) or Photoshop > Preferences > Interface (Mac) and selecting the drop-down menu next to Artboards under the Appearance tab.
When you are working with multiple artboards, you can move elements between them by simply selecting the elements and dragging and dropping them onto the new artboard. Photoshop will help you position the elements using the rulers to line them up with the elements’ position on the previous artboard.
You can export the artboards as you would normally export an image to an image format such as PNG or JPG. However, the exported image will be shown as all the artboards connected in the order and arrangement which they are in the document.
If you want to export the artboards into separate image files, navigate to File > Export > Artboards to Files.
A dialog box will open where you can change the save settings of the artboards. You must choose the destination file and what you want to name the artboards.
You can then choose to only show what is on the artboard or to include the background elements. If you have selected certain artboards you can choose to only export those artboards by checking the Export Selected Artboards option.
Lastly, use the drop-down menu to select the file format you want to save the artboards in and click Run.
Once the files are exported, they will be saved individually in the selected folder.
To save the artboards as a PDF file, navigate to File > Export > Artboards to PDF.
You can then adjust the settings as above. When exporting as a PDF, you have a few additional options such as whether to save the artboards in a multi-page document or to have one document per artboard. Then click Run to save the files.