Why Use Artboards
- They allow you to have several files in one document. One analogy is that every Artboard is a separate canvas in your document. An Artboard becomes a separate file on export.
- It’s very quick to change the size of an Artboard. Whereas a normal document would require a canvas re-size or image re-size.
- Exporting Artboards and their contents are very straightforward and quick. In
fact,the exporting process is geared towards Artboards
- If you need to deliver different sized versions of one image for different devices on the web, Artboards are the way to go.
- If you want to prototype web sites, or webpages Artboards are useful but as of March 2019, Adobe XD is starting to become the new way of prototyping websites. But, XD is in its early stages.
- Naming your Artboard is important as it becomes the file name on export. If you are working in a team bottom out the naming conventions before you start.
- Files containing Artboards can become very large in size.
- Artboards only work in the RGB colour space.
- Artboards are measured in pixels, not inches or centimetres, and are not suited if your final output is a printer.
- If you want a mock-up with different paper sizes you are better off in Adobe Illustrator.
- Auto-Nest Layers: if it’s ticked in the options bar under the cog symbol it means anything placed on an Artboard on the canvas becomes part of that Artboard, and any object outside of any Artboard becomes a separate layer. If you un-tick Auto-Nest Layers it means that anything that’s either in or outside of an Artboard will remain that way.
- Auto-Nest Layers is also available on a per Artboard basis in the layers panel. Click the Artboard symbol.
What is an Artboard
An Artboard behaves like a Layer Group, in other words, it does not contain data, it’s just a place holder. An Artboard, unlike a Layer Group, has a size in pixel dimensions.
The most important attribute of an Artboard is that it has a size in pixels, which you can change at any time.
The Artboard also has a background and you can choose any colour for the background, as well as having a transparent background.
An Artboard will become a separate file on export.
You can have anything you like inside an Artboard like a Layer Group. You cannot have an Artboard within an Artboard.
The Artboards in Photoshop are not particularly easy to work with. Always make sure you select the Artboard name on the canvas before working with an Artboard. Or, make the Artboard you want to work with has a blue border.
A Typical Use For Artboards
The naming of Artboards is vitally important as this will become the file name on export, whether you use Export As… or Quick Export.
You can name your Artboard via Layer / Rename Artboard. The easiest way is to double-click on the Artboard Layer name in the Layers Panel.
Not a lot going on here really, the default settings are ok.
You can change the colour of the background. And whether to show a decorative line around each Artboard.
The decorative line can cause confusion because someone could mistake the line as being part of the image itself, which it is not. By
You can change the colour of any guides you drag out. Guide(s) will belong to the selected Artboard. So, make sure you have the right Artboard selected in advance.
If you tick “Show Inactive Artboard Guides” you will see any guides from any non-selected Artboard(s). Here I’ve changed the colour from Light Blue to Light Red as having a dotted line is indistinguishable from a normal line.
Un-ticking Show Inactive Artboard Guides is, in my opinion, the safest option. Because you will only ever see the guides for the Artboard you are on.
The ways to create an Artboard
- File > New… and make sure you tick Artboard in the dialogue box.
- Select more than one layer and right-click on the layers and choose Artboard from Layers.
- Select a group. right-click on the group and choose Artboard from Group…
All of these commands are also available from the Layer Menu.
Depending on your workspace the Artboard Tool is either visible or, under the Move Tool. In the “Graphic and Web” workspace it is the second tool down on the tools panel.
The options bar is where you control your selected Artboard.
One of the frustrating thing about this tool is that it will turn into the Move Tool if you click away from an Artboard.
The best way to select an Artboard is to click on its name on the top left-hand side of the Artboard on the canvas.
Without a doubt, the selecting of an Artboard is the biggest single failure point when using Artboards. Adobe needs to make an Artboards a workspace, rather the hodge-podge it is now.
You always need to be aware of what tool you are on. Because the Artboard Tool will change to the Move Tool and vice-versa if you click away from the Artboard.
Creating New Artboards In An Open Document.
- Click on the New Artboard icon in the Options bar of the Artboard Tool.
- Click on the plus symbols on the outside of the selected Artboard.
- Layer > New > Artboard…
Duplicating Artboards is a common procedure because we often work with duplicated layers in different Artboards.
- Select the Artboard and Alt/Option-click on the plus symbol.
- Select the Artboard by clicking on its name and drag the Artboard keeping the Alt/Option Key pressed.
- Go Layer > Duplicate Artboard…
A common workflow is to duplicate an Artboard and resize the duplicated Artboard and its contents. To save time, after I’ve duplicated the Artboard; I select all the layers I need to resize and do the re-sizing in one transformation.
On the Move Tool Options bar ensure Auto Select Layer is un-ticked. Then all you will have to do to select an object/layer on the canvas is to press Command, or Control to select and move that object.
Also on the Move Tool Options Bar make sure Show Transform Controls is ticked this will save you having to use Edit > Free Transform (Cmd/Ctrl + T), which will slow you down.
I don’t think that using Artboards is a massive leap for someone who is quite new to Photoshop. It does though require care as you are effectively working with several documents inside one document.
You will find the Artboard tool becoming the Move Tool, and vice-versa, the most frustrating aspect