Lessons

Lesson Info

Best Formats to Save Your Files

I'm gonna go through and talk to you about saving in different formats, because this is big. I mean, there's so many times where I get people that want to save out, let's say they want to take this ship wheel, and they wanna use it on their website. How do they save it out of here as a JPG, maybe even SVG, you know, for web, et cetera? Or if they want to make a PDF out of this. How do you do that? So we're gonna kinda go through some of those options, those different ways to do it. Why don't you come under File. And choose Save As. You're gonna notice down here, in Format, lemme put this on my desktop. That we have a series of file formats that we can use. And we have Illustrator file, we have Illustrator EPS, PDF, and SVG, and those are the ones that I'm using most, and I gotta be honest. I can't even remember the last time I saved as an EPS. Have you, you guys used EPS much, in your work? Okay. Yeah, EPS, which stands for Encapsulated PostScript, was something we used to use a lot wh...

en we printed, because we had to take vector somehow, and bring it over to other programs, I should say. And that was kinda the way to do it. Now because we can save Illustrator native file formats to bring those to end design, we don't really, well, we don't always have to save as something else. You can just bring the AI file directly. Come down here, you're gonna see Adobe PDF. Now, Adobe PDF, this is actually kinda cool, but an Illustrator file is kind of a PDF under the hood. It's actually a PDF file, so to speak, okay? You can take a PDF that you created, and open it in Illustrator, and you might be able to edit it. It's pretty wacky. Anybody ever tried that before? Yeah. I have to do it all the time. I get all kinds of stuff, I get reports, and contracts, and different things, and somebody messed something up, and they're like "Oh, we don't have the original anymore." I open the PDF right up, and sometimes I can edit it. (laughs) I'm gonna tell you right now that if you save as an Illustrator file, if you save a PDF from an Illustrator file, you're golden. You can open that PDF up in Illustrator from here on out, and do all kinds of edits to it. If you make a PDF somewhere else and you try and open it, that's where the trouble begins. You might not be able to edit too much, okay? But it's kinda neat. SVG. How many guys know what SVG? What is? Anybody like to grab the mic and tell me what SVG is? Really, no? All right. (mumbling from class) Scalable vector graphics? Okay, nice, yep, you got it. So it's kinda crazy, but way back in the day when we were doing web, we just have JPG, GIF, and yeah, that was pretty much it. And then some other formats started coming out. We have PNG, and then SVG started coming in. SVG is a file format that allows us to have vector content stay vector on, let's say a website, or a mobile device, or an app, or something like that. It's awesome. You're probably, I'm not gonna say this, but you're probably gonna only save SVG if you're doing web app development, or web work, something like that, okay? If somebody asks you and they're doing print work and they say gimme an SVG file, I'd be like huh? But, you know, whatever. So we can save as SVG right here, that's pretty cool. Let's do a PDF, okay? Just to get an idea? So go ahead and save as PDF. Now why would we save as PDF? I guess that's a question I would ask you. Okay, nice. We have a taker. So someone who doesn't have the Adobe Creative Suite can open it and see it? You got it, that's one of the big reasons, exactly. So if somebody doesn't have Illustrator, they wanna be able to open up what we're working on, if I send something off to a client and they don't have Illustrator, I'll just quick PDF, send it off, they can open it in any free reader if they want to. The other reason why, possibly, is to send it to a print service provider, maybe. Something like that. Because it encapsulates everything. Everything's still vector, it all has fonts and different things you need in there, and they can usually work with it and print it from there, so. That might be why we do it, so, awesome. Let's go ahead and save this on your desktop, if you wouldn't mind. You guys, just as a quick, I know you probably already saved it, that's fine, but you can in Illustrator pick what page range you want, which is kinda neat. So you can pick what you need. Go ahead and save it. Now the save Adobe PDF dialog box, this is one of those things where you're not gonna get away with just saying give me a PDF, okay, you gotta answer some questions. I guarantee you 98% of people just blow by this and click OK or Save, because the settings are fine for most cases, okay? If you look up here, you're gonna see we have what's called Illustrator default. You can, if your printer says, "Hey, you're sending me this file, save it as PDF X1A", or something like that, they're right here. You just pick that from the option, okay? Illustrator default is great because look right here. Preserve Illustrator Editing Capabilities. That's the magic right there. That means you can open it up in Illustrator, and usually make edits pretty easily. All right, we're not gonna go through all this stuff, because there's some dry, boring, crazy stuff in here, but there are a lot of things you can do if you need to. Go ahead and click Save PDF. And it's just gonna jam it out there. A word of warning, okay? Look out at your document right now. Try and select a few things. Go ahead and click on some stuff. Do some things. Kinda looks like we're still working in here, right? We're still doing our Illustrator thing, right? You are now working on the PDF, okay? I cannot tell you how many times I've saved as PDF and said "oh, I'm gonna send that off, I wanna go make some edits to the original Illustrator file." Look at the tab up top. You are working on the PDF, not the Illustrator file. So just bear that in mind. I'm telling you that because I'm trying to save ya, because I mess myself up all the time. Okay. So that's a PDF file, that's great. Now, I wanna show you a little bit about saving for web. We're not gonna go too far into this, I just wanna give you, just a little bit, at least have a start on this type of thing. Just because we, I have a course here, Creative Live that talks all about it, so I'm not gonna (laughs), I'm not gonna step on that, but. Why don't you come to this little ship wheel right here, and go ahead and select that content. You can drag across it to select it, or click on it if you can. Suppose that I wanted to take this, and I wanted to send this to somebody they needed it for a website, for instance, okay? Can you guys figure out, what file format these days, out of PNG, JPG, GIF, or SVG, would I save this as to go on a website? Like, what do you think might be the best option? Ah, we got a taker, nice, all right. Uh, PNG file. Yeah, a PNG could be really good. The reason why is because it is actually something that we can put on the site. We can do a little bit of scaling to it, that type of thing. Thing about a PNG is it's rasterized. This is where the web and things are changing a bit, and this is where I'm learning a lot of this stuff too, but this kind of object right here, because it starts its life as vector, I wanna keep it as vector on the web. Or in an app. So we have basically one option. SVG. And that's one of the big things we will save this as. Now, this is the thing, though. I get people that cannot handle SVG. They don't want it on the website, they don't want it in the thing they're building, so they do ask for a PNG, that's the next best step. Because it's gonna rasterize it, it's something you can use, it's an image file, they can work with it. If we want to save this out, we're gonna actually go in here and we're gonna save it, because it's on its own artboard, we're kinda lucky, we can just save it as is. Okay? Has anybody ever used slicing tools in any program like Photoshop, or Illustrator? I'm sorry. Yeah, they stink. Lemme show you how to save this as a PNG, JPG, or GIF. Okay? Come on up to File, and you will see Save for Web. Things have changed a lot in Photoshop, saving for web-wise, in here, they're kinda sorta the same as they were, but go ahead and choose Save for Web, and you're gonna notice it's just gonna pull in the selected artboard. Okay? This is something that was so awesome about working with artboards. In the past, we would have one big area, and you'd kinda have to cut things out of it, using what are called slice tools, okay? In this case, if you're working on icons or anything like that, web elements, you can create a series of artboards, and each artboard is gonna become its own image. So that's kinda one way around it, to do it. If you look over in the right over here, you're actually gonna see that we have an option called Clip to Artboard. And it should hopefully be selected for you. That's gonna be a good thing, because if you turn it off, it's gonna take everything out there, and make one big picture. So right now it's gonna take just that artboard, and honestly I might take the artboard if I'm working in the real world, and make the artboard a little tighter, a little smaller to the image, so we don't have quite so much image hanging out, but we'll keep going. If you look up top, you're gonna see that we can choose 2-Up. This is my preferred way of looking at it. Go ahead and click on the 2-Up button up there. You get to see the original file on the left, usually, and the optimized version on the right. If you look over on the right over here further, you can choose from the different file types that we have to work with. So we've got GIF, JPG, and we've got two flavors of PNG. I don't use GIFs anymore, I'm not gonna lie to you. I just don't do GIF, because PNG actually has two kinds of, two flavors, if you will. A PNG-8 is like a super-GIF. It's like a GIF on steroids, okay? It actually is, it does a lot of the same things as GIF, and it actually a lot of times compresses more, but it looks the same. It's actually pretty cool. JPG is for photographs, that kind of thing that we're working with, and PNG-24, this is a special one, this is the almighty PNG, and this one, if you have a drop shadow on this wheel right here, it's gonna make it so that the drop shadow is completely transparent. Okay, that's called alpha transparency. That's awesome. We don't need to do a PNG-24 with this, because it's just a straight-up image. So we can actually choose PNG-8 for this one, and if you notice the PNG-8, just like the GIF, will actually do transparency, too. So if I want to, it's gonna say all right, everything around it, let's make it transparent. You can turn on or off transparency, do what you need to do, and get it done, okay? There are so many settings in here that we are gonna deal with, that I'm not gonna go through all of these, 'cause there's, actually some of these are kinda ancient, like Web Snap, I mean really? Don't worry about that. We can, if we need to, change the size in here. I love this too, because you can change the size. I do this all the time. Somebody'll say hey, I need an image. That thing's too big, let's make it a little smaller, that kind of thing. Instead of me changing the original Illustrator file, I'll change it on the fly in here. So that way I keep my Illustrator file the same. And that's, you don't have to do that, that's something you can do. All right, now, we got our image out here, we wanna save this out. We can go out and save, this is my question to all of you, this always confused me. What is the difference between Done and Cancel? I can't even tell you. I thought about that for awhile, it really kinda. It got me. So Cancel means stop, don't do anything, okay? Don't save anything, don't do anything. Done means save the settings with the file, just don't make the file. Done is actually awesome. If you are a designer for instance, and you wanna be able to take this and get it ready for your client, then you wanna give them the file and just say "Just save for web, choose this, and click Save," you can actually click Done right now and all the settings will be captured with the file. So that's actually a good thing, that's a great thing. And this could be good for you too, 'cause then you don't have to keep doing this every time, okay? You just click Done. We can go ahead and save it if we want to. You can also, there's a little preview over here, that you can preview, it says, just click, go to a browser. The little browser menu down there. We don't have to do that. Just come down here and click Save. And it's gonna put it wherever we want it to. And go ahead and save it out, I'll put it on my desktop. And save it out there. And there we go. And we're all done. Slicing, I try to keep to a minimum. Cutting things up, doing things like that, I try not to do, just because it's a pain in you know what. There are a lot of commands and a lot of ways that you're gonna work in here for being able to save out content, and different ways to get that done. This is not the only way to do that. As a matter of fact, I'm gonna just quickly show you my preferred way, this is awesome, you guys. I'm gonna sneak this in, I know we're intro here, but. If you look in Illustrator, there is a panel called CSS Properties. This panel, this basically will give you all the styling for a website, for text and things you select in here. For objects. So you can take that CSS, that Cascading Style Sheet stuff, copy it into your website, your web maker, and use it, okay? I don't do that, I just do this. There's actually a button down here that says Export. It's gonna generate a PNG for me automatically, without having to cut it out. I could have anything over here, like let's say this image. I could do anything I want, and if I had the wheel, the ship wheel, for instance, I had it sitting over here. Really. I had the ship wheel sitting over here. Really, okay. I might need to group that stuff together. I don't think I shoulda did that. That's not gonna do it again, is it. Oh, you know what we did? We locked the circle, okay. So, if I had my ship wheel sitting right there, what I could do is I could just click on Export Selected, and what it does, is it just cuts it out, gets rid of everything behind it if there was artwork behind it, and makes a PNG for me. So, it's pretty amazing, it's pretty cool. Anyway, I'm just trying to tell you that there are a lot of ways to get the same thing done. This is a good, kind of shortcutty way to get PNG files, that's all you get.