Using The New Artboard Feature in Photoshop CC to Design Multiple Size Web Banners

This tutorial is written exclusively for PSD Vault by Mohammad Jeprie.

Perhaps only a few of us who knew all the new feature in a software. We often rely on techniques that has been proven to be useful based on our years of experiences. Now, I’d like to introduce you to Photoshop’s artboard which can helps you design multiple layout faster and more effective. In this tutorial, we will show you how to design multiple size web banner in one file using artboard feature.

Preview

These are all the banner we are going to design in this tutorial:

multiple-web-banner-size-artboard-73

PSD File Download

You can download the PSD File for this tutorial via the VIP Members Area for only $6.95/Month (or less)! You will not only get this PSD File, but also 200+ other PSD Files + Extra Goodies + Exclusive Photoshop tutorials there. Signup now and get exclusive :) Find out more about the VIP Members Areas

Step 1: Preparation

For the banner sizes, we are going to refer to AdSense guide. There are five popular ad sizes available.

multiple-web-banner-size-artboard-01

Step 2: New File

For our first design, we are going to use banner size: 300 px × 600 px. Make new file (Ctrl + N) and then enter 300 px and 600 px for its Width and Height size.

multiple-web-banner-size-artboard-02

multiple-web-banner-size-artboard-03

Step 3

We are going to add background to the canvas. Click the black and white circle icon on bottom of the Layers Panel and then select Solid Color.

multiple-web-banner-size-artboard-04

Step 4

