AIUX - Create Presentation Ready PDFs with Artboards in Illustrator

Matt D. Smith shows how to use Illustrator artboards to build multi-page PDFs ready for client presentations. Organize your designs across artboards, then export them all at once as a single PDF file.
Hey, welcome to AI ux, a series about rapid UX design with Adobe Illustrator. I'm your instructor, Matt D. Smith and today I'm going to teach you about Artboards. First of all, I ignore artboards to begin with. You can toggle their visibility under view. Where are you show artboards? The quick key is command shift H zoom out so you can see that. Typically I just hide them until I need them. So what we'd want to do if we wanted to create a two page PDF based on this sitemap and these screens. So make sure the selection tool is selected. Hit document Setup, Edit Artboards and then you can draw a new artboard. These can be different sizes. If you mess up and you click off, you just need to go back edit Artboards. You can size these, you can select an entire artboard and option drag it to create a new one or you can click this tiny little X to make it go away. So if I want to create a small artboard here and I want this one to be slightly larger for these devices I could size them like this. Hit the V key, maybe drag these into place, can group it and maybe we'll align horizontal and vertical to the middle and then we'll do the same for this. Going to align to artboard horizontal vertical. Alright, so now we have our artboards created. We if we hit command shift S format PDF use Artboards is selected by default and I'll just do artboards to the desktop save now right here. If you want to reuse this PDF as a standard Illustrator document, you can leave Preserve Illustrator editing capabilities checked. I usually leave that. There's never really a reason why you wouldn't want it to be editable by Illustrator. Even if you uncheck that, there's still vector information inside the file. So it's not like you're gonna keep anyone from digging things out. It mainly has to do with keeping the layers intact and the text fields intact. So I would recommend leaving that selected unless you have a really good reason not to hit save PDF and I go to my desktop here and double click on this file. Alright, so you can see I've got a two page PDF now. Now you can just rearrange this inside of preview. If you're using a Mac, hit command S to resave. But if you want to get even more ordered with your document, just go to your artboards. When you double click these, it'll show you which order they're in. If you want to change the order, all you have to do is rearrange these. I'm going to put Artboard 2 on the top here. Well, how about I pull this one down? There we go. So now I'll just rename this site Map and I'll name this one Devices. So now if I save as a PDF, do version 2 Save Save Checkout version 2 or 0.2. Now you can see that my Artboard that I switch is now on the top. Now, to give you a quick example of why you would want to do that, here is a sample site map from a current project where I have multiple artboards. One for a sitemap that I'm working on for a client, I've just added a little page title here with a bounding box. And then down below here, see I've got a really wide Illustrator file. That Artboard is really big. But either way, you know, the client can still zoom in on this just like any other PDF. So this is a an easy way to keep this organized. Once you've drawn out everything with Illustrator, if you have any questions or comments, let me know or hit me up on Twitter. I'm mds. You can download the sample files that I used right here in the link below. And until next time, Happy wireframing.










