Hi. In this tutorial we're gonna look at exporting logos  and icons, uh, from Illustrator for web or app use. Okay, so when we're dealing with uh, SVGs,  we talked about it in an earlier video,  it's super easy, okay? You open up your assets panel, okay? Your your asset export panel  and you grab the things you want to be SVGs like, uh,  there's some of these social icons here. Click 'em, drag them, double click 'em, give 'em a name.

So this is gonna be called social Facebook. Make sure it says SVG down the bottom here  'cause I want it to be a nice crisp SVG graphic. Okay, this one here. And you go through  and keep adding all the names. Okay? So that's it for exporting those.

You click export and you'll have a bunch of SVGs. Let's say though that you are exporting these  and you're using p and gs, okay? Because you need the transparency, okay? So you don't want a jp, you want transparency so  that this icon here can, you can see, you can see kind of  around the edges of the circle there. So p and gs is the way you're going. Now there's something called pixel perfect.

Now it doesn't work on every single object, um,  but what it does is because a p  and g is not vector, so it's not this kind of crisp edge,  it's actually made up of these little pixels. Just like this image here. If I zoom in close enough, you can see this image is  actually made up of all these little cubes  and that's how p and g is rendered. Okay? So what we need to do is make sure  when it is getting rendered, it's getting rendered as best  as it can in those little pixels. So, um, I've got these little kind  of like example graphics over here.

So what they are is, first of all, we need to go to view. And in Illustrator you can fake pixels. It's not really changing the way you document works,  it's just kind of showing you a, yeah,  a preview version of pixels. And if I zoom in now can you start to see  when I'm in normal view, it's nice and crisp and victory,  but if it's gonna be a p  and g, it's gonna look something like this. And what happens is if I've got any of these,  like say this line, it's only one pixel wide,  but I've positioned it kind of, so it straddles two pixels. Can you see it goes either side of it  so it doesn't know which way to put it on.

So it gets this kind of like murky blurriness. Same with this L here, same with this. Um, this guy here. Um, so what happens is, yeah, when I export it,  it's gonna be just a little bit fuzzy  and that happens quite a bit from Illustrator. So what we are gonna do is we're gonna select them  and go right click and say make pixel perfect. And what it does, it actually moves the lines.

So be careful, okay, it's made it heaps crisp,  better it is actually physically moved them,  it's moved them a little bit to the right  or half a pixel to the right. You can kind of tell with this,  I can easily tell if it's gonna be pixel perfect. See at the top here the width is 92.5 pixels. You can't have a 0.5. They have to be whole numbers. So you can manually do pixel perfect by doing that.

You can see now the sides are nice, okay? And if I do the top, okay, 26,  I've actually shrunk it down a little bit,  but now it's not trying to straddle or pixel. Okay? It's definitely down the line. Now you can see, oh, where'd you go? There you go.

And this L here is the same. Okay, fonts are a little bit weird. This one's not gonna be too bad. Watch this. If I right click 'em make pixel perfect,  he actually looks better, but it's actually  trimmed the bottom of it up a little bit. Can you see it used to be a bit fatter down the bottom can.

So be careful when using pixel Perfect. Now pixel perfect works great for kind of horizontal  and vertical lines. Okay? I always those mixed up anyway. Um, but when you get to things like these types of shapes,  there's no point messing around with pixel. Perfect.

Okay, with these guys, watch this. If I go to Pixel Perfect, kind of cannot do it. Okay? Just too many curves can't work it out. Um, some of these ones have some straight lines. If I click on him and I go make pixel perfect.

Has it made it better? I think it's made it worse. It's kind of pushed them all over. There's just too many shakes going on. So pixel perfect, great for like really cube kind  of straight lines and fonts. Um, so make sure the pixel perfect  before you drag them into your asset panel  for export as a p and G.

Okay? And what we are gonna do is just to finish off,  is we'll add all of these guys. So grab all three of these  and you go, actually it's grouped them all together. It's not what I want. You're in there,  you're in there, you're in there. And I'll go and name them in a sec.

What else needs to go? That's gonna be typed in? These both need to go. Yep. Yep. And what else needs to go?

The arrow needs to go. Make sure when you're finished with pixel  preview to turn it off. Okay? You don't need it on after or afterwards. Sometimes it's hard to grab these guys. You gotta zoom in and you go eh,  and you go and what else?

This guy here, there's another way of doing it. Instead of trying to drag them in, just select it once. And there's one in here that says, um,  this one in here says add selected. You see it just comes across awesome. Uh, so we've got them all in there. Now I want to select them all.

So I'm holding shift and clicking them all. 'cause what I'm gonna do is I'm gonna kind  of make sure I'm okay for both options. So I'm gonna have an SVG plus A PNG. We're ignoring scale at the moment. We're just gonna go to a times one, okay? PNG.

So we're gonna have both of these. Now what I should do is go through and name these, okay? And before I export them, I'm gonna go do that now. And Taylor's gonna speed this up with this magic editing. All right, go Taylor. Alright, done.

Now we're gonna hit export  and hopefully they're all gonna export. Let's go check it out. Cool. So I've got an arrow, two versions, I've got an SVG  and a P and g. You can see the file sizes. The S VGs actually only just a tiny bit bigger, but the p  and g here is yeah, just a little bit smaller.

But this one here is that size tiny,  you can kind of just see it in there. And the SVG though is scalable massive. Okay? Same with the logo here. The logo's a lot bigger as a jpeg. Okay?

Actually those are the wrong ones. What I want is weary logo, okay? SVG two, kilobytes three. So no real big difference, okay? Except this one here is massive. Great.

Alright. That's how you go through and export your PNGs  and your SVGs. If you are exporting icons and logos.