Artboards in Photoshop

Jan 12, 2021 | Email production

"Make responsive email design easier with Photoshop artboards. Visually, artboards serve as individual canvases within a Photoshop document, which simplifies and speeds up the design process. It makes visualising the mailers easier and ensures consistency...."

What are Photoshop artboards?

Think of an artboard as a type of layer group in Photoshop. Everything that you add to each respective artboard gets added to the layer group. Each artboard you create, creates a new group in your layers panel. This way you know exactly which elements belong to which artboard. We love working in artboards and find them much easier to use than groups.

Visually, artboards serve as individual canvases within a Photoshop document, which – for us – simplifies and speeds up the design process. Artboards can differ in size.

Fig A – Default use, a single canvas
Figure A
Fig B – Artboards in Photoshop. Notice the layer panel. Artboards have a similar structure to groups: whatever you place on an artboard will form part of that group.
Figure B
Visually, artboards serve as individual canvases within a Photoshop document, which – for us – simplifies and speeds up the design process. [Click To Tweet This]

How we use artboards for email design

We use artboards for responsive email designs, or when we require a series of similar banners for a project. It makes visualising the mailers much easier and ensures consistency, especially when treatments are added to enhance visuals.

Fig C – Using artboards in Photoshop to create the desktop and mobile version of a mailer. Read our blog post, “How to swap images for responsive emails”, to see how we show a different image on mobile to desktop in our HTML email design.

Figure C

Fig D – Using artboards for a series

Figure D

How to create an artboard

  1. In Photoshop, select File > New
  2. Set your canvas size, select the “artboards” checkbox and
    click “create”

How to add more artboards to your current document

  1. Using the artboard tool and drawing a new artboard
    • In the tools panel, click and hold the move tool and select the artboard tool
    • Use this tool to draw a new artboard on your canvas – don’t worry about getting the exact size
    • Once your artboard is drawn, and still selected, you’ll notice the “Tool options bar” below the menu – you can set the width and height of your artboard here
  2. Using the artboard tool and plus icons
    • Select the move tool
    • Select an artboard
    • Click on one of the plus icons surrounding the artboard to add a new artboard

3. Duplicate an artboard

  • Right-click on any artboard in your layers panel and click “duplicate artboard”

Working with artboards

  1. How to set the background colour
    • Select your artboard by clicking on its name in the layers panel. Then, in the properties panel, select the colour you wish to use. If you don’t see the properties panel, you can simply go to “windows” and select “properties”
  2. Move elements between artboards
    • Drag the elements from one artboard to another on the canvas, or in the layers panel
  3. Move an artboard
    • Within your canvas, click on the artboard name and drag your artboard to a new position
  4. Resize an artboard
    • Using handles
      Click on the artboard you wish to resize. Once you’ve clicked on your artboard, you’ll notice the handles around the artboard display. Simply drag the corner handle inwards or outwards to resize your artboard
    • Using the tool options bar
      If you need a more exact size, select your artboard and use the toolbar to set the sizes

 

5. Rename your artboard

  • Double-click the artboard name in the layers panel and type a new name

Change a Photoshop canvas into an artboard

  1. In the tools panel, click and hold the move tool and select the artboard tool
  2. With the artboard tool selected, click and drag over your current canvas to convert it into an artboardWith the artboard tool selected, click and drag over your current canvas to convert it into an artboard
  3. Your new artboard will be listed in the layers panel 

Exporting artboards

  1. Go to the layers panel. Select the artboard(s) that you’d like to export. Right-click on your selection and choose “export as” from the context menu
  2. A preview dialogue will appear. Here you can set the export format and quality
  3. Click “export” (note that file names will inherit the artboard name assigned in Photoshop)

That’s it!

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

Recommended reading

Email newsletter template design

Maybe you’ve been tasked with producing your company’s email newsletter or maybe you’ve been doing newsletters for a while and want to compare notes. Either way, if you’d like to know how an email newsletter template is planned and designed then our latest article is for you!

How to create the perfect email newsletter template

How to use anchor links in emails

Have you ever wondered how to add anchor links into your email newsletter? Keep reading, we’ll tell you what they are, when to use and how to do it!

The Cantaloupe Story

Read about us and meet our team

Join our team. Work from anywhere

Help us make email marketing better

Helping marketing teams and agencies since 2006

Overview of email marketing. Learn more

Email templates

Tried and tested templates
PSD to HTML
Custom designs

Managed service

Data work
Production
Campaign Management

Automation

Automate marketing processes & tasks
Lead nurturing

Pin It on Pinterest

Share This