Lessons

Lesson Info

3 Kinds of File Export for Photoshop Social Media Web & Print

Hi there, this video is all about exporting our files. We're gonna look at three use cases, we do social media will 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 art board export. So this one here, easiest way and best way is file export and no, not file export file save as because what we want is a J Peg. So we're using just a regular old Jpeg, not a safer 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 gonna put it on the desktop. I'm going to put it in a folder called export. This one's gonna be called grow, This is gonna be July 19. Let's save quality slider because we aren't worried, we're goi...

ng up to facebook, facebook twitter instagram, they'll do the image resizing. We don't want to do it for them. If you're uploading 1000 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 outboards. So we want to export these for our different social media platforms. So we need to do is go to file and we're going to use this export option. What we want is export to files. Put them all in my this stock folder called export click open. This is going to be my illustrator course and you can decide on the format. It's going to be a Jpeg and the quality sliders at eight run I could drag it up to 10. Successful. And now on my desktop I have in the export folder you can see there. Okay, I it's got my illustrated course. It's taking the rest of the file name from your art board name. So just make sure you're naming your outboard something that you want the file to be. All right. Let's move on to print exports the nice simple one. Switch 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 theirs and in here you're going to use, you can see in PST s 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 can see I've got to export folders just to mess with everyone. This one here is going to be called Prince smoothie. Thank you very much. Okay, 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 malaya masks and things. Now we're sending it to the printer, they don't need that stuff so we can turn it off, then click save as and if we check it in my export files there, he is there 2.2 MB or is this actual file here is about 50 MB. 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 designer example, I've got a slightly different version that we've been using before. So it's kind of two ways. Let's say I like this graphic here, I'm gonna make my latest pal nice and big so you can see it. Okay, so I've got this thing called image books layer. I'm going to right click it and just say export as well. You can use the quick export. That's the quick way of just getting a single layer out. Okay, and that's doing it one at a time so I can decide I want to be a PNG no, jpeg. Do I want it to be 70% like, like 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 gonna 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 gonna save my document somewhere, make it easy to see. I'm going to say that you don't have to do this, but I was going to make a folder on my desktop called generate and I'm going to pop this in. Cool, so the way generate works is it looks to wherever you've saved the PSD there is, there is an affordable 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 dot jpeg magically in my Image assets. There is my Jpeg. Okay, and I can work my way through and say actually I want that to be a jpeg as well. Image books, you're going as a jpeg, 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 but at least I know that it looks good at 40%. You just take 40% of the end and it has to be this syntax okay, can't have other spaces. It has to be dot j p G And then straight into the 40%. The 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 I don't know 30% the lower. Now this syntax we're going to cover quite a bit in this course and it's hard to remember the syntax. Okay what has to go where? So if you google, adobe, Photoshop layer syntax, you'll end up here. Okay. It's the top results, adobe help dot com And here is the big long version. I'm going to give you the skinny version but it has all the syntax written out in here before you 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 slip both of them have a group name, this group logo dot PNG And let's say I wanted to be an eight bit or a bit or a 32 bit PNG. Okay you can just add that there as well, we'll just leave it as a normal PNG which is a bit and hopefully hear 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 and you can see I guess the thing I want to show you is that can you see a group them together to just name the 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 gift and you can do jpeg you can see there's my gift there. What else can you do? Let's say you're doing responsive design and you need a couple of versions of this background. Okay so um let's get rid of the 30%. Let's just try and keep it clean. So I got bricks But I want a smaller version, I want a 50%, goes at the beginning with a space. What it'll do is it'll generate whatever sizes in the document, half sized version. So we gotta bricks there is 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 response of 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 and a space. And what you need to do is these need different names because we're going to create two files. Now the comma means making two versions of this. This one is going to be my maybe at two X. Or maybe this one is just number two or her is So once a 50% ones just normal and hopefully now I have got to look close it down there's bricks, it's bricks high. Res you might be using the at times to suffix, you can add that there too. So that's re sizing it. Let's look at another way of re sizing it. So instead of doing 50% you can actually say I would like it to be let's say 200 boxes across space X. Space. So 200 times and let's say you know 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 lower case X. You have to use all these spaces. It will guess the hype for you. So now in here I'm going to have a bricks that is 200 pixels wide. Okay, 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 version and there's a 500 version. Go on now let's say you want to take that to another level. Okay, 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 gonna do is just going to call him brooks. Mm bricks even man, Is that bricks having a bad day which is the regular day. Anyway, we'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 PNG So there's my icon for print. This is going to be dot PNG this one here is going to be my app dot PNG. These are all going to be dot PNG 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 But let's say I need two versions. I need a high res and low rez you might need uh 50% 100% 203 100 for all the different mobile phones or media queries. So what you can do is make a new layer. It 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 Hi res you don't have to say Hi res, you can call this that this is naming your folders. Whatever you say here could be the dan folder. I'm going to create a folder called Hi res. It knows it's a folder because you put a forward slash just in front of it. I have to say default have to put a forward slash straight afterwards and let's look what happens. It's the blank layer Photoshop gives. 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 plus and you have a low reservation. Everybody needs a little slash at the end To say I've got two folders. And the trouble now is there's nothing different about these two Genered two folders but they're exactly the same. Exactly the same size. So what we can do this low res folder here. Okay, 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. Alright we're there. Let's have a look now so you can see bricks hold it smaller than the bigger bricks go on. If you want to get even more nerdy you're like there's no way to get more nerdy than that. Okay you can say straight up to here is I want you to append it with the at two X 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 at two X files Now. Don't worry if you're like that blew my mind. He went far too fast. All you need to do is type it out once and just do what I do like I can never remember that all of my heart, I just opened up a previous file that I've worked on. I copy it out and I paste it into this or I just go to the I just google layer syntax for Photoshop and you can kind of pull it from the adobe web site. Alright. We've 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 at times too. And I've got my smaller version now, all ready to go super quick. Super easy. You just gotta put that kind of initial effort in. All right. That ends nice lengthy exporting files from Photoshop. Hope you learn something new. Let's get on to the next video.