Lessons

Lesson Info

Output

what we're gonna cover in this is we're gonna cover. How do you save export print? Save your assets for Web or mobile devices and basically, how to wrap up everything in the end. So here's what we have. We've worked on Illustrator quite a lot. So we've got this content and now I'd like to go in, and I just want to basically save these files. Well, how do I save them If I go into the file menu and choose save, I'm gonna go in and I can open this up and I can save my files here. And what I want to do is I want to save my content and there's a couple different ways I can save. This is a basic illustrator file, which is fine. And, you know, with today's software, you can save this as an illustrator file, and virtually any application out there will read it even Word or Excel or PowerPoint reads an illustrator file. Go on to the days of saving things is an illustrator E. P s. So you never have to do that. And I know people that have been in the business a long time. They're like Oh, you hav...

e to save it Is an E. P. S in order for other people to read it? No, actually, if you want to save it for somebody who doesn't have illustrator but you want them to be able to see this, open it up printed or place it in any other file to Ah, Pdf is awesome. Okay, pdf is just fine. And in fact, there's nothing wrong with saving them as a Pdf because then you can quickly see them breed them, and you can edit them. If you go through when you choose your pdf and then click safe, then it's gonna ask you some illustrator with some basic default questions here. Well, basic stuff here. Do I want to preserve the illustrator editing capabilities? Most likely. All right, if you want somebody to go in and be able to open up this file, who has illustrator somebody who doesn't have Illustrator. This is not a big deal, but they'll still be able to read it, and they'll be able to look at it and print it. Okay, so I can preserve these illustrator editing capabilities. That's fine. In terms of compression here, we really don't have to do anything simply because this is all vector artwork, so there's no need for compression right there. Marks and bleed. If you wanna go ahead and put trop crop marks or trim marks on your art boards for just the pdf purposes, you could do that Output settings for the color conversion. We can just go ahead and keep all of the colors exactly the way they are. So really not much to have to do when you go through. When you save this and you simply click save, you're done. It saves it as a PdF, and you're good to go. So not much in terms of that for printing going to the file menu, choose print. Yeah, pretty much standard stuff that's not much different than exporting to or saving as a PdF right there, a few things right here that you can go ahead and dio you can choose which layers you want to print. Maybe you do. Maybe you don't have your layers turned on or turned off, but this will be able to do that as well. You go in and set your marks and bleeds and your output on what colors you can print with and we don't have a printer set up here. So some of a lot of these things were great out. But other than that, pretty much a standard print right from here. I don't print a lot from illustrator. It's usually I put it into some other application and go a couple other interesting things with This is, Well, um, one of these things. We do a lot of work in illustrator for logos and things for website or mobile or Web buttons. You know, there's so much you ux development that's done in Illustrator. How do we go through when we take this and save these things is a J peg or a PNG you know, R S v g or whatever. Well, first of all, I can tell you right now, virtually anything we create an illustrator do not save as a JPEG J pegs have a very specific function, and that is to retain the image quality or not the image quality but the image tonal range often actual image J pegs are terrible for type and graphics and artwork like this. So J pegs are out. Do not save this as jpeg. I mean, we do have the ability to go in here and, you know, save certain stuff. But you notice there is no j Peg. Um, to go ahead and do this, which is great. We do have export. And we can save for the web here very much the same as it is in Photoshop. Here. We can save for the Web where we could go in and we can choose gift for J Peg or stuff like that. Uh, J pegs don't ever save these at all, because here's the problem with saving things. A. J. Peg. Do you see the problem that we have here? I'm going to zoom in here so we can see this a whole lot more J pegs. It's whole intent of JPEG is to go ahead and make these a whole lot smaller. So they look for similar color qualities and kind of bunch them all together. But you can see what happens here. You get these JPEG compression lines and these air terrible. Alright, so that makes it all crispy, crunchy. And now don't save logos, icons, Any illustrations as a J peg ever. Okay, eso The safer web is fine, but You know, we used to have this, but I'm going to cancel out of this simply because there is a better way to save as a gift or a PNG. If you're used to using Save for Web, that's fine. But we're gonna show you the asset export, which is going to be so much better. OK, it's safe for the Web, but, like with chocolatey coating asset export is under your window menu. It is a panel, and we have our asset export right here. Now it's this simple. You simply take your assets and you dragged them into your asset export right there. Now, if you have a grouped item like this is all group, this is great. If you have an item that's altogether that isn't grouped, check this out. It'll drink when you drag it in there, it will go through and it'll lead. Every object is an asset, and it's like, Whoa, no, not what I wanted, right? So either group them together or if you forget to group them together, hold down your option key when you're dragging them in and dragged them in with the option key held down, and that will bring them all together as one unit instead of every single part being its own separate things. Either group it first or option Click and drag it in there as you go. So when you do that, I dragged these all together, Put it in there Great. Holding down my option cakes. I don't know if they're grouped or not, but you can group them first and then dragged them in there. And here is my assets now, going and doing safe for the Web is fine. It works really good. This works so much better. And here's the reason why I congrats all my assets here and I could go in and I can choose the format that I want. So PNG, PNG eight s V g. Pdf and JPEG. Now, don't do it. Don't do it. Resisted. Okay, So I could go through and I can say, Hey, here we go. I'm gonna export this as a PNG and I take this. I have my scale right here. So I know the size of this because I can click on this and I confined out the size and my properties of how maney pixels this is, and I realized You know what? I've got this set two points. If I go back and click on nothing I could go through. And I can edit my units here to be pixels, and I can click on this, and I can see how maney pixels this is. Now what I wanna do is I wanna make sure that I scale this correctly here before I drag it into my asset panel. So that way I know exactly what size I'm dealing with. Right? So there's a few little things we gotta pay attention to. Now, if this is gonna be fine, 1 80 by 400 is gonna be fine. When I go in and I click on this, I can export this asset at the exact same scale as a PNG. Maybe I want it twice the size as a PNG as well. And then maybe I want to go in and export of PNG as well and make it, you know, a quarter of the size. So I put in to five. I could do a custom one like that are half the size right there. There we go. Now. What's the difference between the PNG and PNG eight PNG eights are going to be Ah, lot less colors. I'm gonna show you that through the save for web so we can get a little bit better understanding of these methods of you're familiar with PNG, PNG A. Um you know SPG, which is a scalable vector graphics something that is becoming more and more popular because now you can go ahead. And when you have a responsive website for I phone tablet or computer spg zehr Great. Because instead of exporting all your assets and all the different sizes for them to fit, you can export one and it's going to scale to fit your screen. So it s V G is a scalable vector graphic, which is really cool. So when I do an SPG, there is no size because it's scalable, So it doesn't matter what size you export it as, but I can continue on down and I can add scales of my PNG s or I can save them as a pdf pdf there is no scale either. So here it is. I can export all of my content here just like this, and I collect export and it's gonna say, OK, where do you wanna save these? And I'm gonna call this my exports. I click create. I choose that folder, I export everything. And if I go in here and I see what I've got right here, I can have everything on my desktop. And I could go in and see all the stuff that I've done. Andi can't find right there. There we go. There's my exports, Alright? And there's all my content right there. And I could just tap my space bar and I can see these nice and easy what they are. And it's like, Okay, this is like super, super, super awesome. There it is. All beautiful Vector graphics. Nice. Okay, a couple of the cool things with the asset export as well. If I'm dealing with IOS, it could go ahead and give me a whole bunch of basic sizes. If I'm dealing with Android, it could go in and I'm gonna have low, medium and high definition, extra high, extra high, def. So this will automatically go in and generate all these things that I'm going to use for IOS or Android. And it's like, Well, that's pretty awesome. It's like, yeah, it iss So this just makes it this much more simple as you go through when you dio and you can click on each and every one of your assets and it will remember the settings that you've had down here, so you don't need to change them and revert back to it. You could just simply go and connect your assets and go do that. Now, what's awesome with this? You drag your assets in here. What happens if you go beyond and you decide? You know what? Hey, I'm gonna change the color here. Did you see that? It changes my asset. So anything that I do to my original files, these air linked to it. Okay, so if I rotate this whole thing in, my asset needs to change. Look at that. It automatically changed it right there. I didn't need to drag it in there, and it's like, Holy cow! It's like, Yeah, I could definitely do that. And it's like, Great. Well, now I can update my assets as well. I could go in, and I could create a duplicate of this if I wanted to create a different one than I could go in and create like a different color and then dragged that in. That's how I could get unique assets from the same object. So it is really quite intuitive how this whole thing works. Okay, I want to talk about a little bit about the differences between PNG and PNG eight and stuff like this because things get a little bit weird when you start mixing vector with raster. And how does that actually happen? Well, from the videos that you've watched before when if I apply an effect to something here in this case, what I'm gonna do is I'm gonna add a drop shadow. So I have a vector effect with a raster based shadow here. Now, there's fundamental problems with mixing these things to you together. Specifically do to transparency J. Peg offer no transparency. But J pegs air out of, you know, out of the running, even though we have both a vector and raster image right here. So I'm gonna go under export and I'm going toe choose save for web here, and I want to show you how this actually works. In fact, let me go back here on I'm gonna choose file. I'm gonna choose export selection right here and you can see we could get a different export for screens, which is kind of a cross between save for Web and my ass, that export right here. Which is kind of interesting right there. But I'm gonna go under my export. I'm going thio save for web. And if I say this is a J peg which I'm never gonna dio No transparency, horrible, crispy, crunchy edges That's on Lee. Great for fried chicken. It's not good for images. I can save this. All is a gift. And, um, or a PNG eight. They're gonna be pretty much the same here. And you can see anything that is has a fill color of nothing becomes transparent. Fill color of white is going to remain white right here. But here's the problem with the PNG eight. They're great. They're really quick to load. They're going to go ahead and they're going to keep the look in the field and the quality of the content that we created looking really good. But a PNG eight breaks it down into eight bit color, which is 256 colors Now. The fewer colors that we have, we're going to go ahead and break this down. And then we get this dithering here which is very common with PNG s and gifts. But a PNG is gonna give you 256 mostly used colors or the new most numerous used colors in here. The problem with the PNG eight is that transparency have to be has to be absolute, which means if there is no Phil and it's completely free of anything, then it becomes transparent. But if it's got 1% color in it, then all of a sudden it's non transparent. So that's where a PNG 24 comes in or when we use the ax ss export. Just a PNG. We have a PNG eight in PNG. So a PNG in the asset export is basically going to allow us to create this super PNG. PNG 24 allows me to create the transparency, but it also allows me to have the translucency of this drop shadow so that drop shadow there. Now, if I was gonna have put this into a website and I've set my html on background to be a color and I've got my hex color in the background if I'm gonna do this drop shadow on this object. This drop shadow will now multiply over the surface of that color. But that only happens with the PNG 24 not a PNG eight. Ah, PNG eight is going to give me a white background wherever their heirs pixels. Okay. And if there's no pixels, then it's gonna be transparent. So that's one of the things that we have between ah, PNG and a PNG eight in here. It happens to be called PMG eight, which is going to give me that PNG 24 which is gonna be like a super PNG. And when I go to my asset export here on export is a PNG. This is a PNG super PNG. Just call that and then a normal PNG eight right there. So if I export this is a PNG eight, I will get that hail owing around there a normal PNG. I will not get that halo around there. So that's just the basic difference between going through and exporting that content at the bottom. We have our little symbol right here, the export for screens dialog box. And this is this is interesting because this is kind of like a cross between save for Web and then, um, going through and using the asset export. I'm pretty sure this came first before they went ahead, and they did the asset export right here. I'm not sure why you'd ever need to access this because we've got the asset exports screen. So we're pretty good right here to go through and, um, use our asset export right there. Pretty simple and straightforward stuff, not an issue whatsoever. Understandable if this is kind of the stuff you do, but this is the easiest way to get really good artwork. Translation out in multiple formats. Very quick, very easily. You certainly don't wanna take this and open in Photoshop and then begin to resize because once you re size and Photoshop, it's all rast arised. And then anything that isn't exactly the size is always going to degrade in quality. Even if you're making it smaller, it's still not gonna look good. So asset export is definitely what you want to dio. Now we run into other issues too, and this is kind of interesting as well. I may be working on a set of logos here and I'm going to copy this and we create a new document in here. And what I'm gonna dio is I'm going to create multiple art boards here. The reason why I'm creating multiple art boards is because I want to go in and I want to create different versions of this logo, right. So I'm using multiple art boards. Now, why would I go in and use multiple art boards here instead of creating four separate files? Well, I may want to go in, and the client has asked me to go in and giving me four different versions of this file right here. And so I'm just gonna go in and use my re color artwork, and I'm just going to create some different versions of these logos really quickly, and I just want to send them to it to send them to the client and seeing group goes altogether. And there we dio and creates, um, interesting effects right here. Now, if I created four separate files, the problem with creating four separate files is now I have to manage for separate files. And that may not be the best, because what happens if I have to make an edit or something. Then I've got to make sure I make the edit in all four files. So if I take four separate art boards here, I'm going to save this, um, Thio my desktop here. And this is gonna be my test tube going to save this and I'm going to go ahead and save This is an illustrator file their it iss Awesome. Just saving us a normal illustrator file. That's great. Okay, but I run into a couple issues with multiple art boards. First thing is, if I do a save as I save this as a pdf right here, then it asked me. Okay, which art boards do I wanna exports? I don't need thio save every single art board. I may just want art boards, you know, two and four. So I could just do to calm before and save that as a pdf and send that to the client right there. Okay, But if I want to save or export everything, then I've got one file with multiple art boards. Now, this proves to be a little bit interesting as you get into this content. And here's the reason why if you're not completely versed in art boards and how they work. And I send this off to the client because they would like to have these four logos and they would like to use them. And then they try to go ahead and they try to place a file into something else and say, I've got an in design file. They go under file place and I'm going to go ahead and import this test tube in here every time I place this. It's like I'm on Lee getting my first art board on its. Like Cabot, there's four art boards. So that's one of those things that people are not versed in art boards. When you go in and try to place it or you open up a PdF or something, it only shows the first one. But you were smart to put them all together because now you don't have to manage four files. You only have to manage one. But the drawback could be the end user may not understand art boards, okay, so if I'm in in design and I go in and I click on this show import options when I play something and I choose my object here, whether it be a PdF for an illustrator file this show import options will now allow me to go through each and every paste board so I can target a specific paste board and place that one instead of having to break this all apart. Now that's a big advantage, but you have to know that now you'll also. This is also a cool feature to when you go in and you save a PdF of something. If you have a multiple page PdF and you're trying to bring this in. The same concept is true in in design. I could take a multiple page pdf and show the import options, and I can then go through and scroll through the pages of a pdf instead of taking the pdf apart, saving out of separate pages its own document and bring it in right here. I can then go in and just bring in any page of a pdf by showing the import options. So whether it be a multiple page PdF or a multiple art board illustrator file, we now know how to manage those things when we bring them into other applications specifically in design. Now one interesting feature here with PdF's in Illustrator is that Acrobat and illustrator kind of use the same engine. And if you ever get a pdf file that you can't like, edit or you want to make changes to just try opening it up in Illustrator just going to file open and open a pdf Even if it wasn't created, maybe you've got a form that was done in design. You don't have the original file, but you wanna make some edits to it. Open up the PdF in Illustrator and there's a good chance to be able to edit a lot of the content and there, if not all the content, even though the form was never created in Illustrator. So another cool thing with Pdf's and Illustrator combined so we can ask s export our assets. We can go through and we can create multiple art boards, save pdf's as well. Now I've got something where I've got some type in here and I'd like to send this off to somebody else. Now, if I just save this and send them the illustrator file, guess what's gonna happen. The fonts are gonna be missing, and it's like, Oh, I didn't create the fonts, but we do have the ability of taking the fonts here. I'm going to type in creating outlines here. But guess what? Once they create outlines there, they can't edit that font anyway, So it's like, Okay, so what does it matter? Well, it matters because if you want to send this to somebody and you want to have them be able to edit it, you want to give them everything. The whole package, literally the whole package. So under the file menu, we have package. What package is going to do is is gonna save the illustrator file and anything any images that we've placed inside there as well as all the fonts to. So when I go through and do a package, this is very simple. If you're an in design user, you'll understand packaging, and this is design is much more robust with packaging than illustrator. But here we go. Copy All the links we'll link is if I went ahead and I placed an image inside here. Copy all the fonts. Absolutely. You'll notice it won't copy certain adobe fonts and the adobe fonts are ones that you have gone ahead and activated through fonts that adobe dot com, which is part of your creative cloud subscription. The reason why it won't copy that is because nobody ever gets a physical copy of those fonts. You're basically leasing them for the rest of your life. Now this is assuming that when you have the creative cloud and you're logged in, that you have access to these fonts just like anybody else that's running the newest version of Illustrator because they, too or subscribe to the cloud. So activating these fonts isn't a problem. If you open it up and say, Hey, the fonts aren't working you can simply click, Activate the fonts and it reaches out to fonts dot adobe dot com and activates them. What interesting thing here is it? Non adobe C. J K fonts. And it's like, What is that? I tell people. Well, it's a non adobe font that has the letter C or J or K in it. Not really. This is any non adobe Chinese, Japanese or Korean fonts. Okay, so if you use those and they're not adobe fonts, it will not package them up. Don't know why. Okay, So what, I'm going to dio I'm gonna click package and put that all together and it tells you okay, You know, if you are using fonts that they're they're going in and stealing fonts is not okay. And it's like, I understand that. But I also tell people it's like, Well, how do you think you get all these fonts? I know, but you should. So I'm gonna look okay. And there it is. I'm gonna show the package when it's done. There it is. And any fonts that I used are brought right there. There's my report. There's my illustrator file And there are my fonts, that air in there, right there for somebody to go ahead and use. And there, they say, is the complete package. Whole package right there. That's simple. Okay, now, if you outline all of your fonts if you were to select everything and do shift command Oh, and outline your fonts Great. Everything is good, everything is fine. There's nothing wrong with doing that. Couple things, though, that I do want to talk about about four. You send out a file and one of the things that I want to talk about was sending out a file is making sure that everything is broken down and do its basic form. And so there's certain things that we do want to make sure that things are done and taken care of before we send them. And a lot of this stuff is any type of effects that you have created here and gone ahead and applied to this on. Defects are going to be like anything from the effect menu here. So if I've gone in and I've done like a zigzag effect here and I've done something like this and I've applied this and there's my zigzag, this is an effect. So if I look at my outline mode, it's just a straight line. I normally go in, and I expand these items so that it actually is what it looks like. If I'm doing a blend or something like that, I'm gonna go ahead and I'm going to expand the blend. We've done some blends before here, So if I open up in a recent file here, where have I got that file? Recent? There it is grins and blends ingredients. If I have gone in and I've done any type of blend that's got you know, just this is what the outline looks like, and it's got a blend effect on there. I would probably want to go in and expand that they're so it breaks it down into its actual shapes and forms here and not have the blend because things could get a little bit weird when you've got effects outside of Illustrator. Okay? Especially when you get into place him into other applications and scale them. So I always keep a native file of all this and then anything that has any special effects or blends, I normally expand them. And then I take that right from there so I can not have any issues with the final files. Okay? And I don't have to go in if I have a path and something I don't go in. And I don't, you know, outline the path there so that it's no longer, uh, stroke. That's not gonna be a problem. Okay, but if you want to, you can go ahead. There shouldn't be any issue with that. Um, some of these things that you do expand it may change the appearance of them, so that may be an issue, but I just like to make absolutely sure that the file I'm giving somebody is going to be like the simplest one with the fewest of the problems. Now I save an original file that's completely edible, and then they save a copy of it, and I basically break down. Everything do. It's very basic, so that if I have to come back and edit something ideo but they get the file, that's gonna be the cleanest one of them all. So that's pretty much wrapping up all of your illustrator content being able to go in and asset export your assets. Their print package saves a pdf and then just cleaning up everything as you go.