Adobe® Illustrator® Creative Cloud®: Essentials for Creating Projects

Lesson 24/56 - Best Formats to Save Your Files

 

Adobe® Illustrator® Creative Cloud®: Essentials for Creating Projects

 

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.

Class Description


The world’s top designers use Adobe® Illustrator® for its powerful, vector-based drawing environment – and now you can gain fluency in it, as well! Join Brian Wood for a dynamic course on everything you need to know about Adobe® Illustrator®.

By walking you through a series of projects on Adobe® Illustrator®, Brian will give you a comprehensive toolkit that will answer any need, including:

  • Getting started in Adobe® Illustrator® and familiarizing yourself with its workspace
  • Creating color using a variety of methods
  • Creating and transforming artwork, working with text, and importing images
  • Tricks and techniques for drawing: selecting and editing, and working with layers
  • Creating custom patterns, brushes, and symbols
  • Exploring built-in visual effects libraries
You’ll also tackle more advanced Adobe® Illustrator® topics, like the perspective grid, Creative Cloud libraries, effects, live paint groups and selection, blends, and the shape builder tool.

Lessons

1Class Introduction 2What is Adobe® Illustrator®? 3Explore the Interface 4Create and Save New Documents 5Zoom and Navigate 6Working with Artboards 7Introduction to Layers 8Rulers and Guides 9Shapes and Drawing 10Aligning and Combining Shapes 11Pen Tool 12Manipulating Stroke and Fill 13Creating and Editing with Color 14Painting with Gradients 15Getting Started with Patterns 16Adding Text To Your Document 17Formatting Text 18Strokes and Variable Strokes in Adobe® Illustrator® 19Rotating Objects in Adobe® Illustrator® 20Effects and the Appearance Panel in Adobe® Illustrator® 21Adding Photo Images in Adobe® Illustrator® 22Working with Linked Content in Adobe® Illustrator® 23Packaging your Project for Handoff in Adobe® Illustrator® 24Best Formats to Save Your Files 25Select Like a Pro: Layers, Groups, & Other Unique Tools 26Edit Paths Like a Pro in Adobe® Illustrator® 27Editing Paths: Pen Tool in Adobe® Illustrator® 28Creating & Applying Brushes to Artwork in Adobe® Illustrator® 29Editing Paths: Knife & Scissor Tool in Adobe® Illustrator® 30Editing Paths: Join Tool in Adobe® Illustrator® 31Editing Paths: Isolation Mode in Adobe® Illustrator® 32Pen Tool Shortcuts in Adobe® Illustrator® 33Other Drawing Tools & Methods in Adobe® Illustrator® 34Transforming Techniques in Adobe® Illustrator® 35Shortcut to Reflecting Artwork in Adobe® Illustrator® 36Get to Know Your Appearance Panel in Adobe® Illustrator® 37Exploring Effects in Adobe® Illustrator® 38Work Smarter with Graphic Styles in Adobe® Illustrator® 39Color Inspiration in Adobe® Illustrator® 40Type Effects in Adobe® Illustrator® 41Masking Your Artwork in Adobe® Illustrator® 42Using Creative® Cloud® Libraries in Adobe® Illustrator® 43Capture Artwork with Creative® Cloud® Apps & Adobe® Illustrator® 44Tracing Raster Images in Adobe® Illustrator® 45Blending Artwork in Adobe® Illustrator® 46Using Symbols in Adobe® Illustrator® 47Using a Perspective Grid in Adobe® Illustrator® 48Crash Recovery in Adobe® Illustrator® 49GPU Performance in Adobe® Illustrator® 50Curvature Tool in Adobe® Illustrator® 51App Integration in Adobe® Illustrator® 52Creative® Cloud® Libraries in Adobe® Illustrator® App 53Shaper Tool in Adobe® Illustrator® 54Smart Guides in Adobe® Illustrator® 55Text Enhancements in Adobe® Illustrator® 56SVG Export in Adobe® Illustrator®

Reviews

KATIE Y
 

I am a pretty computer literate person but an Ai beginner i.e. I am completely new to the Creative Cloud/Adobe Illustrator. (This is also the first time I've used CreativeLive.) I think this course it is fantastic. The pace is good as is the content which progressed logically and covers all the basics you'd hope it would. The course is 2 full days' worth of material but it is broken down into segments so you can revisit or skip through as you need to. The presenter is really personable and easy to watch (even for me, a Londoner!). I would also say I think it is pretty good value for money -- I am currently enrolled on a part time course, basically doing the same sort of stuff, and I have to say this is better and a bit cheaper! I definitely recommend it to you!

jackflash
 

A brilliantly designed course. it's almost magic. It's everything you hope for in a follow-along software class. Brian Wood has engineered it so that you start on a project that just needs basics, and then you move on to more & more complicated projects, and almost without realizing it you've learned Illustrator. This doesn't just happen -- Wood has clearly put a LOT of effort into creating this course. Here's one trivial example: he doesn't overload you with a lot of keyboard shortcuts right at the beginning -- you start with the actions themselves, using the (admittedly tedious but easy) pulldown menus, and then after you're comfortable with what you're doing, he'll throw in the shortcut. It may seem obvious, but so many instructors feel they have to give you an extensive foundation of definitions, shortcuts, interfaces, etc., before you ever do anything. Good stuff to know, but you'll never remember it. Wood has you up and working almost immediately. And he's a joy to listen to, at a perfect pace. Highly recommended.

Philippe LIENARD
 

Top course. Very well explained, clear, good examples, pleasant teacher. I like it and recommend it. One suggestion, it would be nice to have a detailed table of content of the course in the material. For instance, it took me quite a while to find back the part of the course where how to make a gear was explained.