How to Save Your Illustrator Files as Jpegs for Websites
alright in this video, we're going to look at exporting illustrator files for web Okay, we're gonna look at Jpeg and PNG s doing full outboards and little individual things as well. Alright, let's get started. First up, we've got a file open called exporting web ai which is in your exercise files, we want to do two things. Right, I've got this kind of art board over here, so I got two outboards are gonna kill my outboard tool. There's one and two. So we're looking at to kind of versions of exporting this one, I just want a big Jpeg, I just want a Jpeg. They can email or stick up on a website and this one here, I want to export the individual pieces. So let's do this first one. Okay, there's two different techniques. So we're gonna go to file and we're gonna go to export and we're gonna go to this one that says export as okay, export as allows us to down the bottom. Okay, let's move it up a little bit. I'm gonna put it in my desktop on my illustrator files and in here I can pick a forma...
t. Okay, so PNG Jpeg is probably the best for this particular image because there's no transparency. Okay, it's just a nice flat rectangle, Lots of colors. Jpeg is perfect. I'm going to say use outboards without that, it just exports everything that you can see which you might like, but I'm gonna say use art boards, I'm going to say just the range of one. Okay, just the first one click export now in an option here. Okay, you can decide on the quality now, have a look like you want to be around the 10 to 8 mark. Okay, but just look at the file size at the end of its huge, you're like, oh man, I'm going to lower it down and it's just a balancing act of file size versus the quality. Somebody down here, it's gonna look pretty bad. Okay, so My advice is around about eight gives you a kind of a nice balance between the two now, when it comes to resolution, this is also another balancing act. If it's going to print, which we're not trying to do here, it should be 300 if it's going to a traditional kind of screen or website 72 will work. Okay, because screens are changing quite a bit. There's high res and retina and high dP I there's some other things you might kind of cut the middle And go 150. That's what I would typically do. Okay, so have a little look, see what you've got as a result. Okay, every usage is a little bit different, click OK. Kick back, relax. It'll make you a jpeg. So let's have a little look and in my desktop, where are you? The files and where's my web? Okay, It's called it web Oh one. Okay. And yeah, it looks good. It's fine size. It's really small. File size. Okay, so that works for that. These guys are a different story if I use the same method, I'll get this whole art board. Okay. And all of these guys together, I want them as separate icons. Okay. I might have designed them for a website or for iphone app. Okay. And I want them all to be separate. And what we do is we open up something called the window and we go to the assets export. This is really handy. I'm gonna move it over here. So what I'd like to do is watch the foot drag the all in there. He is there, he is kind of like his own little individual asset. I can click on him and call him al. Okay, Same with the crown. Easy peasy. Call them crown. You get the idea here, you're gonna, we're gonna run into a problem in the second. I'll show you what it is. Alien Casper alien. Okay, this guy here, I'm going to say all of you guys, I'm gonna drag them in and we'll, we get kind of four parts. Okay, so I'm going to undo that. And what happens is, is if they're not grouped, they assume that they're all separate objects. Okay, so, and this guy here is getting dragged in and because they're not grouped, it's kind of exporting an eye and an eye and that's the kind of middle bit of this like hood and everything separate. So you get the idea. So with him selected, we're going to go over here and go to group now if I drag him in, he's now just one old ninja ninja cool. Now with a more selective actually with them selected in here. Okay, you can see it's blue on him. Blue blue, blue. Okay, so now I was selecting lots of them by holding down the shift key. Okay, They all go blue. So click on the first one, hold shift, click the last one. They're all selected and I can decide what kind of format now you can export these as PDFs here, which is cool. And but in our case like Jpeg won't work for us because the Jpeg will put in the background, we want a transparent background. Okay, So we're gonna go to PNG or SVG. SVG is kind of new. So talk to your web designer or app developer if they want SVG? S most, it's getting more and more popular. Okay. But PNG is probably the most typical. Okay, so, but you might decide actually, I'm not sure. I'm going to send them both. Click on this thing and says add scale and instead of scale we're going to say actually just want an SVG as well. So you're going to export two versions. Let's click export. Okay, It's going to ask you where you want it. I'm going to stick it on my desktop illustrated Class files, I'm going to make a folder in here called web export and click choose and off it goes, let's see what we've got. So and find a way of export. Cool. So let's go to icons. I've got two aliens ones, a PNG ones in SVG. You might also want to jPEg, so you're not sure. Just put them all in there. Okay. I got a crown. Okay. I've got my ninja and I've got my owl. Okay. So the naming came through from the asset panel and you can decide on what kinds of formats you want. Alright. That is exporting for Web from adobe illustrator. Alright, I will see you in the next video.