Lessons

Lesson Info

Best Formats to Save Your Files

I'm gonna go through and talk to you about saving in different formats, 'cause this is big. I mean, I, there's so many times where I get people that want to save out... Like, let's say they wanna take this ship wheel and they wanna use it on their website. How do they save it out of here, as a JPEG, maybe even SVG, you know for web, et cetera? Or if they wanna make a PDF out of this, how do you do that? So we're gonna kinda go through some of those options, or 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... Let me put this on my desktop. That we have a series of file formats that we can use. Now we have Illustrator file, we have Illustrator EPS, PDF and SVG, and those are the ones that I'm using the most. And I gotta be honest, I can't even remember the last time I saved as an EPS, I really... Have you, you guys used EPS much in your work? Okay. Yeah, EPS, which stands for encapsulated post script, was someth...

ing we used to use a lot when we printed. Okay, 'cause 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 and bring those to InDesign, 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. 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 of you guys know what SVG? What is... Anybody like to grab the mic and tell me what SVG is? Really? No? 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 had JPEG, 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. I mean, 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. If somebody asked you and they're doing print work, and they say, give me 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. Just to give you 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 if 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 is still vector, it all has the 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. I just, 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, you know, 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. You gotta answer some questions. I guarantee you 98% of people just blow by this and click Okay, you're safe. Because the settings are fine for most cases. If you look up here you're gonna see we have what's called Illustrator Default. You can, if your printer say, hey, you're sending me this file, save it as PDF X1A or something like that, they're right here. You just pick them from that option. Illustrator Default is great because look right here. Preserve Illustrator Editing Capabilities. That's the magic right there. That means you can open up in Illustrator and usually make edits pretty easily. All right, we're not gonna go through all this stuff 'cause there's some dry, boring, crazy stuff in here, so. But there are lots of things you can do if you needed 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. I cannot tell you how many times that I've saved this 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 'cause I'm trying to save you, 'cause 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, kinda at least how to start on this type of thing. Just because we actually, I have a course here at Creative Live that talks all about it. So, we're not gonna (laughing), 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. Can you guys figure out what file format these days, out of PNG, JPEG, GIF, or SVG, what I save this as to go on a website? Like, what do you think might be the best option? All right, we got a taker. Nice. All right. A 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. So, this is where the web and things are changing a bit. And this is where I, I'm learning a lot of this stuff too. But, this kinda 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'll 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 wanna 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. How many of you, has anybody ever used slicing tools in any program, like Photoshop or Illustrator? I'm sorry, yeah, they stink. Let me show you how to save this as a PNG, JPEG, 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 that it's just gonna pull in the selected artboard. This was 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 the, well, they were things called Slice tools. 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 it's 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 as much image hanging out. But, we'll keep going. If you look up, 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, JPEG, and we've got two flavors of PNG. I, I don't use GIFs anymore. I'm not gonna lie to ya. 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. 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. JPEG 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. 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, a PNG-8, just like a GIF will actually do transparency too. So if I wanted 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. 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 just... 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, 'cause you can change the size. I do this all the time. Somebody will 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. You don't have to do that, but it's something you can do. All right, now we've 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 a while. It really kinda, it got me. So Cancel means stop, don't do anything. 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, and 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 of the settings will be captured with the file. So that's actually a good thing. That's a great thing. And it's gonna be good for you too, 'cause then you don't have to keep doing this every time. 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, a 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 there. I'll put it on my desktop, and save it out there. And there we go, 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 such, 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, I, you don't have to, 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. 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 can do anything I want, and if I had the wheel, the ship wheel, for instance, I had it sitting over here. I had the ship wheel sitting over here. Really? Okay. I might need to group that stuff together. That other guy shoulda did that. That's not gonna do it again is it? But 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 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 a short-cutty way to get PNG files. That's all you get.