Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Organize and name the layers within the file.
Layer Organization:
3 Layers
- Guides
- 480
- 1200
Sub-headings for 480 and 1200
- Header
- Navigation
- Content
- Footer
Helpful Links
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
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 upYou need to sign up for Treehouse in order to set up Workspace
Sign up