One of Photoshop CC 2015 new feature is more or less the same with Illustrator artboard, allowing us to create multiple pages within one document. But Photoshop’s artboard is more flexible because we can freely change the arboard size and position.
Now we can be more productive, because we are able to create multiple design pages inside a single document. For example, we can use it for designing multiple layout for a responsive website, or multiple pages of an app interface, or somehing that is more simple like designing a banner ads.
What you’ll be creating
This time we will design banner ads about promotional discount from a fake restaurant. As you can see, the same design will be adapted in various banner size, this is where the artboard feature become useful.
Within Photoshop CC 2015, press CTRL+N to create a new document. Select Document Type: Artboard. Below it, you can choose any default artboard size or set it manually from the width and height input box.
For this tutorial, I set the width to 728 px and height 90 px. Click OK.
An artboard is now created with spesific width and height as we set in the previous step. To select the arboard, click on its name.
To change artboard name, double click on its name from the layers panel.
Draw a rectangle shape, set the fill to green (#197b30) and stroke to none. Draw a long rectangle shape, see image below as your reference.
When you’re done creating rectangle, the Properties panel is shown automatically. This was also a new feature in Photoshop CC 2015.
We can adjust corner radius value to make a rounded rectangle. In this example, fill the corner radius value that was located in the bottom-right corner to 80 px.
Press CTRL+J to duplicate rectangle layer. Change the fill color to bright green (#8dc63f) then use Move tool to nudge it to the left. See image below as your reference.
Press CTRL+O, then select and open food bowl image. I use Pen tool to select this food bowl. If you have another selection tricks, just do what works best with you. Done selecting, press CTRL+C to copy selected area.
Go back to our artboard document, press CTRL+V to paste selected food bowl image. Before downscaling the food bowl, convert it into a Smart Object first.
Add Drop Shadow layer style for food bowl layer. Set the Opacity: 9%, Angle: 90, Distance: 7 and Size: 0.
Click OK to apply drop shadow layer style. Below, you can see the result.
We’re going to make a vector sunburst effect. For your convenience, let’s do this on a new document. Create another document, set the width and height to 800 pixels each. Click OK.
Use the Polygon tool to create a black triangle shape with no stroke.
Press CTRL+T to transform triangle shape, make it taller. See image below as your reference. Don’t hit ENTER yet.
From option bar, change the reference point to center-bottom. Tilt the triangle clockwise around 15 degree. Hit ENTER to apply transformation.
We can repeat transformation and also copy the shape at the same time by pressing ALT+SHIFT+CTRL+T. Do this once to see how it works.
Repeat copying and transforming triangle shape until you got a full-round circle.
In order to make the background transparent, remove the background layer. Save this document into .psd file with appropriate name like ‘sunburst’ or something like that.
Go back to our artboard document. Insert the sunburst.psd file using the File> Place Embedded menu.
Upscale sunburst image until it large enough to cover the artboard length. Don’t forget to drag sunburst layer inside artboard group, place it between rectangle copy and food bowl layer.
Change sunburst layer into a clipping mask by pressing ALT+CTRL+G. Change sunburst layer blend mode to Soft Light and lower the Opacity to 10%.
Draw a circle shape using Ellipse tool. Set the fill color to bright green (#92c946) and set the Stroke to 1 pt solid white.
Grab the Polygon tool, select Combine shape button from the option bar (this way, new polygon shape will created within the same layer as ellipse shape).
Draw a small triangle with the Polygon tool. See image below for your reference.
Change the stroke type to dashed lines from the option bar.
Add white colored title text “DAILY DEALS” using Type tool. Select appropriate font that match with the food theme, in this example i use “DK Lemon Yellow”. Feel free to experiment with your own font collection.
Add subtle Drop Shadow layer style for the title text. Set Drop Shadow Opacity around 10%, Angle: 90, Distance: 2 px and Size: 0 px.
Add promotional texts “Save up to 30% OFF” in three separate text layers. Play around with text size and position to get a nice composition.
Add Drop Shadow layer style for each text layers.
Draw a yellow rectangle shape, next to promotional texts. We will make a nice call-to-action button with this rectangle.
In Photoshop CC 2015, we can easily convert a regular rectangle into rounded rectangle. Go to View> Properties menu. Within the Properties panel, click the chain button then set corner value to 10 px. This way we can easily change corner radius value anytime in the future, without having to redraw the rectangle.
Once you’ve done appying rounded corner effect, add subtle Gradient Overlay and Drop Shadow layer style for the rectangle. You can see the settings I used in the image below.
Use Type tool to add “SEE DEALS” text. Set the color to orange.
Add Inner Shadow and Drop Shadow layer style for this text layer. You can see the settings I used in the image below.
Next, we need to create the restaurant logo from scratch. Create a new document, set the size to 400 x 300 pixels wide.
Using Pen tool, draw basic “meat” shape. Set the fill color to red, and stroke to none.
Draw smaller “meat” shape inside the previous one. Set the fill color to white.
Draw the third “meat” shape, set the fill color back to red.
Still using Pen tool, draw the last “meat”. See image below for your reference.
Select background layer then press DEL to remove it, now the background is transparent. Save this illustration as .psd file. Name it “steak logo” or something like that.
Go back to our artboard document. Insert steak logo.psd file from the File> Place Embedded menu. Downscale the steak logo to fit the artboard height. Don’t forget to drag steak logo layer inside our artboard group.
Add logo text below steak logo.
From the layers panel, we can close or open the artboard group. We can also easily to duplicate the artboard by pressing CTRL+J.
Use Move tool to drag artboard copy below the original one.
This way, we can conveniently make design change without having to create new document. Each artboard is completely grouped separately. As you can see below, I can get two different design in one document.
It doesn’t stop there. Photoshop allow us to change the artboard size easily, by dragging the control point or change Width and Height value from the Properties panel.
Have a notice, if you change the artboard size smaller, some layers will left outside the box. In this example, I change the artboard copy width to 336 px and height to 280 px.
Make some composition adjustment for the green background and food bowl image. See image below as your reference. Next, manually insert those layers that left outside into artboard box using the Move tool. Start with the “Save up to 30% OFF” text layers.
Upscale the discount texts, then insert the call-to-action button inside the artboard.
Don’t forget to insert back the steak logo and text into the artboard.
Change artboard name to “large rectangle (336×280)”. Double click artboard name to do this step.
Now we need to create new artboard. Grab the Artboard tool. Click the New artboard button, then set the width and Height for new artboard. In this example, set the Width to 120 px and Height to 600 px.
Still using Artboard Tool, click once in the blank area to create new artboard. Rename the artboard to “Skycrapper (120×600)”.
In this new artboard we will reuse the same element from previous artboard. So, get back to previous artboard and select both green rectangles within layers panel.
Grab the Move tool, then hold ALT while dragging the rectangles from “large rectangle” artboard to “skycrapper” artboard. This will copy both rectangles into skycrapper artboard.
Press CTRL+T to resize the rectangle so it fits with the artboard width. Press ENTER to confirm transformation.
Another way to copy elements from another artboard is dragging it from the layers panel. First, duplicate the layer (in this example, duplicate the sunburst layer).
Drag the sunburst copy layer from large rectangle group across to skycrapper group.
Repeat Step 50 or Step 52 until all layers is copied into skycrapper artboard. Make some adjustment with the image and text. See image below for composition layout reference.
Once everything is set and done, we can export the artboard. Do this by going to File> Export> Export As. Inside Export As window, we can select the file format for each artboard.
Photoshop CC 2015 allow us to to save each artboard with different file format and quality. So in this example, I choose .jpg for skycrapper artboard, .gif for leaderboard artboard and .png for large rectangle artboard.