Adobe Illustrator Creative Cloud: Essentials for Creating Projects

Lesson 24 of 56

Best Formats to Save Your Files

 

Adobe Illustrator Creative Cloud: Essentials for Creating Projects

Lesson 24 of 56

Best Formats to Save Your Files

 

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

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