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.
These are all the banner we are going to design in this tutorial:
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.
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.
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.
In the Color Picker dialog box that pops up, select dark orange (#dcb43b) for the background color. Click OK.
Double click the shape and then activate Pattern Overlay. Reduce its Opacity to keep the effect subtle.
Add subtle Gradient Overlay, from white to black with low Opacity.
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.
Duplicate the rectangle shape we made earlier by Alt + dragging it and then place it on the opposite corner.
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.
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.
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.
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.
Activate Direct Selection Tool and then pull its right side up.
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.
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.
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.
Hit Ctrl + Alt + G to turn the image into a clipping mask. The image will goes into the layer underneath it.
Step 19: Adding Logo
Add logo into the design.
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.
Add text inside the button.
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.
Double click the shape layer to add layer style. Activate Stroke using the following settings.
Using The Line Tool, draw two black 1 px lines on lower part of the label.
Add inset effect into the lines by activating Drop Shadow with white color, Distance: 1 px, Angle: 90° and low Opacity.
Write the discount percentage inside the label.
Add depth into the text by applying Inner Shadow, Outer Glow, and Drop Shadow with following settings.
Add persentage symbol and off text with smaller font size.
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.
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.
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.
Click and drag to draw new artboard. No need to worry with its size.
In this artboard, we are going to design the second top performing ad sizes, 336 px × 280 px.
Make sure The Artboard Tool is still active. Input the desired artboard size in the Option Bar.
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.
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.
Step 37: Image
Duplicate image and its backgrounds from the previous artboard.
Modify each shape until we can divide the area into two section, left and right.
Just as in the previous artboard, convert the image into Clipping Mask (Ctrl + Alt + G).
Insert the label into the design. We can place it on the center of the banner.
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.
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.
You may be tempted to apply transformation (Ctrl + T). Well, actually that’s not a good idea.
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.
That’s it. We’ve just done with the second design.
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
Set its size to 728 px × 90 px from The Option Bar.
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.
Step 48: Duplicating Design Elements
As in the previous artboard, we need to duplicate design elements. Alt + drag background to the new artboard.
Repeat this step to the other design elements.
Do the same to the image. But, this time we will put the image in center of the banner.
Add discount label into the design.
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.
With so many artboards, it’s very crucial to name each artboard with informative information.
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.
In the destination folder, you will find each artboard as a separate PNG file.
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.
You can also split each artboard into different file. Click File > Export > Export to File.
This our final result. I hope you enjoy the design process and understand the benefit of using artboard for multiple layout..
That’s it for this tutorial! Hope you enjoy it and learnt a few techniques.