Artboards – Welcome to Photoshop
Artboards were a new feature introduced in Adobe Photoshop 2015 with an aim to make it more friendly for Web Designers. Artboards have been used in Illustrator for more than a decade now and its about time that they make their debut in Photoshop as well. You can learn all about the Artboards in Adobe’s Official User Guide. Artboards in photoshop enabled Web Designers to make the Website Layouts for different devices simultaneously in a single Photoshop File. But it seems like the folks at Adobe didn’t think it through. They have done a rather desultory job. There have been many issues popping up with this feature. The biggest of them being the Canvas re-sizing issue.
Photoshop is a Canvas based Interface, while dartboard belongs to a more vector based environment (at least that’s what it has been used for for the last 10 years). Here, an effort has been made to combine the two. In the Photoshop Interface, Artboards are a subset of Canvas. It means technically, all the Artboards defined in the Photoshop document are in a giant canvas which is hidden from the user.
What is the issue?
What happens is whenever a new document is opened in Photoshop, it automatically creates an Artboard with a blank layer in it (as of CC 2018). Initially, the Artboard and Canvas have the same dimensions, but as you continue working in the document and fiddling with the artboard dimensions, the canvas starts to change dimensions as well and is always larger than the Artboard (or the total area covered by multiple dartboards). It is difficult to pinpoint the exact relation between the dartboard and canvas dimension changes but it seems the final canvas dimensions are around 20-25% larger than the dartboard dimensions.
But when the size of the dartboard decreases, the size of the canvas remains the same. Suppose we create a new document in Photoshop with dimensions 500 x 500px. The artboard and canvas dimensions will be 500 x 500px. But if the dartboard size if decreased using the artboard tool (V), the canvas size remains the same at 500 x 500px.
On the contrary, if we keep the artboard size same and try to decrease the canvas size, it just doubles in size. Suppose, we try to decrease the size of the aforementioned canvas from 500 x 500px to 100 x 100px, it will become 1000 x 1000px and nobody knows why.
Annoyance to Users
This whole artboard mess has proven to be a real annoyance to the users, which this site pointed out. Everything works fine till the size of the artboard is not changed. But as soon as the size of the artboard changes, the changes in canvas size creates a whole lot of problems in sharing and saving the document.
While saving the file as JPG, PNG or other image formats using the traditional methods – Save As…(Cmd + Alt + S/Ctrl + Alt + S) or Save for Web(Cmd + Alt + Shift + S/Ctrl + Alt + Shift + S), it saves the canvas and does not save the Artboard, no matter what you do. The only case where this is helpful is when the Artboard and Canvas have the same dimensions. In the Photoshop CC 2018 which I have been using, Save for Web has been marked as Legacy, it means it is now an outdated function. The preferred one is the Export method to save files.
Also, if you have to share your PSD files with others, it may cause issues when sharing with older versions which do not support Artboards. The PSDs are not compatible and hence, the layouts are distorted. This is a very big inconvenience as it impedes productivity.
How to avoid it?
Until folks at Adobe fix this issue, we need to work-around this issue and hack our way through Artboards. There are a couple of methods which can be used to counter the Artboard issue-
- The most obvious method is to avoid using Artboards. While opening a new document, in the ‘New Document’ window, it asks whether the Artboards need to be enabled or not. Just uncheck the checkbox and the Artboards will not be loaded in the Document.
- If you are adamant on using Artboards (it is, after all, a nifty feature enabling us to place multiple layouts in a single file), don’t use the traditional saving methods. If you want to save PNGs or JPGs, you need to use the Export feature (File > Export). You can either quick export as PNGs which will save the PNGs directly or you can use the Export As… feature giving you more options to save the Artboards as images.
- If you have started working on a document with Artboards but mid-way decide to do away with Artbaords, you can Disable Artboards easily. Just Select the Artboard, right-click on it and select ‘Ungroup Artboard’. It will disable the Artboard.
The Artboard feature is certainly a welcome addition to Photoshop but the bugs it has brought along with it need to be fixed. Till then, we can either avoid Artboards altogether or embrace it and find ways to deal with the bugs which I am sure Adobe will fix eventually.