Naming and Organizing Layers5:36 with Ashley Burke
Organize and name the layers within the file.
Sub-headings for 480 and 1200
Lastly, before we're finished, we need to organize our layers. 0:00 This is really important for us later if we're coming back opening the file, and 0:05 also if we are sharing the file with other people, that there's not any guess work. 0:10 They know exactly where things are located if they need to go in and 0:14 change something quickly. 0:18 It's much easier. 0:19 I always recommend naming and organizing as much as possible. 0:21 So let's take the time to do that. 0:26 We're going to have two layers. 0:28 One is gonna be our 480 artboard and the other will be our 1200 desktop artboard. 0:31 With the selection tool marquee over. 0:38 Our mobile artboard. 0:42 And then you go to Edit > Cut or Cmd+X. 0:43 Going to create a new layer in our Layers panel. 0:52 Right to the left of this trashcan. 0:55 Click on that. 0:57 It costs 480. 0:59 So that's the width of our artboard. 1:00 Select that layer by clicking this circle. 1:03 And then we're going to Edit > Paste in Place, or Shift + Cmd + V. 1:05 Great. 1:14 We'll do the same thing for this side. 1:17 So I marquee over. 1:22 Cmd+X. 1:23 Rename this 1200. 1:26 Make sure it's selected, and then I want to paste in place. 1:27 Shift+Cmd+V. 1:32 Or edit > Paste in lace. 1:35 And now what I wanna do is create sub headings. 1:39 So we'll have header, nav, our content, and our footer for each one. 1:43 And this will help later when we're creating the page mockup to 1:50 really just know right where to go. 1:54 So we're gonna do a lot more of the same kinds of things. 1:57 So Cmd+X, to cut. 2:00 And we know we'll have one, two, three, four, four categories. 2:04 We could go ahead and 2:11 name these header nav 2:15 content and footer. 2:20 So, this is our header in our clipboard. 2:27 And I wanna Edit > Paste in Place again. 2:30 So Edit > Paste in Place. 2:33 There. 2:36 For nav, Cmd + X, to cut. 2:37 And then in the nav, I'm going to paste in place, 2:42 cut, select my content layer. 2:49 Paste in place. 2:54 Marquee over the footer. 2:57 Cut. 2:59 Select the footer and then paste in place again. 3:00 Now I want to drag all of these. 3:06 My head, nav, content, and footer, into this 480. 3:08 So I'm going to click and hold. 3:12 Which, by the way, I held down Shift. 3:15 And then click and drag into 480. 3:16 Great, so now it's all in there. 3:22 We're going to do the same thing for this side. 3:25 So one more time, one, two, three, four. 3:31 Header. 3:36 Nav. 3:41 Content. 3:47 There we go. 3:52 And Footer. 3:55 Let's do it backwards for fun. 4:01 So, I'm gonna marquee over this. 4:03 Select it. 4:07 Paste in place. 4:09 I'm gonna select all of this because this is all of our content, 4:10 and paste that in place. 4:13 Our logo and our header, excluding our nav. 4:19 Gonna cut that, and place that in place. 4:22 There we go. And 4:28 you'll notice that our header is on top of our nav at this point. 4:30 And we can drag that under. 4:36 We don't have anything there yet, but I I wanna put out in front, so 4:39 I'm gonna hide this for a second. 4:42 Go ahead and just grab that nav layer, cut it And 4:44 paste it in my nav layer, turn my header back on. 4:50 Let's select this. 4:56 So we'll select Nav, Header, Content, Footer, and drag into 1200, desktop. 4:59 And there we go. 5:07 I will do the same thing for the desktop versions, so 5:08 the files will be organized and ready for designing the mockup later. 5:10 Now that the wire frame is completed, you can show this wire frame to a client, 5:15 developer, or your boss, to explain how users will interact with the site. 5:19 Next, or once the client approves it, we will begin bringing life into the wire 5:25 frame by adding colors, making more design decisions, and creating a new logo. 5:30
You need to sign up for Treehouse in order to download course files.Sign up