Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Adobe Illustrator for Web Design!
You have completed Adobe Illustrator for Web Design!
Preview
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