Artboards were a new feature rolled out with Photoshop CC 2015. They’re generally used for mobile website mock-ups and multiple page documents. I’ve found a new use for Artboards that I thought I’d share with pixeLobby’s readers!

My primary job is Art Director at a regional sleep products retailer in Northern California and in this position I create digital display ads for our new events usually twice a month. Until recently this meant opening several individual files of varying sizes and manipulating the same imagery over-and-over.

Recently Adobe introduced Libraries which help alleviate some of the copy/pasting/dragging somewhat. However, I still had nine or so documents to open edit, export and close every couple of weeks.

Watching the AdobeMAX 2015 opening presentation, I realized that Artboards could provide a central location to edit all the varying sizes of display ads at once.

The most difficult part was figuring out how Artboards worked.

Create a new Artboard document:

Select File/New and then select Artboard from the Document Type menu. (Note: This will vanish once you set the size. Fear not! You’re still creating an Artboard document.)  Set the size by populating the width and height field. In my case, I’m using the standard 300×250 display ad size. Remember, when designing for the web, resolution doesn’t matter. 

artboard1

Additional Artboards

To create additional Artboards, either select the Artboard tool from the nested menu under the move tool. Draw the general size of the artboard and edit it’s properties in the properties menu at top. You can make it exactly the size you need by typing the dimension in the panel.

artboard tool

new 2

An alternative way to create an Artboard is to select existing layers to include in the Artboard and, from the Layers panel fly-out menu, choose Artboard From Layers.

artboard layers

Each Artboard has a separate section in the layers menu, grouped under a name “Artboard 1” etc.  You can change the name by double clicking on the text.

artboards 4

You can duplicate the Artboard by right clicking on the name and selecting Duplicate Artboard.

duplicate artboard

Using Artboards for Display Ads

Using the methods described above you can quickly create all the different display ad sizes you need.  Sharing resources between them is as simple as Alt-Clicking (Option-Click on a Mac) on an object and dragging it to the other artboards, all on the same document.  I still use libraries but to hold specific icons and images that I’m using often.

artboard ads

One of the major benefits to this method is that, when you export, you export all the finished Artboards at once!

To change the background of your Artboards document (they start out very light), right-click in the area outside the Artboard and select the color you want.

color

Set up your export by going under File/Export/Export Preferences. There my settings are JPG with quality at 86. I’ve found that quality 85 degrades the image too much, but you might need to set it lower depending on the content of your ads.

export

When this is set, all that is needed is to select File/Export/Quick Export as JPG. From there you select the location to export your ads and click OK. Photoshop will export all your ads at once, and you’re ready to send them off.

ads

This has become a major time saver for me, and I hope that it might help you as well!  For more information on Artboards in general, and their usage for other purposes, I highly recommend Julieanne Kost’s blog.

If you have any questions or comments, please find me at the pixeLobby Facebook page.