2.2 Export Images

Hey, welcome back to XD code with Avocode 3. In the last lesson, we got ourselves all set up with Avocode using the desktop version. We took a look at the web version and also the plug in that you can use with Atom or VS Code. In this lesson, we're going to go through the first step of the actual conversion process, and that is exporting all the images. If you want, you can export images as you go piece by piece through a design. But I find it's easier to just export them all at once at the beginning, then the job's done. All right, so working from the top, the first thing we're going to export is this background image here. This is a photo, so it's going to need to be a JPEG to keep the file size as low as possible. So what we're going to do is choose the Select tool. I already have this image selected but just to show you how to select it for yourself and let me just deselect. So you want to hover your mouse until you see a green outline around the image that you're trying to select. And then click and then we can see that it selected this layer here. If you want to double check that you have selected the right thing, then you just toggle the visible status of the layer on and off. So that shows us that we've got the right thing. Now, all we need to do to export this is a JPEG is right click on the layer and choose Export as JPEG. Now this will give us the opportunity to decide what name we want to have the image using. And we're going to go with 1bg just as the default, that's fine, it's already set to export as a JPEG. And it's going to go to our Images folder that we set up before in our project folder, so just go ahead and hit Export. And now if we look in the Images folder for our project, there is our 1bg image, so that's exported just fine. And if I hover over this, you can see at the bottom left corner of the screen, it's exported as 103 kilobytes. Which is decent enough for the type of image that it is. All right, now the next image that we're going to want to export is this arrow that we created in the course before this one. And this arrow was put together using vectors to make sure that we could export it as an SPG, so we're going to do the same thing again. We're just going to click on the image and select this layer. So just toggle this on and off to make sure we've got the right thing, which we do. So now we can right click and we can choose Export as SPG, so, we'll just, give that a better name. We'll just, call it down arrow, and now we'll export that one. And once again, there's our arrow, so, that's all working really well, all right, now, I'm going to switch to the hand tools. So that I can scroll through the design a little bit quicker, we don't have any images in these sections, not until we get down here. We want to export this tablet here with the shadow area around the bottom. We also want to export this laptop, as well as this background image that's just showing through subtly in this panel. Now the tricky thing is, if we export this tablet image as it is, we're going to end up with an image that has a very large file size. And the reason is because we've got a photograph in here that you would normally export as a JPEG. To make sure that an image with a whole lot of detail can be compressed as much as possible. But we've also got a shadow down here that needs to have a transparent background, which we'd normally use a PNG for. So if we export the whole thing as a PNG, it's probably going to be maybe 400 kilobytes, which is a bit too much for one image. On the flip side, if we export it as a JPEG, then we're not going to have the transparency that we want around this shadow. So what we're actually going to do is export two separate images. And this tablet is in layers in our design, so I'm just going to grab the Select tool and we'll have a look at these layers. So you can see, we've got a Glare layer, just open this up a little bit, and some various overlays. Actually, that's all in a group, the Glare, and if we go down into this elements area here, this is where we can see the actual tablet. So what we are going to do to solve our problem here is first turn off the image, which we can do just by turning off this Mask Group here. And we're going to export this whole tablet image as a transparent PNG, then, we're going to export just the content of the screen. And we're going to use CSS to position these two one on top of the other. So that they look like they are a single image, but they're actually two different images. Using the best image format for the kind of image that they are, which will let us significantly decrease the file size. All right, so to make this happen, we're going to need to turn off all of the elements around this area. To make sure that we don't accidentally catch any of them in our exported image. So let's just collapse this tablet group for now, we'll turn off everything in this six group here, for our sixth panel. And we're also going to need to turn off this site background, sorry, wrapper background rather. So down here, we're going to turn this layer off. We also need to turn off the main background, which we can do here. And then finally we've got a measure up here, so we're just going to turn off both of those measures for now. Now, if we select the entire tablet, we can see the size of the PNG image that we're going to come out with. So we're going to switch to our Slice tool, and we're going to draw out a slice. The same size as our tablet, I'm actually going to adjust this slice a little bit just to make it a little easier to work with. You can see the size of the slides down here, 586 by 622, actually, I want it to be 540 by 600. Just trying to keep this down as trim as we can, and then I also want the slides to be centered on the tablet. So this circle here represents the center of the slice right now, and it's offset a little bit. So it's going to be easier for us to align this if it's centered, so it doesn't have to be perfect. So somewhere about there is going to be just fine, just as long as it's roughly centered. So now we just need to turn off the screen content so that's not showing up in our image. We'll switch to the Select tool, and we'll select the image here, that's in this Mask Group folder. So we'll turn that off and our slice is ready to export, so we'll choose the Slice tool again. Select our slice, right click and choose Export as PNG and we'll name this image as tablet_bg, we'll go ahead and export that. Now, just to illustrate the point, we'll turn our screen content back on. And we'll do another export to compare the file sizes of what we end up with. So we'll select our slice again, we'll choose Export as PNG again, and we're going to change this so that it says tablet_full. So export that PNG, and now while we're at it, we'll also export a JPEG of the screen content. Now we're actually going to delete this slice, just to get it out of the way to make it a bit easier to do this next slice. Because what we can do is select the Slice tool and then hover until we get that green outline around the image here, and then click. And that has automatically made a slice for us. We're just going to zoom in though and make sure that the edges are fine, so hold down control and roll on your mouse wheel. So I think we probably also, we don't want to exclude that border section there. I think we're going to include that border section there, hold down space to use the hand tool for scrolling. We've got this border included as well, which is good, because you can see there's some color variation in there. So that's really part of the image. And now we'll look up at the top as well, that's all good, and just look on the right side. Yep, so that slice is all good in the right position, I'm just going to reset that to 100%. Now, we'll export this one as a JPEG, and we're going to call this tablet_screen, and so here's the images that we just exported. Let's have a comparison of the file sizes of each one so we can see why this is worth doing, so here's our full size tablet. So I might have been a little bit overzealous when I estimated 400 kilobytes. I think I might have been remembering the size of the laptop images if you export the whole thing as a PNG, so this one is 204 kilobytes. Our tablet image is 32 kilobytes and our tablet screen image is 70 kilobytes. So between the two of those, we've got 100 kilobytes versus 200, twice the file size for the whole thing exported as one image. All right, and speaking of the laptop, now let's do the same thing for the laptop image. We'll actually turn back on these background elements, so that we don't forget to do that later. Grab the hand tool and scroll down, and we need our laptop image here. Now if you did the last course as well, then you'll remember that we also included in this design a full width version of this image. To help with the crashing of responsive functionality. And we also included this little note from the designer to the developer, to remind them that their image is available. So let's just use the Select tool to select something in this panel, so we know which one we're working with. So we're in panel seven, and here's the laptop that's clipped. We actually want the full width laptop, so we're going to turn that layer on. And then we'll turn all these other layers off, so there's nothing in the way of our export. Now we can do the same thing again, so we'll choose the Slice tool, and I'm going to click on this image. We'll just scroll in and make sure that the edges are all correct, that all looks fine, just double check all the edges, okay? So, that's all good. Now, we'll export that image as a JPEG. And export it, now we need to do the same thing as we did before for our whole laptop, so where are we? We've got our full-width laptop, I'm just going to move this into the center a little bit. Which is actually coming up quite massively, so I think we've selected too much. All right, so we'll just select the elements area instead. We can see the shadow falls there. So that's about the area that we want to make sure we capture, and for this one, we want a slice that's going to be 1,200 pixels wide. Let's drag that out to 1,200 pixels, it's a bit finicky, but we'll get there, to 590 pixels high, and then we want to roughly center. So you only need a little bit of space above the laptop. But you need to make sure there's enough space below the laptop that the entire shadow is included. And by the way, the reason that I know the dimensions in advance here is because I already did some experimentation. To make sure that the whole shadow would be showing in this image without any excess space on there. So we wouldn't want an extra empty areas that's just adding to file size for no reason. So let's just do a full export with the photo included as well, we'll just do a file size comparison again. So I'm going to right click and export as PNG, and it will say, laptop full, and then we'll export that. Now let's do another export, of course, actually, before we do that, we need to turn off the photo that we don't need. Now we'll go Export as PNG, change the name again to laptop_bg, and Export. Now we've got our background image, our laptop screen image, and the full image for comparison. So the full image has a file size of 432 kilobytes, so that was what I was remembering before. The background image by itself is 34 kilobytes, the screen image by itself is 204 kilobytes. So in total, 230 kilobytes versus 430 kilobytes. So once again we're roughly halving the amount the amount of file size that we would need for these images. So we're done with our comparisons, so let's just delete these four images to make sure that we don't forget to do that. Now, we've just got one more image to export and that is the background image for this section. So let's turn everything back on again, just close down this, turn off our full width laptop. Turn on the clipped laptop and all of these content elements. And then while we're at it, we'll also go right down to the bottom and reactivate the site wrapper and site background. Actually, I jumped the gun a little bit. We do need to still have these elements turned off, so that we can make another slice to export this area here as a background. So, we're just going to turn off the laptop, the button, and these pieces of text. Now we'll grab the Slice tool and we can actually just click directly on that selection. Sometimes using the Slice tool, if you get that green outline, then you can just click and automatically have a slice generated. Sometimes you can't, so pretty much just try it out and see how it goes. Now, by the way, to make sure that you're exporting what you're trying to export, have a look up in the preview window here. That will let you know if you've got the layers that you're trying to export. If you've got the transparency that you're trying to export, and so on. So for this one, we just need to export a JPEG, so we'll just go Export as JPEG. So we're going to name it seven_bg, and then we'll Export. And then that is all the images that we're going to need for our entire site. In the next lesson, we're going to go through and create a bunch of CSS variables that can be used in the coding. So you can see down at the bottom right here of the interface, you've got this area for variables. And it's really, really handy, Avocode can actually go through an entire design and insert variables into the code that it generates. Wherever you decide that you need variables, so for colors, or font families, or sizes, or anything else. And before we move on, we just go back to the Select tool and turn on all of our elements that we hid here. And now we're ready to carry on. So we're going to go through and set up a bunch of variables so that they're all accessible as we go through the coding process. So we're going to do that in the next lesson, I'll see you there.