Using Adobe Generate to make image export amazing

Now this video is a very similar technique that we did when we were doing the export as feature so when we right clicked a layer and we said export as or used the quick export. So, this one does a similar job but it’s a lot more automated and it’s really great when you are working especially with yourself. You're developing stuff from Photoshop as a mock up and then you're getting assets ready and developing as a website then you can come back and forth quite quickly using this adobe generate. So first thing you need to do is turn adobe generate on, if you don’t have adobe generate here it means you're using an earlier version, either cs6 or earlier and you're not going to have this feature. But if you're in any of the later versions, we can go to file and were going to go into this one that says image assets. You turn it on and nothing happens, so file generate and you can see there's a little tick next to it so I know its on, its doing something. What I'm going to do is save my document in a special place just so I know where it is I'm going to save it on my desktop I'm going to make a new folder for you guys just so you can see it and this is going to be my generate export folder and I'm just saving the PSD into this folder here, a version of it. Click okay, so ill show you here on the desktop there's one there on my desktop that’s called generate export folder and there's the PSD that I'm working on. Just sitting by itself, now make sure generates on, for me it’s turned itself off because of the save as, make sure it’s ticked on.

Now what I want to do is lets say this image here I would like to save it out and with a bit of experience you know that it’s going to be a jpeg because it doesn’t need transparency and its an image. So what I'm going to do is I'm going to name this one here .jpeg, image-books.jpeg. And what you'll notice is back out of that same folder do you see magically its created this folder called export generate assets. Here’s my image, my layer exported as a jpeg. It’s done it automatically. Same thing is say if I wanted it to actually be a PNG. I can just, in my layers menu here name it a PNG. You'll notice over here, it’s actually removed the JPEG and its switched it out for a PNG. So this is a really quick and easy way to export files but it’s also a really nice way if you're making adjustments because it’s a dynamic link, its always adjusting so it deletes the JPEG and adds a PNG.

So I've got this image bookings.png selected and what I'm going to do is I'm going to add a layer effect and I'm going to add a colour overlay and I'm going to play around with, instead of norma, I’m going to switch it to multiply, pick a colour, I'm going to make it an old sepia style. And you'll notice as soon as I click okay, if I switch out to my images can you see it was getting remade as I turned up and it’s a new PNG with the new colour scheme in there. If I go through and change it again, ill change it to something a bit stronger. Its green, watch it in here, its remaking it in the green so it’s a dynamic link. You can keep moving, it keeps making the images. So I know that one needs to be a JPEG. When it comes to JPEGs I know that its coming through as a jpeg, watch this, there it is its now a jpeg but its 56kb, what I can do is there's a bit syntax that I can add to this guy to make it a different resolution. So at the end, see down here in my layers panel, I might make this a little bigger so you can see on the screen cast is that on the end here, if I type in a one, its going to make it a 10% jpeg and remake it. Which is remaking it at 10% so it’s a really small file size but its probably really bad quality. So if you know after a bit of experience you start knowing, I know that if I probably go at about 40%, just put 4 at the end, its going to remake it. It’s a reasonable size, the quality is fine, same thing happens if I want it to be a PNG, if I wanted it to be a PNG 8 or if you know you want it to be a 24, you can type both of those in and it will make the png-8 or versus 24, whatever you need.

Now there are a bunch of different syntax you can add to the end and the beginning for quality and for size, I haven’t got time to go through every single one of them here so if you want a printable for all the different syntax download them from this link here.

One last thing before we go is you can start doing groups. Lets say that you’ve got a logo here but its got a circle as part of it, there's different parts to your logo and you want to export it as one big lump. So it’s a white spot with the word Bring Your Own Laptop now what you can do is, watch this, there's my ellipse and there's my Bring Your Own Laptop, there they are there. Because if I give these separate names its going to export them separately so what I want to do is with them selected, group them and in this group here I can name this group so this ones going to be called BYOL logo and its going to be a .png and its going to be an 8. Great if I jump out to here, I should have logo.png and it’s an 8 bit one. Transparency, awesome, size, tiny, it’s another great trick to use with adobe generate.