Lessons

Lesson Info

Export Images & Assets

Hey there, this video is all about exporting our assets to our developer, whoever is going to be building this thing in a format that they need it. So we've done our design, we've done our testing client loves it. Users love it, it's ready to get built. So we're gonna go through a couple of ways of exporting just the upwards, super simple, then exporting single images that we might need to get out, then we're going to look at batch exporting, okay. Taking lots of things to go out and exporting them all is the right format with the right syntax ready for our developers or engineers to start building it. Alright, let's jump in. Alright, so let's cover all the different ways. The first one is, I just need to send out all of these outboards just as single flats. Okay, so file export. And we can either have the selected outboards or just all the outboards please. And you can decide what kind of format you want as a full page. It's probably best as a pdf or a jpeg, depending on what you want...

to do. If I get a jpeg. Okay, I need to put it somewhere. I'm gonna put it on my desktop, I'm gonna make a folder called exports. Okay. And I'm gonna click on that. Let's go and check it out. So on my desktop, I've got exports. And in here you're like, whoa, because I've got so many outboards and you can see bad dan, lots of that last chunk where we were just going through and just kind of banging through all the different prototyping and micro interactions. I didn't name the outboards. Okay, So it's obviously really important to name the outboards because you get to this stage and you're like, what are these guys all mean? So you just do the same thing, You can go back through here and just start naming them. Okay, double click on them, give them a good names or you can do it over here in the it's probably easier doing it in here because then you can tab down, I'm just getting my tab key on my keyboard so you can just keep typing and maybe copying and pasting. Okay, that's easy. Let's say I want to get out just single images. So let's say you've made something and it was like, can you send me that file? So let's jump to our homepage and let's say I want, so we need this to go over. It might not be like for development, it might just be that you need that, you know, somebody asked for it, you just need it. So I'm gonna unlock it so I can select it all. That's not the right shortcut. It's command l unlock or control L on a pc. So I'm going to select all of this and let's say I want to export it. Okay, So if I go to file export, I've got selected, but because they're not in a group, look what happens. I'm going to make a new export folder on my desktop, there's going to be a new one called export singles. Show you what happens. So I'm going to export them as JPEg for the moment, click export. Let's check it out. So desktop exports singles. Whoa. Okay. So they're all separate little pieces and that's kind of cool, I guess, but it's not what I wanted in this case. Okay. And you can also see it pulled the names from the layers panel. You see these are the bits that I have selected. The naming is important. So I want to send it out as one unit. What I can do is select it all and just group it remember, command G or control G on a Mac. Then we can start using the shortcut. Okay. Command E or control the NNPC. Just just to export that one selection. And now, because it's a group, it could be grouped or a symbol doesn't matter. We should have named our group before we came out. This one's going to be called Piggy bank and I'll stick it on my desktop in a folder called bad naming as well. Singles to final. Final revisited. Nice. Let's have a little look. Singles too. And I've just got one image. They're all together. Just select them all. Group it exporter and you can you can do that kind of nice and fluid because you do a lot of this. Command G. Command E and we're out of here. Cool. All right, so do that. Let's look at batch exporting because a lot of the time you're sending this off to a developer to get made and you want to send out all the files, You don't have to select each one of them individually. Okay, So what we're going to do is we're going to decide what needs to go out and what doesn't. So if you're new to kind of development, things like images need to get saved out but and these icons and the logos, but this big green background will be done in code. Same with the buttons and the text. They'll all be coded for either a website or maybe X code for an app depending on how it's getting made, but they'll get coded. So the developer will want some images and they'll want some code which we can get from extreme will do after this so that they know how to style things like the button and this weird background swoosh and stuff. But let's get all the images because I don't want to do this single E. So what you can do is select on this and say, I know you need to go out over here. I'm going to give him a good name. This is my german, my hero man. Okay, I'm going to enable this option here. Mark for batch export even click on that. I think really changes except when I click on this outboard. Okay, I'm gonna go into the homepage, double click the actual icon and you can see only this guy's mark for back batch export, I'll do one more so I'm gonna run group this and I just want this woman here, she's going to be marked for export. Can't talk today. Okay, click on this and you work your way through and decide what you want out. Give them good names, not like background. I'm going to speed this up and just work through and do a few more different bits and pieces. Okay. Not the buttons but the icons I'm going to get into here. I'll see you in a sec. All right, you're back. I didn't do a whole lot. And so to batch export things, you've marked at least one, maybe more. Okay, then you can go to file, you can go to export and there's one called batch. Okay. And same sort of processes before. Okay, so I'm going to go, you, I'm going to say I would like export export batch. This could create. How's it gonna go out, let's say it's going to go out via PNG or SVG depending on what you need. You really want to talk to the developer if they're going to be using SVG or PNG s we'll talk about this export four in a second, but let's just see what comes out. Okay. And on my desktop, I've got batch and in here. Can you see those guys came out, come on ready to go and say you're working and you slowly will surely take everything that you need and you kind of end up making adjustments. So this guy gets a whole lot smaller, I can just go to my batch export. Okay. And do it all again, I don't have to go and click them again or name them. It'll just go over override them. Okay. And in here, you see, my man is a lot smaller. Not that you can really tell. Okay, but doing it once, just makes it super easy later on when you have to kind of update it or change anything. So I said, we're to have a little look at, I'm going to undo that actually want my trying man back, we're going to look at the file export and we're going to look at, we'll go to batch again. But what we wanna do is we want to look at the different formats now. Again, you're probably going to be using PNG SVg or jpeg. Okay, so Suggs is becoming more popular. They're not used everywhere. PNG s are probably the most common, especially if you're developing for say IOS, which is Iphone or the android phones, let's have a little look at these different options designs, kind of like straight up how it looks on the screen Web. Okay. Websites often have more than one size to even. Okay, so we talked about this way earlier in the class, remember when we started importing images, we made sure that we had like the largest size we could because it's at this stage where it's going to export the one that's exactly here. But it's actually going to export one that's double the size. Okay, for hi DP I screens or what's what apple calls, retina screens. Let's just have a little look at this. So it's going to asset export both of these and I'll stick it on my desktop in a new folder called web exports. Let's have a little look. And the cool thing about it is if you're not a web developer or web designer, just this is the kind of stuff you'll be expected to send over. But if you are you can see it's already added the syntax. So this is the kind of like a smaller version and then this is the it's a little hard to see in the video, slightly blurry, amazing quality, slightly blurry. It's not really blurry. It's just stretched up so that will look perfect on screens that need it. What you can do is you can ask the browser to check the screen and say do you need uh this double resolution for your fancy screen? So both the screens I'm working on would display this image but say my old pc laptop sitting over there, it would display this one keeps the file size is smaller because there's no point loading the double resolution on a screen that can't take it. Okay. We might be getting a bit nerdy about images here but it's just really handy to send this to your web developer. If it blows your mind you can do a lot of web designers do and just just ignore that shouldn't but have a look at the at two X. It's kind of most common way of doing it at the moment. Alright, let's have a quick little look at a couple of the other ones. So if you're developing your app, okay so it's the app down here, same thing go through, you mark the bits that you need to export. Okay, tag it anything else in here. The weird thing about this is there's not a one other thing on here that needs to get exported because everything else can be done in code. Okay. And what else needs to be drawn? So these icons here. Okay we'll export we'll take both of these. Give them great names which I haven't. Okay, I've totally done that backwards. Good work. There we go. Alright so I've done my names and I want to batch export again. So I'm gonna go to file export batch, let's ignore the web thing at the top here let's just say we're just building an app so let's say we need to send out PNG s we need to send it for IOS. What it's gonna do is it's going to do 12 and three times android even needs a what's a 123456 versions Androids, there's just some phones out there that are so that the pixel ratio is so dense that they need like these super huge, like 20 million times the size images, you're just not going to be able to support that because the, the stock image just wasn't big enough. But send them all, it'll create all the images we need. Let's have a little look. Let's do Andrew um Iphone IOS, export into desktop. New folder exports I wish. And you just see the uses their correct formats for that, which is different for a website. Let's have a look. IOS, you see it has this third option. Okay, so at three x talk to your developer as well because some of these, they might just want an Svg you might do to exports one full as Benji's and one full as SVG is, you can't kind of tag them to say I want you to export as an Spg but you as a PNG at the moment, you just got to export it twice to separate folders, send them both. All right, so that's exporting images. One last little tip you can do is we've marked a few of these objects for export. Um this guy here is gonna go, so we've exported some of the batch items. Sometimes you want them to go out plus the flats and not have to do it separately? Remember we did file export upwards. Okay, so you want them all the little bits plus you want to show them where in relation on the outboards that go, so you can say is actually I want to grab all of these and so you grab all your outboards, you can do them all here. Okay. You can actually just mark these guys were not the baseboard as can you drag across, you can't, you can painfully click every single one of these. What will end up happening is it will include it in that batch export run run out of patience. We're going to go export batch and it's got this top new folder, we're going to do the one that's plus the outboards, so it's going to do exactly what we did a second ago. So all the IOS plus all the outboards, let's have a look. You might find this out for, you might not, IOS probably is going to be a bit weird because you have three sizes. No wrong one plus that board. Okay, so I've got all these art boards that I don't need three sizes for, but it just helps the developer know where they are. So I don't need all of these ones. I just need. Is that more helpful? It's not, Is it not when you're doing IOS because you're gonna have to go through and delete the ones you don't need but for design. Perfect. It's a little tip that you might find useful in this particular workflow. It's worse. We'll be exporting to many sizes, but you get the idea right. Alright. Friends that is exporting your assets to a developer. Hang around for the next video where we talk about sending out the code, okay. That we can send off so we can build our app or website. We'll do that using something called design Specs. Alright. I'll see you in the next video.