Alright, so let's learn about Adobe Generate. Just the, the skinny on it is that it is really useful if, like me here, I've got a desktop, tablet and mobile design that I've done for a website. Just a simple thing and I need to export all these kind of separate images out, uh, the logo out. I wanna try and do it quickly and efficiently. That's where Adobe generate can help. So what I've done is I've saved this to the desktop or see there, there it is there.
Okay. It's called raw cycles UI psd. And all I need to do is turn on Adobe generate. So it's file generate image assets, turn it on and absolutely nothing happens. Okay? Until we start naming our layers.
So see this layer here, okay, it's actually a kind of a compound clipping mask thing going on, but I want to export it for my website or for my web developer or my social media post, whatever it is. Um, all you need to do is instead of calling it layer one, so double click the word layer one, I'm gonna call it hero. I'm gonna call it dot PG and that's the key. Adding the dot PNG at the end. And look what happens magically on my desktop. This folder here has been created.
Okay? It wasn't there before. All it is is, can you see it's the same name as my file, except it's got hyphen assets at the end and inside of here, look at this. Here's my hero. Do PG all kind of smush down to a usable web format. Cool, huh?
Where it gets really cool is, let's say for no good reason, I'm going to invert the colors on this hero image. I'm just gonna invert it there super quick. I don't have to do anything and hopefully on my desktop here, can you see it's updated Now it's an inverted color. If I go back into here and I'm gonna undo that, come back, it's back to normal. It's just exporting as I work super quick, super easy. What's really cool is I can go in here and let's say I want a p and g, but I also would like to see what it looks like as a hero.
jpeg. I just put a comment in here. The syntax is quite important. It's a little hard to get used to. I'll give you some tips and tricks through this video, but I'll also show you the kind of master list for it all, but hero, PNG comma hero jpeg. Here return.
And now I have two versions. There's a JPEG and A PNG. And if I inverted, uh, here you go. We've got a PNG and a jpeg all inverted. You can start doing cool things like comparing file size and quality of those two. You can see the JP is way smaller and just as clear.
So I'm gonna come back in here and I'm gonna say, actually I just want the j JP please. And look, P and g's gone. JPEG's there. We all know when we're exporting jps we want to deal with like, you know the quality slider that you get when you're exporting. You want like a 50% JPEG or a 70%. You can do that here as well just by putting the letter afterwards.
So the letter, the number, so if I put in a two, it's gonna be a 20% JPEG and probably look pretty bad. So have a look. It's re-exported it, it's teeny tiny, it's a little bit pixelated. So I'm gonna go back into here and say like my, I don't know, my default for images for websites is 60%. So just put in a six at the end of jpeg. There he is.
I got a jpeg, it's 60%. It's good enough. The file size is good. Cool, huh? You can do all sorts of things. I'll go through maybe one more.
So let's say I want a jp, I'm gonna compare, I'm gonna have hero one and I'm gonna have a comma and then I'm gonna have hero two. But this is gonna be a jpeg. That is, we're gonna experiment with uh, 10%, which is just a one. You'll see. I'll get two graphics one and a really low quality one there. So you can have multiple file names as well.
Uh, let's get, let's say that I like the jpeg that is at 60%. What I wanna do though is I need to make sure it's a specific size. Okay, so I've got a, I've got, it needs to be 200 pixels wide buy question mark because I'm not too sure how high it is, what the relation, I know exactly it needs to be 200 pixels y, but I'm not sure how high it is. You see the syntax there, you need to have spaces in between there. The syntax here has to be exactly how I've written it. 200 space X space question mark.
Space hero one because it's a little hard to get used to, but do it. And let's have a look. I should have 200 pixels of wide jpeg. Cool way. Now one last thing I'll do is you can actually export groups. I find this is super handy When say there's a group here, it's actually a combination of a few different things.
There's a vector graphic in there, there's a background, there's a rectangle. You can actually just name groups. Okay? So this one here is gonna be called my bike one dot jpeg and this one's going to be I say a 40% jpeg. And hopefully have a look magically. I got bike one.
And if you wanna get super fancy, I'm gonna copy this tab down. Tab is a nice way of kind of jumping between layers without actually having to double click it. You see what I'm doing? How fast I'm going, don't hit return, just speeds things up a little bit. Four Oh yeah, you're smooth. Then come on, you guys are watching me.
All right, so that makes sense. So hopefully I should have a bunch of those images all combine down to 40% JPEGs, all lovely little names and if I go and make any adjustments to them, they will all magically update. Now there are a few other options. They get a bit nerdy after here. Those are the main ones that I use at least. But there are other things you can do.
Um, the best way to find out what other things you can do is if you Google just this Adobe generator syntax, okay? And this page will be number one, okay? It's from Adobe and it just goes through all the different ways of using it. Plus all the really nerdy use cases you can do cool things like using inches and millimeters. You can decide what kind of folder it goes into. If you wanna use a gif, what parameters for that gif Here you can see, you can stick it into different asset folders.
You might have a high res going into one and low res going into another. Again, it's pretty nerdy. Alright, that is gonna be it for Adobe Generate. Let's get onto the next video.