All right, in this video we're gonna look at exporting our  images, things like photographs, okay? And there's background graphic here. You can see where we're gonna end up in this export panel. And then we're gonna end up with this lovely group  of exported awesomeness all. Let's get started. Okay, so first up, what we need to do is,  do we need to export all three of these?

We don't because what's gonna happen at web design phase is  that you are gonna import this one image, okay? So this background image here,  and you are going to reuse it in all three sizes  by scaling it rather than switching it out. There is a way of switching it out  for every different image,  but it makes your page load, uh, a long time. And it means you've got like lots  of different CSS files and assets going on. So typically what happens is you import this one file  and like we did in Illustrator, we just in web,  we scale it down for the different sizes, okay? For these different break points  or the different screen sizes.

So, um, what you do is you pick the largest one  'cause you want to, to, you know,  however big it's gonna get. You want to export that version  because um, that's gonna be true  of this background image on the desktop. That's as big as it's ever gonna be. And when you get down to say, these guys though,  we kinda worked out through this tutorial,  that actually the guy on the mobile has actually scaled up a  bit bigger than this guy, okay? He's a small percentage bigger. So we're gonna scale, we're gonna export, sorry,  this background image from desktop.

We'll export these guys from uh, mobile, okay? And then we'll look at the icons in the next one  because there's a slightly different process  for doing icons and logos. So first of all, we need to unlock our background layer  and we need to open up this assets panel,  or sorry, this asset export panel. You can do it from window and you can go to asset export. Okay? So what we're gonna do is we're  gonna zoom in a little bit.

I'm gonna select all three of these, okay? I don't wanna get this bit,  I just want all three of these guys. And all I need to do is select them all and hold them  and drag them into this window here,  which says click hold drag. Awesome. So that's gonna export that image for me. I'm gonna give it a name 'cause it's gonna  call it asset for at the moment.

So let's give it a good uh, search engine name. So whenever you are naming files, okay,  give it some good search engine names. So this is uh, Daniel Scott. I'm using hyphens and not spaces. When you've come to build this later on as a website,  the developer or yourself will be annoyed if there's um,  use spaces in them because browsers don't like them. They're like a full path.

Okay? So Daniel Scott portfolio, okay? And what kind of format? Um, in this case it's gonna be a jpeg. Now how to know which one to pick. Okay?

So when it comes to images, you only get  to pick JPEGs and PNGs. Okay? You can't use SVGs even  though we just finished talking about it. That's good for icons and simple colors and uh, logos,  but not good for these images. When should I use A PNG? And the JPEG pretty much jpeg the whole time.

If it's uh, like a flat rectangle image. If you, you need transparency,  say you've been into Photoshop  and you've masked things out, okay  and you want it to have like a transparent behind it,  then you're gonna have to move to p and g. Okay? So the problem with PNGs though is  that they include transparency, which is awesome,  but they make the file sizes a lot larger. So we'll do a little comparison. We'll export this thing as a p and g  and we'll add another one.

Okay? So we'll add another scale  and instead of scaling it up,  we're just gonna go back to the same size. So it's gonna be exactly times one,  but we're gonna do a JPEG version. And how high in this JPEG one it's up to you. Most of the time you can get away with a JPEG 50. Okay?

But you can adjust it in here to be any size you want. And think of this as the quality slider. If you move it up to a hundred, it's gonna be super perfect,  but probably a really big file size. So what we need to do is find a bit of a balance  of quality versus size. And I'll find jpeg, especially this background image,  it's not very clear anyway  because it's kind of washed into the background and,  but if it was a picture of the thing I was selling,  say I was trying to sell up, I dunno, a Bentley,  I would have it probably pretty high about 80 just  'cause I want that to be a beautiful image. Um, you know, as crystal clear as it can be probably above  what I probably need it for.

Okay, so you can go lower than 50, no problem. What we'll do is we'll export both of these. Okay, we'll hit export. It's gonna ask me where it's gonna go  and I'm gonna put it into, it's into our exercise files. So you can check these out  and I'll make a folder in there called export images. Cool.

And I'm gonna put them in there. Once they've done there, I'm gonna go off and check them. Okay? Export images and you'll  see the difference between these two. There's the p and g. Okay?

And it's 400, uh, and 50 kilobytes. And this one here is 120. So a lot smaller. And let's look at the quality versus the two. Don't worry about the gray changing in the background. We're more worried about the actual image itself  and there is no difference.

You might notice that it's hard to tell  'cause you're watching a video probably  and it's a, well, you're definitely watching a video,  but the quality, it might not be hd  where you're watching it, um, is  that we are using a low res image  with a watermark on it just so that, yeah,  I don't get in trouble giving you images that I've paid for. Okay? So it's, the quality's not perfect  because I've scaled that up 'cause it's a watermark version. But you can see the difference is  because I don't need, um, yeah, I don't need transparency. I don't need a PNG. Um, so, so that's that image done.

What's really cool about it is  you can kind of see them in there. They're kind of tethered. Say I decide that this top image, uh, remember we kind  of selected them at the top and we picked that green. Say you decide later on that the client  likes a more of an orange one. Can you see it's already there? Okay.

And I can click export again  and it goes off and updates them. Yep, choose replace. And it's a, it makes it nice once you've done it once  and the client comes back or the web developer comes back  and says, can you change or adjust  or can you gimme another version? You can keep, you don't have to kind  of like go through and name them again. You can see they've all been exported again. Okay, I'm gonna go back to my lovely color.

So, um, do you have to do them all separately? No way. Okay, I'm gonna bend this p  and g version 'cause I know I don't need it. And I'm gonna go through and say I want this  guy, uh, black Arrow. Grab this guy, dump him in that guy  and he goes, that guy goes, that guy goes,  can you do them all in one big go? Probably.

Um, asset 10. Cool. I'm gonna go through and name them all. Okay. So maybe Taylor, you could speed this up for me, Betty. Alright, now we're gonna click export, choose.

Off it goes. And hopefully now all of it's worked. The reason it didn't export them all is  'cause I had this one selected. Okay. Because it was highlighted, it only exported him. So I'm gonna select all of them  or maybe just select none of them.

So I've got nothing selected in there  and nope, I need to select them all. So I'm gonna hold shift and select all of these guys, okay? And make sure they're all selected. And now go to export, hit choose, hit replace. And nice. Okay,  there's this guy in here that I'm gonna get rid of.

Okay. Which is my p and g. I don't want him, but all of these guys have been exported. They've been appended with the minus 50. Okay. Which just says that's the quality.

I probably wouldn't do that. I probably can you see it says suffix, I don't like that. Okay, so I'm gonna go in here, delete all these guys  and then go into this thing. It's like the first one. Hold shift, grab the last one  so they're all selected and go to export, hit choose  and it's gonna go export them all  without that suffix at the end. Okay?

And there's my graphics,  they're all getting small enough. Nice. Alright, so that's how you export images. What I've just realized is I remember talking at the  beginning making sure export the largest one. Okay. And I totally just missed that.

Don't worry, you can export these ones. My only trouble with that is that I kind of deleted,  I used four of these images rather than the whole six. Okay. Novik drama. I would go through  and make these a bit bigger, maybe stick them off  to the edge here just as placeholders  so I can use them in this export window. Alright, that's us done.

Now let's move on to exporting SVG icons and logos.