FREELessons: 20Length: 3.3 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

6.1 Exporting for Print and Web

In this lesson, you’ll learn how to export your artwork from Illustrator. You’ll learn how to get the best results when you print from your artwork as well as exporting your images for online/web uses. See how to export as a PDF from Illustrator, how and when to export an SVG file, and more.

6.1 Exporting for Print and Web

Hi there. In this video, we're going to export our postcard, we're gonna export some icons, we're gonna make JPEGs ,we're gonna make PDFs. We'll show you to make real high quality ones for your printer, low quality ones that you can get downloaded from our website with emails. Plus how to export individual icons, PNGs, SVGs, it's all very exciting. Enough talk, let's get started. All right, to get started, if you go to File, Open and go to your exercise files, there's two files we need. Okay, files even, Export Print and Export Web. Open both of those up for me, one looks like this, one looks like that. Okay, let's start with exporting print, so just click on the tab along the top. And let's say, our goal here is to send this out to get printed. We want 100 copies done at our local print shop. The most common format for sharing with printers is a PDF. We'll do a JPEG as well but a PDF will give you better results, retain some of the vector goodness inside of these images. Don't worry too much about it. Just know that PDFs give you really high quality, really small file sizes. Now to do it, it's kinda weird. You got to File and you think you go to Export but nope, you go to Save As. Go to Save As and the big thing we need to do is down at the bottom where it says format, change it to PDF. The other thing I'm going to do, is I'm gonna put it on my desktop in that class files folder that we made. I'm just gonna to leave the name alone and click Save. All right, so this is where all the magic happens, and up at the top here, where it says PDF Preset, change this to High Quality Print. So that's step number one. The only other thing you need to do is where it says preserve illustrator editing capabilities. Turn that off, why? Because with that on, there's actually no difference between the PDF that we're making and the illustrator file. It has all like working back end stuff that only illustrator needs, your printer doesn't need it. So with that off, it makes the file not as smart let's say, but it makes the file sizes absolutely small. And there's nothing that the printer actually needs, okay, so don't worry about it. Just set it to high quality, print, turn that off, and hit save PDF. Illustrator is gonna say, hey, you turned that thing off. But I kinda half explained it there. We just don't need all that extra information for a PDF. It does its thing. Let's check out my desktop. I've got that class files and there it is there, exporting PDF. It is only 0.6 megabytes, teeny tiny. Let's have a look if we don't do it, cuz if you're like man, it's a big PDF. It's probably cuz you've accidentally forgotten. I'm gonna do a v2. You've forgotten to turn that off. So I've left it on just to see what it does. Let's have a little look, takes a lot longer to make, but let's have a little look. Got a v2. One is 31 megabytes, and one is 0.6 megabytes. So huge difference. They will both print exactly the same for the printer. Just with a lot of information they don't need. All right, so that's how to get a high quality looking real good print. Let's look at doing say something that's gonna be a PDF still, but it's gonna be something that's maybe downloadable from your website, or something that you email out to clients. So let's look at doing, it's a very similar process Save As, this one's going to be my Low Res version. Same thing as before, PDF and all we need to do though is at the top, let's go to smallest files size, make sure that's off. It's still off, click Save, it says, you turned that thing off, I said I know. Now my disk up here, you'll get a lot smaller version Low Res, can you see? That was 650 kilobytes, that is only 99. Now, if you have a look at it, it looks fine. It's a lot smaller, it's teeny tiny. And I guess in today's world, half a megabyte is just fine. So you might not even have to get down to that really small file size. But we just got one page, you might have a huge document with all sorts of things going on. Now one thing that might happen is, it's not unlikely but you might get a chance where you've set it to the high quality and still coming out really ugly, you know, what happened? You can go up to Effects and go to document raster settings, okay? And that might have been switched earlier on to something like screen, very low quality. You can turn it up here. Click OK, yeah, I've had students run into that in the past. Let's say now that I want a JPEG, and this JPEG could be going for print, cuz you're just like, I don't like PDFs, I need a JPEG for some reason. Or it needs to be uploaded to, say, your WordPress blog, and you need a JPEG. Again, they like to hide this in a weird spot. Let's go to File, let's go to Export. And we're up to this one that says Export for Screens. You can use the Export As as well, or all three of these work. This is just the newer one. Exports for Screens, and it's just really handy. I want to export this one here to this tab. Yours probably defaults to Artboards. When I export this Artboard, where do I want it to go? I'm gonna click this little Browse button, I'm gonna stick it on my Desktop, and that same file Choose, what kind of format do I want it to be, okay, this case JPEGs probably, work perfect. We'll do PNGs when we look at web in a minute but basically, this is our quality slider here, try 100 and what you're looking for, that's like is good as it can get. You may have to lower it down to file sizes getting too big. But JPG 100 is kinda look nice, you might actually just add a scale. And instead of scale, we're actually turn it back to 1 and actually just say, I want a JPEG that's 50 as well. So it's gonna give me two options when it exports. And I can compare the two just to see the file size versus the quality. All right, let's click Export Artboard and hopefully now, I've got Artboard 1 and Artboard 1-50 that means it's just the half quality one. And you can see the size is about half, and let's look at the two resolutions one, two, one, two, one, two. Hardly see the difference, so either those work for me. Let's look at something doing something slightly different. So PDF is the best, JPEGs are fine. But let's say, I wanna export lots of individuals parts like this. I don't want this to be a full, white document with these guys in the middle. I want them to have this kind of transparency so I can see through them. So that's first thing. I need to make them something PNG. But also, I don't wanna export them like, what a lot of people do is they'll delete this, then export that one. Okay, and then delete everything but this one, and then export that. So exporting them individually is a new little trick that illustrator does. And they like to hide it in a completely different space from all the other things, and it's this option here under window, and go to this one that says, Asset Export. So this little panel here, I'm just gonna drag it to the side. So all you do is, grab this one here. Just Click, Hold and Drag it. You can't drag the center cuz there's no fill on it, you have to grab the edge. So black arrow, grab the edge, drag it over here. There he is there. So we drag all our icons in. We give them a name. This one's called My Palette. Man, I can't spell. [LAUGH] French person. [LAUGH] Okay, so I drag this, next one in, I can spell funnel. Here we go. A new phase, funnel. All right, flame, I can spell. Let's have a look at Flame, so what I am going to do is this is actually in two parts. So I am going to select it with my black arrow, both of them, and then I am going to drag both of them in, and wrong, okay. Can you see because they weren't grouped, I mean these must be two separate shapes, okay. So I'm going to undo that and then you see two separate shapes. But if I select them both, go to object go to group first then drag them in, and then I can call it flame. Knowing that we can drag more than one in, I've grouped all of these ones for you, so now I'll grab all of these and let's drag them all in. You can see how it gets a little easier with a bit of practice. This one's my brush, this one is my stamp. Yes, I can spell all of these ones, pencil, that'll do. Okay, so you've got them all in here. Nothing really has happened, so this is kinda like a holding area, okay. What I need to do is I need to select all of these. But when I click it, can you see what went blue? The editor will zoom in. It's a little hard to see on your own screen. You can click on individual ones and I can pick, I want it to be a JPEG or I want to be a PNG. What I'd like to do is just do them all at the same time. So hold shift and just click them all, until they're all blue. All right, now to the bottom here, you gotta decide on the format. Now, let's pretend we are going out to our website, and we want transparency. So JPEG, unfortunately, doesn't allow transparency. It'll put a white background on here. So if you export it, you'll be like, white background, weird. So you need to be this PNG. That will give you your kinda transparent background. But there is a new format that's getting more and more popular called SVG. Could do PDF here as well, okay? But SVG would be say, I'm sending it to a web designer or developer for icons for a website. They might go, you might have a chat with them. They're kinda new. Like the developers I know, half of them know exactly what an SVG is and how to use it, and the other half are like, so I just send them JPEGs. What you can do though, if you're unsure, or if you're unsure if they're unsure, is see this thing that says add scale? We're not gonna scale it out, we're gonna back to 1x, so they're both the original size. But we're gonna do this, so it just means one's gonna be PNG, one's gonna be SVG, and it's just gonna make two copies for you. You can send them both and they can just use whatever they like. So let's click Export. In my Class Files, I'm gonna make a folder just to keep them all separate. So these are my Web Icons. Click Create, pick Choose, and hopefully now on my desktop somewhere, I've got web icons, and you'll see I've got two brushes. One's a PNG, one's an SVG. And if you're like what is an SVG, it's basically a vector graphic. Now everyone knows what a vector graphic, go check out a video here on Envato Tuts+ about vector verses bitmap. It will explain it with a lot more detail. But a PNG is a certain size and if I scale, it's bigger, it's gonna get all yucky and distorted. But in SVG, if I scale it up, you see a kings scale up to a size of a mountain or a teeny tiny size and it's still very, very small, a lot smaller than the PNG. So that's getting you more and more around the world. SVG is a scalable vector graphic, PNG is, I have no idea. It's some sort of group. [LAUGH] Photography network group, I'm guessing? And the cool thing about it is you can see you've got all these icons now all ready to go. It gets even better when you start updating them. Watch this, if I go through now and I change the stroke color of this one to pink, can you see it change over here? And hit Export. Actually I'll just do them all, let's do them all, click on all of them, click on stroke, they're all pink, you see the updated here, export, man, cool? Think of all the time you can save, they all should be updated in pink. Just make sure they're grouped, give them a name, learn how to spell and that my friends is how to export for both print and for web using Adobe Illustrator. All right, I will see you in the next video where we say goodbye. Don't skip the last video, though. I've got some useful parting information. I'll see you over there now.

Back to the top