Lessons
Lesson Info
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?
Class Materials
Bonus Materials with Purchase
Ratings and Reviews
Eugenia Van Bremen
I really think this amazing class is misnamed. It does show how to use Adobe Stock to find vector art, yes, but it shows so much more about how to use libraries as well as a ridiculous number of time-saving tips for streamlining your Illustrator workflow. And the vector art used could come from anywhere. I personally don't care to use Adobe Stock, which is why I nearly passed up on watching this class, but man am I glad I decided to check it out. Jason is a delightful teacher, clearly very excited to show people how to work faster and smarter and his tips and techniques for working faster are outstanding. I knew quite a few of them already, but there were also many that I didn't know and that will make a massive difference to how I approach working in Adobe in the future. This really is an outstanding class. I can't recommend it enough.
Tomas Verver
Adobe Stock has a lot of pre-made templates styles you can use in your design. You can customize the content and make nice variations. Jasom explains that you not always have to start from zero. I agree that that the possibilities with assets are endless. Adobe Stock is just one libary though.
a Creativelive Student
Even though this course is described as focusing on Adobe Stock, Jason Hoppe offered so many timesavers and shortcuts—I had to purchase the course to remember them all. I found this course very helpful and full of shortcuts that promise to streamline my workflow.
Student Work
Related Classes
Design Projects