Hi everyone. We're gonna dive deep in the asset export panel. Sounds lame, but it's super useful for getting kind  of any old file out of Illustrator Print, web. Any sort of digital experience has loads of perks. It's gonna be exceptionally good for the people  who are still fighting on using the Export Safer Web Legacy. It couldn't say stop using it anymore.

Today's the day we go for the asset export panel. Alright, let's get nerdy. Alright, so, uh, advanced tips and tricks for exporting. Uh, let's say I've got this logo here, I want  to right click it and we can go to this option here. It says collect for export. Okay, and we, this is three parts.

Okay? So one, two, and three. Okay? I'm gonna select them all and you can right click them  and say, actually let's collect them as a single asset. Okay? You can group them first, that works as well.

But you can just click single asset. I'm gonna give 'em a name 'cause you're watching  and normally don't name anything. Now the other option in here is you can right click  and say click for export multiple assets  and it's gonna break them into three parts,  like the three different bits. And I don't want it for this case, so I'm gonna undo that. It's really handy for these guys. Okay, so these little icons here, okay,  that's a single shape, that's a single shape.

This one here is broken on purpose. So let's grab them all right, click it  and say let's export them as multiple assets. And you'll see they, this comes through. Okay, one, that one's good. This one here is broken into two bits. So if you do want to export multiple  assets, make sure they're grouped.

So I'm gonna undo that this guy here, instead  of it being two parts, I'm gonna group them. Okay? And now I'm going to go, you go click for export  and go multiple assets. Super handy. I'm gonna rename them. You wait there.

Alright, so rename them. And the nice thing about this now is we can go down  and say, all right, I want them all to be, what do I want? I want them all to be PNGs. Or we can go through this list here  and say, actually I want them to be maybe SVGs. And you're like, maybe they need to be PGS as well. I can say at a scale they say scale,  which is really comes down to like when you're exporting  for mobile kind of, uh, web development.

I end up using it more for just exporting files  to my web developer or to the designer  or or to some other place. Okay? I can say I want P and Gs. I don't want 'em to be four times the scale. I just want them to be the same size. Okay?

But as in a p and g format,  let's have a look at maybe doing it for a JP as well. I'm gonna go you maybe 80. I'm gonna keep it their size. It was, and then the cool thing about it  is I can hit export. Okay? And if it's grayed out, you gotta say,  I want this one to come out.

Okay? Or I'm gonna click this first one,  hold shift and grab them all. And I want to export them all. I'm gonna dump them all in my exporting folder. Hit choose. And in here you have what is quite a messy but useful, okay?

I've got SVGs. So I've got, uh, the donor  and the three icons all ready to go. I can go to one x and one x is like the, the size  that I picked, but it's got my JP in here, my PNG, my jp,  my PNG of the, so it's the same  thing in two different formats. And I can kind of now go through  and say, all right, do I need this to be A PNG or a jp? Okay? And it might be that you need transparency.

So you're gonna go for the p and g, you're like, oh,  is the p and G smaller than the SVG? So what's that? 13 kilobytes. SVG for the location is a lot  Smaller for SVG and SVG is that vector format. So it is scalable, it is smaller,  it does really well on websites, it prints really well. So I'm gonna say, I'm just gonna use SVG.

Now the real power for the export panel above you,  if you're like, I'm still gonna use the export safer web,  the perk is  and the kind of, you know, the,  the actual naming is helpful,  but where it gets really helpful is if I go in here now  and I say, actually we've changed the logo. Okay, we've picked a different font, the clients come back,  everything's adjusted. Not gonna be this font. Okay, did you see or you didn't,  'cause I'd pointed out  Kinzie here, this is actually adjusted. It's actually like a dynamic connection. So let's change this thing down here, zoom in,  you keep an eye on the asset panel, I'll make it here.

So it's easy if we go in here  and say, actually I want this to be like longer. Can you see this adjust? So it's, you know,  and you don't have to re-export it or rename it  or group it, put it in its own uh, app board,  all that sort of painfulness. So the asset export panel is super easy  and I can just say export again  and it's just gonna go over the top of all of those things  and everything is brand new. And if I go to location, it's that kind  of weird looking one. Okay?

So that is the perk for the asset panel. You get to name it and when you update it, this updates. Now let's do a quick little run through of these options. You probably know p  and g, it is a RA format, so it's made of pixels. Let's have a quick look. Okay, there's this one here.

It is made up of tiny little pixels. I can zoom in on my Mac here  and you can see it's made of little pixels,  but from far away it looks sharp and it has transparency. So it is good for anything that is transparent  that needs to be ra. So generally images that need  to have a transparent background. If it's an image that doesn't need a transparent  background, JPEG is the go. Okay?

'cause it's a lot smaller when it comes to images,  but it doesn't have transparency. We probably know those two already. What is less used is let's go to add scale,  but really we mean format. Okay? You can go into here  and say actually I want S-V-G-S-V-G is vector, okay? Scalable vector graphic.

And it is what's generally used  for anything that is this vector format from Illustrator  that needs to go to a web  or like I use it for my vinyl cutter that I cut stickers out  for T-shirts and stuff. And the embroidery machine follows the path very well. So SVG is perfect for that small scalable vector. One format that you might not be aware of is uh, web P. So I'm gonna make another scale,  but really, I mean I want just a different format, okay? And Web P, super useful.

