Design for mobile and web using artboards

Photoshop artboards are really useful, especially for designing for mobile apps and responsive design. You can design for multiple screens and see the experience and the flow across your entire design in a single document.

Artboards are containers that act like special layer groups. And layers placed within an artboard are grouped beneath the artboard in a layers panel and are clipped by the artboard boundaries on the canvas. You can have multiple design layouts within one document by using artboards. This makes it easy to copy content between artboards, view everything altogether and also keeps your designs organized.

When creating a new document in Photoshop, Select Artboard from the Document Type, then select the desired artboard size. In this example, I'm selecting iPhone 5. If you already have a Photoshop document without artboards, you can also easily add them later.

When we switch to a document that already has content, to change artboard properties, you can select the artboard in the Layers panel, you can then edit artboard properties such as size, orientation, alignment and more using the Tool Options bar, the Properties panel, or by using the artboard handles to manually re-size the artboard.

Let me show my rulers. Notice that the guides are relative to the artboard that's moving. You can use the guide layouts to align elements in your design by assigning guides to your desired artboards, or to the document. You can also use artboard-specific grids for aligning objects. Let me turn mine on by choosing View, Show, Grid. Just like the guides, the grids also move with the artboard. Let me turn off the grids again.

There are many ways to add and edit artboards. With an artboard selected, use the on-canvas controls to easily add artboards to your document. Or click the "+" icon while holding Alt or Option to easily duplicate the artboard. Or use the Artboard tool to create an artboard of a different size.

Each artboard has a specific name that appears as a name label on the canvas, and you can edit the artboard names so that they make more sense to you. Just double-click the name in the Layers panel. You can also toggle the visibility of the artboard names on or off, by choosing View, Show, Artboard Names. I'll show the artboard names again.

In the Layers panel, each artboard has its own set of layers that you can arrange. If you have a lot of content, you can filter the layers in the layers panel by artboard. If you select an artboard, or select content on an artboard with the Auto-select option enabled, only the contents of the selected artboard will appear in the Layers panel.

It's easy to share content between artboards or move content in or out of an artboard. If you drag content associated with an artboard outside the bounds of an artboard, the content is no longer nested within it. Layers outside of artboards are not clipped by any of the artboards. Dragging artwork inside the bounds of an artboard auto-nests the content within that artboard. You can select the Prevent Auto-Nesting option in the Layers panel to keep layer content from nesting automatically in or out of an artboard.

You can also lock the position of an artboard and its contents on the canvas so that it stays in place. Export optimized content easily by right-clicking any content in the artboard, then choosing Export As... to get just those layers, or you can choose File, Export As... to export each artboard as a flattened and optimized PNG or JPEG. Another option is to export each artboard as single PSD files. You can also save your design as a PDF or each artboard as its own page, allowing it to easily send the whole design for review or other purposes.

Photoshop gives you even more freedom and flexibility to easily convey responsive web design, mobile app design and much more. Give Artboards a try today.