Hey there, in this tutorial we're going to make these Artboards in Illustrator. This is going to be our desktop size, this is going to be our tablet size, and this is going to be our mobile size. So let's work out what sizes we need to make these first, and then we'll go and build them in Illustrator. 

We need to work out what sizes to use, and that can be a little bit tough because that changes over time, there's so many device sizes, but I've got some basics for you to use, that's what most people use, and if you want to be more informed about what's coming out, what devices are there, there's a really cool site called mydevice.io/devices, so go do that whole url there in one go. It just gives you interesting stuff about what sizes-- now, ignore these physical heights and widths, use these CSS widths. This is what we use as designers, this is pixels wide, and we can see that the new iPhone 7 is 375 pixels wide, so that gives you a good gauge of, "Okay, maybe my mobile needs to be about that, or at least include it because it's one of the more popular phones." You can see, the 6 Plus, the big giant phone is even bigger, and I kind of ignore that one, I let him deal with the tablet size, because it's such a big phone, it's that big phablet thing. It covers iPhone 6, and you can see, all the earlier ones as well, don't get above 375. 

I often just pick my mobile size to be 400 to include all of those but you will be excluding a couple, the big giant phablet one; I think there's some ones down here, Nexus 6, it's slightly bigger, it's a big phone. It covers most of them. Blackberry Passports are massive. So that's for mobile, you can see down here, for tablet's, just underneath. You can start looking at these ones, I kind of ignore the iPad Pro because it's as big as a desktop. If you've ever gone into an Apple store and seen the iPad Pro, they're massive, so we don't design for those for tablets, I leave those to use the desktop size, but I do cover this one, that's the size I use for tablet, 768. Now there's no reason why you can't specifically pick other sizes. 

If you're working with a developer or a web designer after this project, ask them. Say, "Hey, I'm designing this site, what sizes do you need?" And they might give you ones that are different from the ones I'm giving you here, but these would be really typical, so 400 for the mobile, 768 for the tablet, and then you get on to desktop. Desktop's a bit of a different one. It's about what you want to design for, and I'll give you what I do, so let's go and do 'File', 'New', and we'll start with the desktop as our first design.

You can see, if we go to 'Web', we've got a lot of different sizes here, there's 'Web', 'Minimum', 'Large', 'Common'. You can pick any of these, it doesn't really matter. What I like to start with is '1200' wide, mainly because it's divisible by our grids that we're going to learn about a little bit later on. It's still a common size. The height is going to change a lot when we're working, so we're going to leave it at whatever height it defaults to, and we're going to change it afterwards because it depends on the content. 

Orientation's going to be 'Landscape'. We're not going to add any 'Bleed' or anything. We're going to make sure it's 'RGB'. Let's click 'Create'. So this is page 1, I'm going to zoom out a little bit, holding 'Command -', zooms out. Now I'm going to move around holding the 'Spacebar' key, clicking and dragging. We hold down the 'Spacebar' key and you keep on clicking and dragging, or you can use these little sliders around. So, I've got this first one, and they're called Artboard instead of pages. What I need to do now is create another Artboard for my tablet size, so what I'm going to do, there's a couple of ways, the easiest way is up here, there's one called the 'Artboard Tool', click on him, and that kind of allows me to change the size of this if I want to, but what I'm going to do is, I'm going to click this little option here which says 'New Artboard', and you can see my cursor becomes loaded with a duplicate of this guy. I'm just going to click it anywhere. I'm going to say, "You live there." I'm going to slide across using my spacebar. 

Now, how big should a tablet be? I'm going to deal with-- we're going to do the width and height, not the X and Y co-ordinates, we're on the width and height. We kind of talked about it before. How wide is it going to be? It's going to be 768. How tall is it going to be? It's going to be dependent on the content. So we're going to design it probably a little bit longer, but we're not worried about that at the moment, so don't stress how tall this is. I'm going to move it across a little bit. So it's next to my desktop.  

Now I'm going to do my mobile version. Now I can go to 'New' again, but that's easy, you've done that. If you hold down the 'Option' key on your Mac, or the 'Alt' key on your PC, you can see the cursor changes to that little double arrow, that means it's going to duplicate it, and I find that's the easiest way to drag another version. You can keep holding 'Alt' and drag out lots of versions. I just want three at the moment, so I'm going to have my desktop, tablet, and now my mobile.

So the mobile version, we talked about it before, we're using width, so the width in this case is going to be 400, it encompasses all the new-- iPhone versions, they're upto 7 now, but who knows what 8's going to be, so it gives us a little bit of play room. If it ends up being something stupid like 380, we don't have to go back and redesign our site for mobile, and the height is going to change depending on the content, it's a lot thinner. 

So, what we'll do before we move away from this-- we've created our pages, we've got our mobile tablet and desktop versions, let's go and name them. You need to go find your Artboards tab, if you can't find it, go to 'Window', and go down to 'Artboards'. My first one, 'Artboard 1', I'm going to double click it, and this one's going to be called my 'Desktop', and I'm going to give it a name, so everyone knows that I'm using 1200 pixels, 'Desktop 1200px'. Doesn't change anything, just the label. Artboard 2 is my 'Tablet'. 768 pixels wide; 'Tablet 768px', and my 'Mobile' is going to be 400 pixels; 'Mobile 400px'. Great! I'll zoom out, remember, 'Command -', or 'Control -' on a PC, 'Spacebar' to move it around. We're getting there. We're going to save it, 'File', 'Save'. For this course, I'm going to put everything on my desktop, I'm going to make a new folder, and this is going to be 'Dan's Portfolio', and I'm going to give it a 'V1', 'Dan’s Portfolio V1', actually it's the folder name, so we're just going to call it 'Dan's Portfolio', click 'Create, and now the actual name with this, this is going to be called 'Dan's Portfolio'. Give it your name because we'll

build you one while we go along, and give it 'V1', never call it-- it means it's some sort of version number, it can be numbers or letters, never call it final, final is the kiss of death, you've probably got files called Final 2, Final Revisited, Final New, so just V1, and you'll end up with lots of different versions. Let's click ‘Save'. Leave everything by default here, let's click 'OK'. That my friends is how to pick the sizes and create your first Artboards for our design.