Laying the Foundation: Artboards3:02 with Shon Dempsey
Now that our photo is ready, we’ll set up our artboards to accommodate our deliverables prior to layout.
- Aspect Ratio - the relationship between the width and height expressed as a ratio, such as 16:9.
We've been provided all our assets, we've made color corrections to the image, and 0:00 now we just need to create our ad layouts. 0:04 Let's start with a new document, selecting File and New. 0:06 We're going to lay out three different banner ad sizes, one for the web, 0:09 one for mobile devices, and the last one for use in a Twitter post. 0:15 And let's start with the web banner. 0:20 Choose the Web tab in the preset menu up top and select Web most common. 0:22 This is a good middle ground for large sites but 0:27 still allows the image file size to be small enough for mobile browsing. 0:29 1366 pixels wide is also a good middle of the road width. 0:33 However, our banner doesn't need to be the entire height of the site, so 0:38 let's adjust this to 350 pixels, And click Create. 0:43 Next, let's add another artboard for our mobile device ad. 0:49 Select the artboard tool, and 0:54 depending on your panel layout, it maybe hidden behind the move tool like mine. 0:56 So I'm gonna click and hold to select it. 1:01 Or, press V then Shift+V. 1:05 Notice how our top toolbar has changed to show us our artboard settings. 1:07 Select the Artboard from the Layers panel, and 1:13 then click on the + icon to the right of the artboard. 1:16 Now, let's choose the preset for the iPhone 6 Plus. 1:21 Again, we'll want to adjust the height to maintain nearly the same aspect ratio as 1:28 our web banner, or the relationship to the width to the height. 1:33 We're gonna set the height to 500 pixels. 1:37 In a bit more practical setting, you'd wanna gather the exact dimensions you'll 1:42 need to use from the advertising platform that your client is gonna be using for 1:46 their mobile ad. 1:50 Finally, the Twitter post artboard. 1:51 Let's go ahead and add our new artboard. 1:54 Again, we may need to click on the artboard from the layers tab 1:57 if you're not seeing the plus buttons. 2:01 And go ahead and add a new artboard. 2:03 This time, we're gonna use custom size of 1024x512, so we'll just type it in. 2:06 This is large enough that it can be expanded when clicked from 2:17 the Twitter stream. 2:19 Now that we have all of our artboards, let's double click each name and 2:21 replace artboard with something a little bit more descriptive. 2:25 I'm gonna keep mine simple. 2:29 And rename them Web, iPhone. 2:38 I like to be on brand here, so lowercase i, iPhone, and finally, Twitter. 2:45 In the next video, we'll combine our image, logo and text, and lay them out for 2:56 our final product. 3:00
You need to sign up for Treehouse in order to download course files.Sign up