It is Google's kind of image file format  and basically it's the best of p and g  and JPEG combined compared to a jpeg. It's very small and very good quality. Probably on par with it,  but actually it can get a bit smaller than JPEGs. So if you're going for a website,  web P is the format to go for. The cool bonus for it is that it has transparency  as well like p and Gs. Okay?

So it means if you've got something like this  that needs to be seen through into the background,  you can use WebP but you can also use it for,  let's say this big image here. Actually grab this one, let's  Add it. You can  bonus rounds, you can just drag it in. Okay. Rather than right clicking and saying click for export  and let's say that I do this and let's export this  and let's go to there. Have a look.

So I've got this image here. So JP P and g web P. So a really high quality JP is 64 kilobytes. P and G here is just as good looking but it's bigger. Okay? The web P though, can you see he wins in terms of file sizes  and the quality is comparable to a really good jpeg.

So everything that I do for my website is always Web P. 'cause it loads faster. Google likes it AKA  search engines like it. So I use it quite a bit. Um, there are a few other options in here. These ones here, if they're grayed out for you, these are  for used when you are creating 3D in Illustrator  and exporting it, you can use some of those formats.

Alright? Some of the tips  and tricks for the export panel is  that I hate when they all end up in folders everywhere,  especially the sizing folders  and they're like, it gets a bit messy. So I'm gonna delete that and delete that  and I'm gonna delete all this as well. Actually, let's delete everything Dan, and let's go  to Illustrator. I like to go to the options. Okay, no, not there.

I like to go to this little option down the bottom here  and say, do not create sub folders. Open the location after export. I'm down with that. And this brings me to a interesting window. Basically the window for uh, actually we can't do it. So we are in the export for screens.

You can switch to assets, okay? And basically you get the exact same screen. Let's close that down as this. This is like the window version of it. Like that's always open, okay? Then there's the file export for export for screens,  and then you can switch to assets.

Okay? But you end up doing the exact same button thing. They have the same controls, except there was  that extra option in there  that said don't put them into folders,  but they're the same thing. Let's have a look. You see it's put  that thing I had selected and it's just put them all in one  folder rather than all these sub folders you will find,  depending on what you're doing, sometimes folders are good,  sometimes they're not. Okay.

What I like to do often is I know  that they're all gonna be web piece. So I do that, okay? And I just grab them all, export them  and they all end up in the same folder. Another helpful tip is that let's say that you do have kind  of like the thing that you do the most. So SVGs and web ps, okay? And you do them at twice the size they need to be just  for some scale, okay?

What you can do is you can say instead  of opening up a new document and going through  and turning it on and off, you can go into here  and say, actually I'd like to save uh, a preset, okay? And I can call this my Dan preset, okay? And it just means later on if I close this down  and I change it to something, I can go back in here  and say, actually let's go to the dam preset  and just kind of gets it back to the web P and SVG. The last little thing about this is sometimes let's have a  look at, let's grab the big donut. Okay? Let's say that I do mask this, okay?

I say you are going to be masked inside of this. If I do export this, you can hit plus drag it in  or right click and hit export  Single asset. Hey, it's got this and it's cropped, right? But if I export it as an SVG, just this one here,  let's call it a donut, okay? And let's export you. Click choose.

You can see here's my donut, SVG. And what you'll notice is that, well, what you won't notice,  let's open it up in Illustrator. Okay, don't worry. So I've opened that SVG in here. You'll notice that if I go to wire frame mode,  can you see the stuff is all in there. So if you are cropping it down for like say file size  for a website and you're like, I want to get rid  of all this stuff, you'll see  that it's actually not cropped, it's actually kept it  and it's just kind of like in a cropping window,  which can do a couple of things.

Um, sometimes I export s VGs to go into something called  Fusion 360 that I do my 3D modeling in. And it hates cropped, it hates this mask, okay? It just freaks out and goes,  what the heck is this masky thing from Illustrator? And if I send this to my web developer, he'll load it,  but it'll be a bigger image than it needs to be. So what ends up happening is you need to kind  of do it a little bit more purposefully if you are in the  hunt for file image size savings. So let me show you the rectangle  and instead of doing a clipping  mask, let's select them both.

Okay? And I'm gonna go to my Pathfinder,  let's open up the bigger pathfinder. And there's one in here called crop. I don't use it very much, okay? Because it's kind of uh, what do you call it? Destructive.

Okay? It's gonna trim all the outside of it off, okay? If I click off, click back on and I go to Y frame mode. Can you see it's not a mask inside of this, it's not a donut  inside of a mask, but the bit's kind  of cropped off that I can't see. It's actually got rid of them so it's very destructive. But now when I add it, okay, and I say you get over there  and I do donut two  and I say you are exporting, let's go.

Let's have a look at the difference. Let's open up both of these in Illustrator. Okay? Donut one has all the stuff. Donut two doesn't have all the extra stuff around the side. Smaller doesn't freak things out.

Just a little handy tip if you are using SVGs,  oh my goodness, that was quite the  asset export panel experience. I hope you found some tips and tricks in there. And yeah, the asset export panel for the win,  definitely don't use the Safer web,  even though I know you're probably still gonna use it. Don't let me catch you. Alright, that is it. I'll see you in the next video.