Artboards

Web and user interface (UI) designers often like to visualize how a design looks at different device sizes or, as illustrated here, how a site’s pages flow. Artboards can help.

A Bit Like Groups

You can use artboards to hold the layers that compose each web page or UI screen. They look almost like groups in the Layers panel, but their entries are shaded to distinguish them.

An artboard can contain layers and groups, but not other artboards. And some layers (or groups) can be independent of artboards (like the red lines drawn between artboards in the example illustrated above). You can create a new document with artboards in mind or add them to an existing document. My preference in either case is to populate the first artboard and then duplicate it, especially if the content is similar in each. When you select an artboard with the Artboard tool, you’ll see plus signs on each side. Clicking one makes a new, empty artboard, but option/Alt-clicking makes a duplicate.

If you have content that is repeated on each artboard, you will want to encase that content in a Smart Object, the next topic in this chapter. Copies of a Smart Object use the exact same assets. So editing one Smart Object’s content changes the content of all of them, saving time and resources.

A new application from Adobe called XD can open a PSD file with artboards. With XD, you can create prototypes that work on mobile devices. Sadly, as of this writing, many features we use with Photoshop layers, like blend modes and fill layers, do not operate as expected in XD.

There are third-party apps like Skala Preview that mirror what you’re doing in Photoshop to your mobile devices.