Jul 12, 2016

How to Use Artboards in Photoshop

How to Use Artboards in Photoshop

Artboards are a great tool for designing across multiple devices. If you want to see what a webpage would look like on a 27″ iMac, a 15″ MacBook PRO and an iPhone, you can use artboards to create design previews of each! Learn how to use artboards to design quickly and efficiently in today’s episode!

How to Create Artboards

Preview your design at different resolutions by going to ‘File – New’ and choosing Artboard from the dialogue box. Here, you can select the resolution you want to preview on (27″ iMac). With the Artboard tool selected, hold ‘Alt/Option’ and click on an edge icon to duplicate the artboard.

Artboards are useful for allowing you to duplicate your designs across artboards as well, so you don’t have to reimport your elements.

How to Use Linked Smart Objects in Artboards

Smart Objects are the best way to adjust and resize your design without losing information. Right click on a layer and go to ‘Convert to a Smart Object’ to make one. To place them onto your artboard, simply duplicate your design layers. If you need to resize the artboard, click and drag the edges with the Artboard tool.

After you’ve arranged the Smart Objects to your liking, you can repeat the process on more artboards. Duplicate the current artboard to make new ones, which you can set to be the sizes of a 15″ MacBook PRO and an iPhone. The Smart Objects will make sure you re-adjust all of your elements non-destructively.


user image You
(will not be published)

  • user image
    Raymond Kriel

    Hi Everyone, Thank you for another amazing tutorial.

    I have a question, I have Photoshop CS 6 and the artboard’s options are not available. I noticed that you are using PS CC. Is there a way to download the artboard options into CS 6.?

    Lots of love

  • user image

    Nice tutorial. I realize you’re main focus is Photoshop, but is Photoshop really the best application to design a website? Many (if not all) of the features you cover in this tutorial are easier and automatic in Adobe InDesign. Typesetting is also so much easier (and better) in InDesign.

    Just as I wouldn’t advise people edit photos in InDesign, I wouldn’t advise people design in Photoshop.

  • user image

    I love you! This tutorial, as so many (including the ones I’ve purchased), are dope!

  • user image

    I am an old school web developer that codes in the browser. Thanks a ton for this tutorial. I was recreating the wheel for each version. Thanks for showing the magic!