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
We’ll create a new document, talk about breakpoints, and set up our template with multiple Artboards. Don’t forget to save!
Useful Sites
Human interface guidelines (HIG) are software development documents which offer application developers a set of recommendations. These can be helpful when determining sizes and setting up documents.
Article: Adobe Illustrator Shortcuts to Speed Up Your Workflow
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
Now we're going to begin the process
of designing a simple website.
0:00
We'll be designing our site for
both desktop and mobile devices.
0:05
So we'll have two art boards.
0:09
The art boards will act as a canvas for
building our designs.
0:11
Let's get started, and
create a new document.
0:16
So, file New or Command N.
0:19
You can always see the short cut keys
to the right of it, so file new.
0:23
The name of our document,
0:28
I'm not going to reinvent the wheel
[LAUGH] is going to be wire frame 01.
0:30
You can name it whatever you like.
0:34
For our profile because
we're doing web design,
0:37
the deliverable is going to be for web.
0:40
We can go ahead and
change the profile to web and
0:43
that's going to make sure that our color
mode is in RGB which is important.
0:46
Staying in YK would be for print,
to make sure you're in RGB mode.
0:51
Our art boards, we're going to
be creating two art boards, and
0:56
this to the right of it is how
those art boards are arranged.
1:00
So we have Grid by Row, Grid by Column,
Arrange by Row, Arrange by Column.
1:04
The spacing is the spacing between the
artboards and we can adjust this later.
1:11
I'm going to leave it as 20 pixels for
now.
1:17
For width our developer gave us sizes and
so that's the next thing is,
1:21
talk to your developer and figure out
what sizes you're gonna be designing at.
1:27
With responsive web design, the idea is
that you're not designing a fixed site for
1:33
every single device but you're
designing at sizes that are general.
1:39
That most people will be able to
see the content of the web site.
1:45
That's the most important thing, and
that your layout is going to adjust
1:50
accordingly so that the content
is always going to be at the top,
1:54
and the most important things
need to be seen will be seen.
1:58
Our client asked us to create a mock
up for a desktop and mobile platform.
2:01
So for the mobile one it
will be 480 by 1400 hundred
2:07
and obviously when you're looking at
a browser most of the time on your
2:13
phone,you can't adjust the width but
you do scroll down.
2:18
And so what happens is we have a fixed,
Width, but vertically, we can scroll.
2:22
So now that we have 480,
1,400, I'm going to hit OK.
2:28
All right.
2:31
Just change my screen mode by hitting F.
2:34
That looks nicer.
2:37
So you'll notice that we have two
art boards that are the same size.
2:38
One is going to be our mobile version,
which is 480 by 1400, and
2:42
they're both that size right now.
2:47
And then our other one is
going to be 1200 by 1400.
2:49
So I am going to click
on art board number two.
2:55
Go to my artboard tool here and
click on it.
2:59
And you can see that it's highlighted.
3:03
There are two ways I can change
the size of the [INAUDIBLE].
3:04
I can double click on the artboard
tool itself and change the width and
3:10
the height here, or because I have the art
3:15
board tool selected in our control panel,
we now have those options.
3:19
So if I go up here on the right hand side,
I'm going to change it here and
3:24
just show you something different,
then I hit tab and
3:28
1400 is correct, so
I'm going to click off.
3:33
Okay, and you'll see what happened is,
now my art boards are overlapped.
3:38
So what I can do is hit my art board
tool again, and just move it over.
3:44
So I'm just gonna, I'm moving my
arrow keys, and moving it back over.
3:49
I can also click, and hold and
drag this way, but I wanted it to line up.
3:56
And you can see I sort
of undid what I did.
4:02
So undo is Command + Z.
4:05
That's a very, very important one.
4:09
[LAUGH] Edit undo, so when you're working
and something goes wrong, not a big deal.
4:12
Command Z.
4:18
[LAUGH] And then you're back in business.
4:18
So, this is exactly what
we want right here, and
4:22
I just did something unconsciously,
but this is, you need to know.
4:27
So if you want to pan around
your art board, hit spacebar.
4:29
You can also touch this tool,
but spacebar works, and
4:33
that will allow us to You know
move around, look around things.
4:38
If you want to zoom out and
in this is your zoom tool.
4:42
If you hold down option and
click that's going to take you back out.
4:46
Got our space bar again, our hand tool,
drive that back to the center.
4:50
Now if it's off center.
4:57
And you want to center your art
board you can do command zero,
4:59
which is really handy too.
5:04
I'm gonna zoom out a little bit.
5:06
Okay I was gonna say one other thing
that's so helpful about Illustrator
5:09
is the fact that you can have two
art boards within one document.
5:14
And we could have more than two,
we could have multiple, tons of them.
5:19
And that's a really wonderful thing while
you're working and back and forth and
5:23
doing iterations to be able to see all the
versions you're doing at the same time.
5:28
Now last, but definitely not least,
remember to save.
5:33
So file Save, or command S, and
we're gonna be saving this as
5:38
Wireframe_01, hit save.
5:43
I already have another one, so
I'm gonna replace mine, and hit ok.
5:48
Remember to save, and save often,
always, always do that.
5:55
Alright, see you in the next video.
6:01
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