In the Color Picker dialog box that pops up, select dark orange (#dcb43b) for the background color. Click OK.

multiple-web-banner-size-artboard-05

Step 5

Double click the shape and then activate Pattern Overlay. Reduce its Opacity to keep the effect subtle.

multiple-web-banner-size-artboard-06

multiple-web-banner-size-artboard-08

Step 7

Add subtle Gradient Overlay, from white to black with low Opacity.

multiple-web-banner-size-artboard-09

multiple-web-banner-size-artboard-10

Step 8

To help us placing the elements accurately, we need guides. Here’s one way to create it easily. Draw a rectangle shape and place it on the corner. In this case, the rectangular size is 24 px × 24 px.

multiple-web-banner-size-artboard-11

multiple-web-banner-size-artboard-12

Step 9

Duplicate the rectangle shape we made earlier by Alt + dragging it and then place it on the opposite corner.

multiple-web-banner-size-artboard-13

Step 10: Adding Guides

Make sure both shapes on the corners are selected and then click View > New Guides From Shape. Automatically, Photoshop will make new vertical dan horizontal guide based on the bounding box of the selected shapes.

multiple-web-banner-size-artboard-14

Step 11

You will not need the shapes. So, you can just delete them. As you can see, this is a practical way to create new guides. Much more accurate than dragging from the ruler(Ctrl + R) to the canvas.

multiple-web-banner-size-artboard-15

Step 12: Banner Title

Let’s start with adding banner title. Write BIG SALE on top part of the banner. Make it horizontally centered. Here, we use free google font Exo Bold.

multiple-web-banner-size-artboard-16

Step 13: Placing image

To increase the visibility of this banner, we will add an image to draw the viewer’s attention. Let start by drawing its base first. Make a new rectangle shape. For its color, we use blue.

multiple-web-banner-size-artboard-17

Step 14

Activate Direct Selection Tool and then pull its right side up.

multiple-web-banner-size-artboard-18

Step 15

Duplicate the shape by dragging its layer onto the New Layer icon. Double click its layer thumbnail and then change its color to red. Using Direct Selection Tool modify its point until it overlaps the previous shape.

multiple-web-banner-size-artboard-19

Step 16

Let’s add another shape and modify its points. This time we can use any color, it doesn’t matter since we are going to use it as Clipping Mask for the image.

multiple-web-banner-size-artboard-20

Step 17

Drag an image that is suitable with the theme of your banner. Since this is for a store, we are going to use this stock image from shutterstock.

multiple-web-banner-size-artboard-21

Step 18

Hit Ctrl + Alt + G to turn the image into a clipping mask. The image will goes into the layer underneath it.

multiple-web-banner-size-artboard-22

Step 19: Adding Logo

Add logo into the design.

multiple-web-banner-size-artboard-23

Step 20: Button

We are going to add button into the design. Actually, this is not going to be a real button because the whole banner is clickable. But, we want to give comfort to the viewer by showing them something to click.

Activate Rounded Rectangle Tool and then click and drag to draw a rounded rectangle shape.

multiple-web-banner-size-artboard-24

Step 21

Add text inside the button.

multiple-web-banner-size-artboard-25

Step 22: Adding Discount Label

Activate The Polygon Tool and then click once on the canvas. A dialog box will appear and ask for the shape’s properties. Set its size to 97 px × 83 px with 6 sides. Set its color to blue.

multiple-web-banner-size-artboard-26

Step 23

Double click the shape layer to add layer style. Activate Stroke using the following settings.

multiple-web-banner-size-artboard-27

multiple-web-banner-size-artboard-28

Step 24

Using The Line Tool, draw two black 1 px lines on lower part of the label.

multiple-web-banner-size-artboard-29

Step 25

Add inset effect into the lines by activating Drop Shadow with white color, Distance: 1 px, Angle: 90° and low Opacity.

multiple-web-banner-size-artboard-30

Step 26

Write the discount percentage inside the label.

multiple-web-banner-size-artboard-31

Step 27

Add depth into the text by applying Inner Shadow, Outer Glow, and Drop Shadow with following settings.

multiple-web-banner-size-artboard-32

multiple-web-banner-size-artboard-33

multiple-web-banner-size-artboard-34

Step 28

Add persentage symbol and off text with smaller font size.

multiple-web-banner-size-artboard-35

Step 29

Throughout entire design, we are going to use exact same label for consistency. It’s better to save the label as Smart Object for easier management. Put all the layers used for the label inside a group layer and then right click it and select Convert to Smart Object.

multiple-web-banner-size-artboard-36

Step 30

We are done with the design. Before moving on to the next layout, make sure you organize all the layers for easier management. Put each layer in appropriate group layer and logical order. This will help us working faster and effective in the next layout.

multiple-web-banner-size-artboard-37

Step 31: New Layout

For the next layout, we can add another canvas in the same file. Photoshop calls it Artboard. Activate The Artboard Tool. It is placed in one slot with The Move Tool.

multiple-web-banner-size-artboard-38

Step 32

Click and drag to draw new artboard. No need to worry with its size.

multiple-web-banner-size-artboard-39

Step 33

In this artboard, we are going to design the second top performing ad sizes, 336 px × 280 px.

multiple-web-banner-size-artboard-40

Step 34

Make sure The Artboard Tool is still active. Input the desired artboard size in the Option Bar.

multiple-web-banner-size-artboard-41

Step 35

With multiple artboard, you have multiple canvas. Each artboard has its own layer group. In both artboard, we use same bakground. So, Alt + drag background layer from the first artboard to the next new one to duplicate it.

multiple-web-banner-size-artboard-42

multiple-web-banner-size-artboard-43

Step 36: Title

Duplicate title from the first artboard. For smaller canvas, we want to use smaller font size. Place the title text on top left corner with left alignment.

multiple-web-banner-size-artboard-44

multiple-web-banner-size-artboard-45

Step 37: Image

Duplicate image and its backgrounds from the previous artboard.

multiple-web-banner-size-artboard-46

Step 38

Modify each shape until we can divide the area into two section, left and right.

multiple-web-banner-size-artboard-47

multiple-web-banner-size-artboard-48

Step 39

Just as in the previous artboard, convert the image into Clipping Mask (Ctrl + Alt + G).

multiple-web-banner-size-artboard-49

Step 40

Insert the label into the design. We can place it on the center of the banner.

multiple-web-banner-size-artboard-50

Step 41: Adding Logo

Next, place the logo. Make the logo smaller, proportional with the banner size. Hit Ctrl + T to perform transformation. Drag the corner while holding shift key to maintain its proportion.

multiple-web-banner-size-artboard-51

Step 42: Adding Button

Duplicate button from the previous artboard. This is definitely too big for our current banner. We need to make it smaller.

multiple-web-banner-size-artboard-52

Step 43

You may be tempted to apply transformation (Ctrl + T). Well, actually that’s not a good idea.

multiple-web-banner-size-artboard-53

Better solution is by modifying its vector point. Select its points using Direct Selection Tool and then move their position until we have it smaller.

multiple-web-banner-size-artboard-54

Step 44

That’s it. We’ve just done with the second design.

multiple-web-banner-size-artboard-55

Step 45: Third Artboard

I hope you already get the idea. For each design, we will add another artboard and use same design elements with a bit of tweaking.

Now draw another artboard by dragging with Artboard Tool

multiple-web-banner-size-artboard-56

Step 46

Set its size to 728 px × 90 px from The Option Bar.

multiple-web-banner-size-artboard-57

Step 47: Renaming Artboard

From The Layers Panel, change artboard name by double clicking on its group layer icon. This will help us to identify the design and also when importing the final result.

multiple-web-banner-size-artboard-58

Step 48: Duplicating Design Elements

As in the previous artboard, we need to duplicate design elements. Alt + drag background to the new artboard.

multiple-web-banner-size-artboard-59

multiple-web-banner-size-artboard-60

Step 49

Repeat this step to the other design elements.

multiple-web-banner-size-artboard-61

Step 50

Do the same to the image. But, this time we will put the image in center of the banner.

multiple-web-banner-size-artboard-62

multiple-web-banner-size-artboard-63

Step 51

Add discount label into the design.

multiple-web-banner-size-artboard-65

Step 52: Another Artboard

I believe you have understood the work flow. For each banner, draw a new artboard. Use same design elements with a bit of tweaking to keep consistent design. Here’s what we have.

multiple-web-banner-size-artboard-66

Step 53

With so many artboards, it’s very crucial to name each artboard with informative information.

multiple-web-banner-size-artboard-67

Step 54: Exporting Artboard

Click File > Export > Quick Export to PNG to export every artboard into individual PNG files. PNG file type is currently offering the best quality for web. It supports wide range of colors and transparency too. A dialog box will open and ask you to choose the destination folder.

multiple-web-banner-size-artboard-68

Step 55

In the destination folder, you will find each artboard as a separate PNG file.

multiple-web-banner-size-artboard-69

Step 56

In certain case, you may want to export each artboard into specific format file. Click File > Export > Export As. You can choose between JPG, PNG, GIF, or SVG.

multiple-web-banner-size-artboard-70

multiple-web-banner-size-artboard-71

Step 57

You can also split each artboard into different file. Click File > Export > Export to File.

multiple-web-banner-size-artboard-72

Final Result

This our final result. I hope you enjoy the design process and understand the benefit of using artboard for multiple layout..

multiple-web-banner-size-artboard-73

That’s it for this tutorial! Hope you enjoy it and learnt a few techniques.

Tags:

  • My name is James and I have been using Photoshop since version 5.0 (long time ago!). PSD Vault is my spare time hobby and I write majority of the Photoshop tutorials and articles here. I hope you enjoy my blog, and feel free to leave a comment or contact me if you have any questions.

  • Show Comments

  • In web design, it is essential to make good banners. This makes it much easier.

  • Emilie フランス人剣道家ママ

    Hi !
    Very interesting thank you. But with “export”, we can’t optimize the GIF no? in order to make the banners lighter for ex.
    Is there a way to do it before exporting ? I’m pretty new on the CC version, and i’ve to switch from fireworks to CC now, to create our ADV banners at work.
    I can create slices for each artboard, and then save for web/optimize, but if there is another way… i’d be very interested !

    Many thanks!

  • this is a very necessary process to make awesome banner. thank you o much for this best idea