Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
One of the biggest complaints that I had about early versions of Adobe Illustrator was its lack of support for multi-page layouts. But luckily, in CS4, Adobe added support for something called artboards, and artists and designers around the world rejoiced, especially me. Artboards are Illustrator's answer to multi-page layouts, but they're so much more versatile than that. In this movie we'll explore artboards and how to add them to your project, so you can take full advantage of them in your daily workflow. So I've got a document already open here, and I'm going to add some artboards to eventually, but I want to start off by showing you how to create a new document with multiple artboards.
So let's go up to the File menu and choose New. When I get into the New Document dialog box, I want to name this artboards, and I'll change the profile to Web, I'll make it 800x600, and now here I can change the Number of Artboards. So I'm going to change it to 4, and you'll notice I get to change the way the grid of artboards is set up. So I can do Grid by Row, Grid by Column, Arrange by Row, or Arrange by Column, and I can also change the Right-to-Left Layout.
In this case, I'm going to stick with Grid by Row. I'll also change the Spacing, so that there are 30 pixels in between each one, and I'm going to leave it at 2 Columns. Then I'll hit OK. Once I hit OK, you can see here I've got four identical documents inside of this one document. It's just like having multiple pages, except it's all contained in this one single document. You'll also remember from our navigation section that I can easily jump to each one of these artboards by utilizing this Jump menu down here at the bottom. But until I actually get content on these, you may not know exactly which one is which.
So let me add some text out here so you can actually see it. So I'm just going to add some numbers, I'll add the number 1 here. This will be artboard number 2 here. This one down here will be artboard number 3. And finally, this one down here will be artboard number 4. Remember, our flow goes Grid by Row, so it's 1, 2, 3, 4.
So now if I use this Jump menu down here to go to artboard 1, it jumps to 1. artboard 2, artboard 3, and artboard 4. So it's pretty cool. I can use that little Jump menu almost like a Pages menu to go to the different pages or artboards in my document. But as I said in the beginning of this movie, artboards aren't just a static page. So now that we have a few here in our document, we're ready to start modifying them using the Artboard tool. So let's zoom back out here so that we can see all of the artboards, and let's assume for a second that I wanted to change a couple of these artboards.
Maybe these are different projects. Maybe this one is a page, this one is a web banner, this one is a button, and this one is a logo let's say. I need different sized artboards for each project, right? Well in order to change them, I'm going to use this guy right here, the Artboard tool, and you can access that by clicking on it for hitting Shift and the letter O on your keyboard. When I do that you're going to notice that the current artboard I'm working on is highlighted. I can also click to highlight any of the other artboards like so. If I want to modify an artboard, I can resize it just like I can anything else inside of Illustrator.
As I start to resize it, you'll notice that I get a Width and Height box that pops up to tell me how big it is. So let's say that I needed this artboard to be 900 pixels wide by 300 pixels tall, and I'll just reduce this down to 300 pixels and then I'll stretch it out to be 900 pixels, just like that. This artboard here, that's going to be a logo, so I'm going to shrink it down significantly, so just going to shrink that down to about 300 pixels wide, something right around there.
If you want to be precise, you can actually come up here, constrain the proportions of your artboard, and you can change it to 300 pixels and it automatically changes. Same way with this artboard here. Let's say this one needs to be a little bit taller, so I need to make it about 900 pixels tall. 900, hit Enter, and it grows. I can then move it around like that. And then finally number 3, this one is going to be a small web banner, so I'll just shrink that up to 125 pixels roundabout.
If I want to get precise, I can come up here, 125. There we go. Now I constrain my proportions, so I'm going to undo that, break the link, and then do 125. There we go! Now I can come back and move it just like that. If I want to line them up, I can do that as well. Notice the Smart Guides help me align these up. So now same basic principle applies, here's 1, 2, 3, and then 4 remains right there.
So if I want to jump to these, I go 1, 2, 3, 4. All right! Now that we finished setting up a new document and I've showed you how to modify these artboards, let's put it into some practical application. I'll close this up and I don't have to save it and I'll go into this document here. So let's say for instance that I'm creating several different screens for this application that I'm designing here. So I've got the login screen ready to go, but I want to create some of the screens to go along with it. Well I need to create some more artboards to go along with it.
Now I can actually go in here to the File menu and go down to Document Setup, and inside the Document Setup, I can go to Edit Artboards. Once I'm inside the Edit Artboards section, it automatically invokes the Artboard tool and also makes it active and allows me to start creating more artboards. I can also utilize something called the Artboards panel. The Artboards panel allows me to create new artboards on the fly. If I click this, it automatically duplicates my current artboard just like so. If I hit another one, it's going to create another one, just like that, and another one.
So now I can essentially storyboard my application out simply by adding these artboards via this panel. I can also rearrange the artboards utilizing these arrows here, moving one up, down, et cetera. You'll notice in the Control panel I've several different options for artboards; Move and Copy, Show the Center Mark, Show Cross Hairs, Show Video Safe Areas, Artboard Options. I can change the Reference Point for the artboards, and I can even change the X and Y coordinates of the artboard, as well as the Width and Height.
Now if I go into Artboard Options, you're going to notice that it brings me into this particular dialog box. I can change the Width and the Height of the artboard, the X and Y coordinates. I can choose to constrain proportions. I can choose whether or not I show Center Marks, Cross Hairs, and Video Safe Areas. I can also Delete it or hit OK. If I click Cancel, it takes me right back out and I can continue working. So now I'll zoom out. So you can see in just a few short and easy steps, I've created three additional screens to go along with my login screen, which I can now fully modify and make a fully- working, almost prototype-like scenario of this application.
So even though Illustrator doesn't technically support pages, you can certainly achieve the same type of effect by utilizing artboards. You can also turn a single design into a multifaceted group of designs, simply by modifying and creating new artboards around that document in the window. This is going to save you a lot of time and clutter on your desktop, because instead of creating four individual files here inside of this document, I've actually created four files in one. And that's going to save me a ton of time and also some space in my folders and on my hard drive.
Get unlimited access to all courses for just $25/month.Become a member
120 Video lessons · 63811 Viewers
119 Video lessons · 71354 Viewers
125 Video lessons · 32156 Viewers
84 Video lessons · 18732 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.