Photoshop Basics: The Artboard Tool

  • Easy
  • 15
    mins
  • Add to
    favorites

Designing for the web or devices? The Artboard Tool is here to help!

In this tutorial, learn how to use the Artboard Tool to create canvases perfectly sized for different devices.

* This tutorial is part of the Photoshop Basics Collection

Join Now to Watch the Exclusive Photoshop Basics Collection
$99/year – Access all our classes

What is the Art Board Tool?

The Artboard tool in Photoshop is extremely useful, but do you know what it actually does? As the name suggests, artboards are boards where you can view your art, but they also have a range of other useful capabilities. They’re fantastic for web and UX designers whose work is viewable on different types of devices.

The Purpose Behind Artboards

Imagine you’re creating a website that needs to be optimized for desktops, tablets, and smartphones. Choosing the artboard function allows you to constantly change the viewable content and also view the different page designs side by side. Even if you only work with a single screen size, you can use artboards to view multiple designs and mock-ups in a single window.

Features of Artboards

Layers and smart objects can be added to artboards, but you can’t add more artboards to the project. It’s actually better to have all your images and icons as smart objects so they’ll adjust themselves based on the size of the artboard. The artboard constrains all the images and layers when the board is resized.

When you are working with multiple artboards, you can move objects from one to another quite easily. On the canvas, all you have to do is drag the image or object from one to another. Photoshop will even try to keep the object in the same place on the new canvas as it existed on the old one.

Choice of Artboard Size Presets and Icons

  • iPhone sizes
  • iPad sizes
  • Android 1080p
  • Common web sizes like 1024, 768 and 1920, 1080
  • Icons for Mac and iOS

Scenarios and Reasons for Artboards

Artboards work beautifully for users who need to see a page in a variety of formats. Without artboards, you’d need to save the formatting and layering, view it on the device, and make changes after viewing it. With the Artboard tool, you can view your work as it will appear on many devices, such as an iPhone 6, a 15-inch iPad, or an Android device.

Converting an Existing Document

It’s simple to create artboards from scratch. You can convert an existing document, or you can select a new artboard document when you open Photoshop. If you convert an existing document, it will automatically resize to the artboard size that you’ve chosen, which can match a preset or be your own customized size. There are plenty of other artboard tricks you’ll learn as you explore the tool.

Dissolve Artboards

Here’s another one of our favorite artboard tips: Instead of starting over or destroying the document, you can dissolve artboards. When you dissolve one layer, all the elements on that artboard will move up one layer.

With the Artboard tool, you can create documents that easily allow you to view the image as it should appear on a website or app. The tool saves you time and decreases the number of commands and steps during a project. Check out the video to learn more cool artboard hints and tricks.

Reviews

There are no reviews yet.

FAQ

Share this tutorial

Photoshop Basics are available to all PHLEARN PRO Subscribers. Learn more about PHLEARN PRO Subscriptions

Each Photoshop Basics Tutorial includes a sample image so you can learn at your own pace and follow along with the video.

Photoshop Basics Tutorials may not be purchased individually, they are included with your PHLEARN PRO Subscription.