Export Items for Web
How do you go ahead and save these? Well, if I do something like this, I can always drag this entire content right into my library, which I can then drag into InDesign if I want to place it in there as well. I have all these assets separately, too, 'cause anything that I drag in here is gonna be available in all the other Adobe applications. If I'd like to save this as a PDF, I could always go into the file menu and choose Save As. And I could save this directly as a PDF in the save folder. I could click Save. And I could save the PDF. And then I could open it up and see the PDF and send it somebody if they didn't have Illustrator, and there it is on my desktop, and I could see all of my content right there. There's my PDF file, looks good, retains all the vector qualities, all that good stuff. Nice, that works beautifully. Now, what about that little cell phone thing that I was working on, where I had my little content here? And, I've just used this as a layout but now I need to just ...
actually export these out separately. What do I do, do I copy paste them into a new document? Nope, what we're gonna do is this. Under the window menu we're gonna have our Asset Export, and this is what you're gonna use when you wanna export items for the web. I've used the template here as a basis for kind of my idea in size, but now I wanna take this and I wanna be able to export these 'cause I'm gonna send these to my web developer, I'm gonna use these on my website or my mobile device. So, here's what I do. I grab my content, and what I want to do is I want to then take my content that I'm gonna export, one items, 10 items, whatever, this is all a set of items, I'm gonna put this in here. I'm gonna drag this into my panel right there and I'm going to export this, but no, I didn't want those all separately. I'm gonna group these together, there it is, group them together so they come in as one. Didn't group them and they're all separate elements, I don't want them to be separate elements, I want them to be one. So I'm gonna group those together first, drag them all in here, and now these are my little buttons or elements that are gonna go on my mobile app, okay? Now I wanna export these. I know these are the right size based on the template that I used when I set up my file, so I could very easily go in and click on one of my assets here, and because I'm using vector art and I'm using flat color, I'm using line art and type, I'm gonna wanna go in and I'm going to want to go in and export this as a PNG. I don't wanna export it as a JPG. If it's an image, I'm gonna use a JPG, but if it's going to be type, or artwork, or flat color, I'm gonna use a PNG. And I can go in and control the size at which I'm gonna export this, so it's gonna be exactly the same size. Well, if I need to export this at different scales, I can add different scales here, and I can say twice the size, three times the size, half the size, whatever, or specify an actual size it's gonna be rendered at. So I can go through and render a series of different sizes right from my Asset Export. So I can have multiple ones that are gonna be a certain width, you know, say this one's gonna be 100 pixels, this one's gonna be 150, based on all the different places where this is gonna be displayed. I do this, and then I can go through and I can click Export, and it's gonna export this asset in all these different sizes as PNGs, and I export this. I can specify a folder. Choose, it exports everything, and now when I go here to my web icons, there are all of my different assets right there at the different sizes just like I wanted them to be. Nice, huh? Now I can deliver these to my web developer, 'cause I do not do web, and I can could take all these assets, done. I have my Illustrator file, and I've been able to go in and export all of these, nice and easy. If this were an image, I would export these as JPGs but they're not, so I'm gonna export these as PNGs. A really cool feature is this. If you are really cutting-edge, and you have these vector graphics, and you wanna make them look absolutely awesome, you can actually go in and export your files as an SVG. An SVG is literally a Scalable Vector Graphic. So if your website is cutting-edge and you want to be able to make it completely adaptable to any device, you can go in and you can do it a scalable vector graphic so it will look perfect at any size and any scale without having to render it at a very particular size. Nice, huh? Absolutely. So scalable vector graphics, awesome. 'Cause this is all vector. Type is vector, the little leaves are vector, the shape is vector, it's all great, so. Pretty cool. So the asset export thing is something that's definitely really nice to have. Now if I just went under the file menu and I choose export, and I exported my file, I could export this as many different ways. But the problem with this is if I export this file, export for screens here, I can go through, but it exports the entire thing for me. So if I want a static image, that's not really what I want. So it's great to be able to go through and take each asset individually, go through and change those. Great thing with this is if you go in and you edit this content right here, you go through, it automatically updates your asset right there. How awesome is that?