Hi there, this video is all about exporting our files. We're going to look at three use cases. We'll do social media, we'll do web, and we'll do print. We've covered some of these in kind of specific areas, but I want to condense it down into one kind of usable video. Just so you know, these are the definitive rules for exporting the different formats. All in one handy place. 

So social media first, we'll look at just doing a single document, plus a multiple Artboard export. So this one here, easiest way and best way is 'File', 'Export', no, not File, Export, 'File', 'Save As'. Because what we want is a JPEG. So we're using just a regular old JPEG, not a Save for Web, because social media doesn't need to be condensed, and the data pulled out to make the file size smaller. We just want a really good looking image. I'm going to put that on the 'Desktop'. I'm going to put it in a folder called 'Export'. This one's going to be called 'Grow'. This is going to be 'July 19', let's click 'Save'. 

Quality Slider, because we aren't worried, we're going up to Facebook, Twitter, Instagram, and they'll do the image resizing, we don't want to do it for them. If you're uploading a thousand of these, you probably want to keep the file size a little smaller, but JPEG like that is a really good quality, and it's going to be ready to go. Let's say you've worked on something that has multiple Artboards. So we want to export these for our different social media platforms. So all we need to do is go to 'File', we're going to use this 'Export' option. And what we want is 'Export to Files'. I'm going to put them all in my 'Desktop' folder called 'Export'. Click 'Open'. This is going to be 'Illustrator Course', and you can decide on the format. It's going to be a JPEG. And the Quality Slider's at 8, I'm going to click 'Run', I could drag it up to 10. Successful, and now on my desktop I have, in the 'Export' folder, you can see there, it's got my Illustrator course, it's taking the rest of the file name from your Artboard names. So just make sure you're naming your Artboard, something that you want the file to be.

Let's move on to 'Print', 'Export', it's a nice simple one. Which one here? Let's say this thing, we've made it, we've fixed it, it needs to go out to a poster or a printer. What kind of file format should I use? The most versatile is 'File', 'Save As'. And in here you're going to use-- you can see in PSD, just leave them as they are. The file sizes are quite big, so what we're going to use is the Photoshop PDF method. The cool thing about that, if there is text or vector graphics, it will be retained inside this PDF, plus the file size is really small, and quite interchangeable in a format that is expected, I guess, it's easily emailed. Let's put it on my 'Desktop'. You see I've got two Export folders, just to mess with everyone. 

This one here is going to be called, 'Print Smoothie'. Thank you very much. And in this PDF settings, because it's going out to commercial print, just pick high quality print, and just turn that off. Why? Because that's going to basically just make a PDF, with this turned on, basically all you have is a PSD, super big, fully editable, all the layers, but it's just called a PDF. Can cause problems with printing rips, makes the file size super huge. We just don't need all this kind of Layer Masks and things now, we're sending it to the printer, they don't need that stuff, so we turn it off, then click 'Save As, and if we check it in my Export files, there it is there. 2.2 Megabytes, whereas this actual file here is about 50 Megabytes. 

Now let's do the last one, let's do Web Design. So in your 'Exercise Files', if you want to play along, in '17 Exporting', I've got this 'Web Design' example. I've got a slightly different version that we've been using before. So there's kind of two ways, let's say I like this graphic here, I'm going to make my Layers Panel nice and big so you can see it. So I got this thing called Image Books Layer, I'm going to right click it, and just say 'Export As'. Or we can use the Quick Export. That's the quick way of just getting a single layer out. And that's doing it one at a time, so I can decide, I want to be PNG, no, JPEG, do I want it to be 70%, I click 'Export'. 

So that's one at a time, which is quite cool, but if you want to do lots of them, we're going to use Adobe Generate. So we're going to take it even further than we did earlier in the course, so 'File', let's make sure that Generate Image Assets is 'on'. Actually I'm going to save my document somewhere, make it easy to see. So I'm going to do 'Save As', you don't have to do this. I'm just going to make a folder on my 'Desktop' called 'Generate', and I'm going to pop this in. So the way Generate works, is it looks to wherever you have saved the PSD, there it is there. It's in a folder called 'Generate'. When you turn this on, 'File', 'Generate', 'Image Assets', nothing really happens except you get this kind of folder. That's where it's going to stick all our images. So let's say this background graphic here, I want to save this out as a .jpg. Magically, in my Image Assets, there is my jpg. I can work my way through, and say, actually I want that to be a jpg as well, Image Books, you're going as a jpg, but I want to take it a bit further. 

What I'd like to do is, I want this to be a really low quality version, or at least I know that it looks good at 40%. So just type 40% at the end. And it has to be this syntax, can't have other spaces, it has to be .jpg, and then straight into the 40%. A cool thing about that is it will do Image Books at a 40% quality. Let's do it at 10% so you can really see that it's actually doing what I say. It's regenerated it, and you can see it's pretty pixelated. So you might be happy that this one is at 40, but this one here, because it's background, we can get away with like 30%, a bit lower. 

