Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.
Document Settings and Artboards6:03 with Ashley Burke
We’ll create a new document, talk about breakpoints, and set up our template with multiple Artboards. Don’t forget to save!
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.
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 up