Layout8:47 with Shon Dempsey
Our artboards are ready. Now we will add in the elements and lay them out to fit each artboard.
- Hand Tool - allows us to navigate within a document, helpful for multiple artboards or while zoomed in.
- Embed - Embedded files keep associated graphics within the photoshop document, as opposed to creating a link or reference to that file, keeping the document contained while also increasing file size.
- Eyedropper Tool - samples color for use as foreground, background and text color.
Let's now bring in our image. 0:00 There are many ways to do this, but since we already have the image open 0:02 in another Photoshop tab, we'll use the marquee tool. 0:05 Select the marquee tool and press Cmd+ A, then press Cmd+C to copy it. 0:10 We'll navigate to our new document and then paste into the largest artboard. 0:17 Remember, because we're using our Raster Image, 0:22 we can reduce the image size to accommodate smaller artboards. 0:25 We're not able to enlarge it without losing fidelity. 0:29 Let's paste it into our widest artboard first, the iPhone artboard. 0:33 Select it from the Layers panel and press Cmd+ V. 0:37 To ensure I've got the proper width, I'll open the Properties panel and 0:42 type in the exact width of the iPhone artboard, 0:48 which is 2,208 pixels and press Return. 0:52 And we can now move this image within the artboard to best position it, 0:55 using the move tool. 0:59 I'll go ahead and close this Properties panel. 1:04 When moving the layer, we can hold down the Shift key while using the arrows 1:08 to nudge the layer more than just simply pressing the arrow key. 1:12 Remember, it's okay to have content outside the artboard. 1:16 It won't end up in our final image, that looks good. 1:19 Well, let's name the layer real quick from within the Layers panel. 1:22 I'm gonna name it background image. 1:27 Now here's where artboards shine. 1:31 We can simply duplicate this layer and 1:33 move the image to each artboard, adjust the size to fit. 1:35 And position appropriately, while being able to see 1:40 all three versions next to each other to help maintain consistency. 1:43 To duplicate the layer, we'll head to the Layers panel, and 1:48 click and drag the layer on top of the new layer button twice. 1:51 Since we're going to be working between layers, 1:55 I'm gonna rearrange my panels just a bit to make sure we have plenty of room. 1:58 I'll collapse this column and expand this one. 2:06 Click and drag twice. 2:20 Now we're able to move each image layer into its respective artboard 2:25 by clicking and dragging the layer in the Layers panel. 2:29 We'll then resize each of these images appropriately for each artboard. 2:34 I use the hand tool to move between artboards by pressing the space bar 2:40 while I click and drag. 2:43 Using the move tool, we can resize this image by clicking and 2:46 dragging on any of the handles. 2:50 And again, I'm going to hold down the Shift button actually while I resize. 2:53 Again, I can use the arrow keys to move the image up in the layer. 2:58 We can be precise by using the Properties panel. 3:03 Or we can use the move tool, clicking and dragging the handles. 3:06 Occasionally, when you move between artboards, 3:17 you may be asked to commit to your changes. 3:20 That's pretty common. 3:22 Go ahead and click Apply. 3:23 Finally, let's head to our Twitter artboard and resize this one as well. 3:26 I'm gonna use the arrow keys to move it down just a bit and press Enter to commit. 3:41 We now need to add the logo to our artboards. 3:47 Since we don't have this file open, we'll use the file in place embedded. 3:50 The embedded option will keep the logo file in the Photoshop document. 3:59 So just in case we share the file, we won't need to include the original 4:03 logo files separately from the Photoshop document. 4:07 And selecting the page is fine, and press OK. 4:13 Let's go ahead and place this logo about in the spot where we may want it. 4:17 Press Enter, let's go ahead and duplicate the logo for each artboard, 4:23 using the same technique used for the image layer. 4:27 Now we'll want to resize the logo. 4:41 Since the logo is in Adobe Illustrator format, it's a vector graphic. 4:44 Meaning we can resize the graphic in any way and it won't lose fidelity. 4:48 Let's resize it to fit just about half the height of the image, 4:53 while leaving some breathing room on each side. 4:57 Again, I'll use the hand tool to navigate between artboards. 5:08 Sometimes, selecting the layer while you have the move tool active will bring up 5:16 the bounding boxes, making it a little bit easier to click and drag those handles. 5:20 Again, use the Shift key as you're resizing your image 5:24 to maintain the aspect ratio and not distort the dimensions. 5:28 Press Enter to commit the changes, and let's move on to our last artboard. 5:34 Actually gonna adjust this one here, move it up slightly. 5:51 And this one as well on our Twitter. 6:00 Of course we can be as exact or as precise as we want to be. 6:07 But in this case, we're just gonna eyeball it just a bit. 6:11 Okay, we've got all three variations laid out now. 6:16 Finally, let's add the tagline the client provided. 6:20 Nature Sells. 6:22 Let Us Capture It. 6:23 Using the text tool, we'll use the Georgia font and 6:25 align that text to the N in the Naturelight logo. 6:30 We'll increase the font size just a bit. 6:46 Next, let's change the font color to match the red paint on the shed. 6:55 With the text tool selected, let's go ahead and 7:00 click on the color within the top toolbar. 7:02 Now if we move our cursor outside of our color dialog, 7:05 we can use the eye dropper tool to sample the red paint. 7:09 This will help tie our image to the text. 7:13 Let's duplicate our text for each artboard and place appropriately, and resize. 7:19 And instead of using the move tool for our text, however, we'll go ahead and 7:25 adjust the font size individually. 7:28 Placement of the text is up to you. 7:48 I would just make sure that there is enough space so 7:51 it doesn't impede on our logo. 7:55 And looks pretty close to how our iPhone version looks. 7:58 Again, use the arrow keys to modify the size. 8:24 All right, let's zoom out and take a look. 8:28 Now we've got all three variations laid out for each specification, and 8:33 they match even though the aspect ratios are slightly different. 8:37 In the next video, we'll prepare and 8:41 export these images to deliver to our client. 8:44
You need to sign up for Treehouse in order to download course files.Sign up