Please subscribe to watch this video
Illustrator - UI & Web Design using Adobe Illustrator
Daniel Walter Scott || VIDEO: 36 of 45
In this video we're going to look at exporting our images, things like photographs, and there's background graphic here, you can see that we're going to end up in this ‘Export’ panel, and then we're going to end up in this lovely group I've exported. Awesomeness! All right, let's get started.
So first up, what we need to do is, do we need to export all three of these? We don't, because what's going to happen at web design phase is that you're going to import this one image, so it’s background image here, and you're going to re-use 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 a long time, and it means you've got 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 for these different break points, or the different screen sizes.
What you do is you pick the largest one, because however big it's going to get you want to export that version, because that's going to be true of this background image on the desktop, it's as big as it's ever going to be. And when you get down to, say these guys though, we kind of worked out through this tutorial, actually the guy on the mobile has actually scaled up a bit bigger than this guy, so a small percentage bigger, so we're going to export this background image from desktop, we’ll export these guys from mobile, and then we'll look at the icons in the next one, because it's a slightly different process for doing icons and logos.
First of all we need to unlock our background layer, and we need to open up this 'Asset' panel, this 'Asset Export' panel, and you can do it from 'Window', and you can go to 'Asset Export'. So what we're going to do is we're going to zoom in a little bit, I'm going to select all three of these, I don't want to 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 one here, just watch, click, hold, and drag. Awesome! So it's going to export that image for me, I'm going to give it a name, let's go ahead and call it 'Asset 4' at the moment, so let's give it a good search engine name.
Whenever you're naming files give it a good search engine name, so this is 'Daniel-Scott-- I'm using hyphens, and not spaces, when you come to build this later on as a website, the developer, or yourself would be annoyed if there's spaces in them, because browsers don't like them, they're like a full path, so 'Daniel-Scott-Portfolio'. And what kind of format? In this case it's going to be a JPG. Now, how to know which one to pick? When it comes to images you only get to pick JPGs and PNGs. You can't use SVGs even though we just finished talking about it, that's good for icons in simple colors, and logos, but not good for these images.
When should I use a PNG and a JPG? Pretty much, JPG the whole time if it's like a flat rectangle image. If you need transparency, say you've been into Photoshop, and you've masked things out, and you wanted to have like a transparent behind it, then you got to have to move to PNG. Problem with PNGs though is they include transparency, which is awesome, but they make the file size a lot larger, so we'll do a little comparison, we'll export this thing as a PNG, and we'll add another one, so add another scale, and instead of scaling it up we're just going to go back to the same size, so it's going to be exactly times 1, ‘1x’, but we're going to do a JPG version. And how high in this JPG one? It's up to you, most of the time you can get away with a JPG50, but you can adjust them here to be any size you want, and think of this as a quality slider. If you move it up to a 100 it's going to 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 find JPG, especially this background image, it's not very clear anyway because it's kind of washed into the background. Say there was a picture of the thing I was selling, say I was trying to sell a Bentley, I would have it probably pretty high, at about 80 just because I want that to be a beautiful image, as crystal clear as it can be, probably above of what I probably need it for.
You can go lower than 50, no problem. What we'll do is we'll export both of these, we'll hit 'Export', it’s going to ask me where it's going to go, and I'm going to put it into our exercise files, so you can check these out, and I'll make a folder in there called 'Export Images', and I'm going to put them in there. Once I've done there I'm going to go off and check him. 'Export images', and you'll see the difference between these two, there's the PNG, and it's 450KB, and this one here is 120, so a lot smaller. And, let's look at the quality versus the two. Don't worry about that 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 because you're watching a video probably, and it's—Well, you're definitely watching a video, but the quality might not be HD where you're watching it, and it's that we're using a low res image with a watermark on it just so that-- I don't get into trouble giving you images that I've paid for. The quality is not perfect because I've scaled that up because it's a watermark version, but you can see, the difference is because I don't need-- I don't need transparency, I don't need a PNG.
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 tid bit, so I decide that this top image-- Remember we selected him at the top, and we picked that green, say you decide later on that the client like some more of the orange one, can you see it's already there, and I can click 'Export' again and it goes off and updates them. 'Choose', 'Replace', and it makes it nice once you've done it, and once the client comes back, or the web developer comes back and says, "Can you change, or adjust?" or "Can you give me another version?" You can keep, you don't have to kind of go through and name them again, you can see, they've all been exported again. I'm going to go back to my lovely color.
So, do you have to deal with them all separately? No way. I'm going to bin this PNG version because I know I don't need it, and I'm going to go through and say, "I want this guy." Black arrow, grab this guy, that guy, there he goes. That guy, in he goes… Can you get them all in one big go? Probably. And, 'Asset 10'. I'm going to go through and name them all. So, maybe Tayla, you could speed this up for me, buddy.
Alright, now we're going to click 'Export', 'Choose', off it goes, and hopefully now, all of this worked. The reason it didn't export them all, it's because I had this one selected, because it was highlighted I only exported him. So I'm going to select all of them, or maybe just select none of them. So I got nothing selected in there, and-- oh, I need to select them all. So I'm going to hold 'Shift' and select all of these guys, and make sure they are all selected, and now go to 'Export', hit 'Choose', hit 'Replace'. Nice!
There's this guy in here that I'm going to get rid of, which is my PNG, I don't want him, but all of these guys have been exported, but being appended with the -50, 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. So I'm going to go in here, delete all these guys, and then go into this thing, select the first one, hold 'Shift', grab the last one, so they are all selected, and go to 'Export', hit 'Choose', and it's going to go export them all without that suffix at the end, and there's my graphics. They are all getting small enough. Nice!
All right, 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, and I totally just missed that. Don't worry, you can export these ones. The only trouble with that is that I cannot delete it, and it’s four of these images rather than the whole six. No big drama, I would go through and make these a bit bigger, maybe stick them off to the edge here, just these place holders so I can use them in this 'Export' window.
All right, that's just done now. Let's move on to exporting SVG icons and logos.