Now the syntax we're going to cover quite a bit in this course, and it's hard to remember the syntax. What has to go where? So if you Google 'adobe Photoshop layer syntax', you'll end up here. It's the top results, so adobehelp.com, and here is the big long version. I'm going to give you this skinny version, but it has all the syntax written out in here. Before we finish the syntax, what I want to do is, let you know that you can export groups, because at the moment I've got this graphic and this graphic, they're two separate graphics. So I could name them but they'd come out separately. So I can select both of them, create a group, name this group 'logo.png'. And let's say I want it to be an 8-bit, a 24-bit, or a 32 bit PNG. You can just add that there as well, or just leave it as a normal PNG, which is 8-bit. Hopefully here, that group gets exported. 

Now if we check, you can see mine's not appearing. Sometimes this happens, sometimes you just need to turn Generate 'off' and back 'on' again. There's my logo. Leave that in there, it's an issue that I had, you'll probably run into it as well. You can see, I guess, another thing I want to show you, is that, can you see it grouped them together to just name that group. So let's look at some different syntax, just know that you can do three of them. You can do PNG, you can do gif, and you can do jpg. You can see, there's my gif there. What else can you do.? Let's say you're doing responsive design, and you need a couple of versions of this background. Let's get rid of the 30%, I'll just try and keep it clean.

 So I got bricks, but I want a smaller version. I want a 50%, the 50% goes at the beginning with a space. What it will do is it will generate whatever size is in the document, a half sized version. So we go to bricks, there it's there now, it is, how big is it? This one here is 603, that's half of what it is in this document, but often when you're doing responsive, what you want is, you want a comma, you want two of them. So I'm going to copy this. You could put 100% in, but you don't really need that, so a comma, then a space. And what you need to do is, these need different names, because we're going to create two files now. A comma means making two versions of this. This one's going to be my, maybe at 2x, or maybe this one is just number 2, or Hi-res. So one's 50%, one's just normal, and hopefully now I've got-- have a look, close it down. There's bricks, and there's bricks hi-res. You might be using the x2 suffix. You can add that there too, so that's resizing it.

Let's look at another way of resizing it. So instead of doing 50% you can actually say, I would like it to be, let's say 200 pixels across, space, X, space, '200 x '. So 200 times, and let's say you need it to be 200 width, but you're not too sure how high it is, just like make it whatever height it is proportionately. So 200 wide, and if you use question mark, '?', you have to use the lowercase x, you have to use all these spaces, it will guess the height for you. So now in here I'm going to have bricks, just 200 pixels wide. Copy that, I'm going to have another one that is 500 pixels wide. This one is going to be called, maybe '500'. Hopefully now, I got my syntax right. There's a 200 version, and there's a 500 version. Cool, huh? 

Now let's say you want to take that to another level, because you need a high res and low res. You don't want to have to be copying and pasting, and changing the names. So what we're going to do is we're just going to call him 'Bricks'. Man, is that Bricks? Having a bad day, well just a regular day. Anyway, I've got Bricks, and let's do a few other ones, we've got that one, so Image Books is done, let's do some of these PNGs. So there's my 'icon-print', this is going to be .png, this one here is going to be my 'app.png'. These are all going to be .pngs. You should totally name your layers as you go. 

So we could go through all of these, right? So we've named all the layers, Adobe is generating them all as we go, there's my icons. Let's say I need two versions, I need a high res and a low res. You might need 50%, 100%, 200, 300 for all the different mobile phones, or media queries. So what you can do is make a new layer, doesn't matter where it is. I'm going to put mine to the top of my group here. So it's easy to find, and you have to use this syntax, you have to say, default, high res, you don't have to say high res. this is naming your folders, whatever you say here, could be 'The Dan' folder. I'm going to create a folder called 'High Res'. It knows it's a folder because you put a forward slash, '/' just in front of it. Have to say, Default, have to put a forward slash straight afterwards. And let's look what happens. 

Just a blank layer, Photoshop gears. I'm going to put all them into this default folder for you, which is not that exciting until you put two of them in here. So you put a little '+', and you have a low res version. Needs a little slash '/' at the end to say I've got two folders. The only trouble now is there's nothing different about these two. It's generating two folders but they're exactly the same, exactly the same size. So what we can do, this low res folder here, remember, when we did our scaling earlier we put 50% in front of it. It's the same here, I want everything in this folder to be 50% the size. Let's have a look now. 

So you can see Bricks, a whole lot smaller than the bigger Bricks. Cool, huh? If you want to get even more nerdy, you're like, there's no way to get more nerdy. You can say, straight up to here is, I want you to append it with the '@2x'. Which is really common in Web design and Mobile design, as an indicator for the high res version. So now I've got all these @2x files. Now don't worry, if you're like, "That blew my mind, he went far too fast." What you need to do is type it out once and just do what I do. Like I can never remember that all off by heart. I just open up a previous file that I've worked on, I copy it out and I paste it into this. Or I just go to-- I just Google, 'layer syntax for Photoshop', and you can kind of pull it from Adobe website. 

All right, we got a bit nerdy there at the end, but I hope you can see especially if you are a regular web designer, you need to get Assets out for either yourself, building websites, or for your developer. It's really good now especially if you're making amends, you go through, and say, actually this thing here needed to be switched out to a different color. And I've got my Bricks @2x, and I've got my smaller version now. All ready to go, super quick, super easy. It's got to put that kind of initial effort in there. 

All right, that is a nice lengthy exporting files from Photoshop. I hope you learned something new, let's get on to the next video.