Photoshop Artboards

Competition is healthy, especially for us as consumers, and for the past decade or so Adobe’s Photoshop has sat unchallenged as the go to application for web professionals. It’s versatility is undoubtedly its strength, it has evolved into much more than the photo editing software it once was some 25 years ago. But just as the web has changed dramatically since 1990, so have our needs and requirements as users of the software.

The internet is now quite literally everywhere, it is read, consumed and interacted with on a myriad of devices. As such, designing and developing content for the internet has become much more complex, and the single canvas approach adopted by Photoshop simply doesnt cut it anymore. The latest update seeks to address that by introducing a feature called ‘Artboards’.

Artboards are nothing new, in fact Adobe Illustrator (Photoshop’s vector-based cousin) has benefitted from this feature for a long time now. But as the years have passed we have seen the homogenisation of these two core Adobe products, and with this latest update Photoshop now suddenly seems a lot closer to the all-round piece of web software many of us crave.

Photoshop is not for everyone, and many see it as a slow, bloated resource hog. In recent times there has been an emergence of several more lightweight applications that have seeked to fill a definite gap in the market when it comes the ‘designing for web workflow’. I have no doubt that the success of applications such as Sketch, for instance, have forced Adobe’s hand into re-thinking the way their flagship product operates.

So how do Artboards work?

The concept of artboards is a simple one, allowing for multiple design layouts to exist within a single Photoshop document. It's simplicity does not lessen it's impact however, for Photoshop users this is huge. It means no more duplicating files for each new layout you wish to design, instead several artboards can be tasked with achieving the same result. Not only that, but because artboards are essentially self contained and independent of each other, they are ready to export at the click of a mouse.

Creating an artboard

When creating a new Photoshop document, select ‘Artboard’ from the Document Type dropdown to access the artboard settings. Luckily for us Adobe have prepopulated the ‘Artboard Size’ dropdown with some useful presets, but if you wish to create a custom sized artboard simply adjust the width and height to your liking.

Initially this method only allows for the creation of a single artboard (unlike Adobe Illustrator where you can specify any number of artboards to add to your canvas) so in order to add an additional artboard, you must first select your Artboard Tool (Shift + V) and then click and drag on the canvas to create a new artboard. You can adjust the size of the artboard, or select a device preset, from the top toolbar. You can also duplicate an existing artboard in a similar way you would a layer or group, by right clicking the artboard in the layers panel and then choosing 'Duplicate Artboard'.

Any layer that is grouped to an artboard will automatically be cropped. To prevent layers from being hidden when cropped, Adobe have introduced a feature whereby if you drag a layer so that the layer is no longer visible within the artboard bounding box, it will snap the layer out of the artboard and also ungroup it in layers panel. On the face of it, this seems like a sensible solution to the problem of layers being hidden out of sight, but thankfully if this behaviour starts to annoy or frustrate, you can turn it off by de-selecting ‘Auto-nest Layers’ from the Artboard Behaviours dialog box found in the top toolbar.

New or existing artboards can also be renamed from the layers panel just like layers or groups, and thanks to the new, revamped export options also introduced in this update of Photoshop, exporting them is as easy as selecting the artboards you wish to export, right clicking and choosing ‘Export as…’

Good work, Adobe

The changes introduced in this update really do seem like a step in the right direction for Photoshop, and are a definite improvement in workflow when using Photoshop for the designing of web content. So thanks to some healthy competition snapping at the heels, Photoshop looks to have gone a long way towards making sure it’s still in a position to retain its crown.