Design Snack #8: Photoshop Artboards

4 min read
Andy Orsow
  •  Jun 17, 2015
Link copied to clipboard

Earlier this week we announced that InVision supports Photoshop Artboards. I thought it’d be nice to follow up that announcement with some helpful tips on working with Artboards.

Check out the episode above, or read along below. I’ve got some great Artboard workflows, shortcuts, and tips for you!

Navigating between Artboards

Moving between Artboards in a smart way will save you a lot of time in the long run. So here’s my preferred method:

Hold down Option and Click on an Artboard in your layers panel to jump to that board and fit it to your screen.

Expand / Collapse all Artboards

Of course, the previous tip won’t be helpful if you can’t actually see your Artboard titles in your layers panel. To collapse all artboards at once, just hold Command and Click on the expand/collapse arrow next to your Artboard title.

Creating Artboards from groups

You don’t have to start a project with Artboards to use them. It’s easy to convert layers or groups to Artboards after the fact. Just select your layer or group, and go to layer>new>Artboard from layers or group.

Quick export as PNG

This tip doesn’t only relate to Artboards, but it’s new, and super helpful.

To quickly export anything as a PNG, just select it in your layers panel, right click and select Quick export as PNG. You’ll be prompted to choose a folder location, and after that a Finder window should pop up with the files you just exported.

I know—it is cool.

In case you missed it

Photoshop Artboards are already compatible with InVision—just sync your PSD with us, and we’ll automatically convert your Artboards into individual screens. For more on that, check out our official announcement.

Collaborate in real time on a digital whiteboard