Extracting @2x assets in Photoshop

- By now, I'm guessing that you're pretty excited about the last video that we just watched. However, I'm going to take it up even one more notch to get you even more excited about the power that Photoshop has when it comes to generating multiple assets. This time, we're going to be using a new tool called Extract and this is the end all, be all way to get massive amounts of data out of one, single Photoshop document. This is even going to be really great if you are creating website mockups inside of Photoshop. So, the first thing we have to do is we have to have a file open and then what we're going to do is bring out my Layers panel here. And I'm going to open it up so that you can see all of the layers that are inside of this. Several different layers inside of here. And what I'll do now is I'll just select all of the layers that I want to export out and I'll go to the File menu and I'll choose Extract Assets Once I choose Extract Assets, it's automatically going to load up with this, which I have deemed this the Save For Web on steroids because this is exactly what I wish the Save for web command was and just about every single application that has Save for web. Now you'll see at the top of this that it says, "Share PSD comps in Creative Cloud "and allow other people to extract CSS, colors, and fonts "out of your artwork." And that's mainly what this is used for. This is used as a bridge between designers and developers to help get more information out of a Photoshop comp to make development a little easier. But, I'm not talking about that for this specific course. I'm only worried about the asset generation which is all over on the right-hand side. So check this out. I have the ability to look at each one of the individual layers, I can also twirl down and get the file format that I want for each individual layer. So in this case, I'll keep it on .png. And then I'm also able to determine the scale at which I export them out. So I want the regular, I want 2x and I want 3x for each one of these. And so now all I have to do is go down and click Extract. That's going to ask me where I want to extract them. First, it's going to say, "To extract these assets, Photoshop will alter "the document's layer names." Basically, it's going to go through and do the hard work of generator for you. I'm going to say, "Okay, don't show me that again." And hit OK. It's then going to ask me where you want to store this. I'm going to put it in that PSD folder, it's going to create an automation-assets folder for me and I clicked Extract. Now it's going to go through, it's going to extract each one of these individual files. It is going to create everything it needs to create for me and then when it is finished, you are going to see all of these .png files just start filling up the Finder. And so now, I have all the regular .PNGs in there, I have scaled at two hundred percent with the at 2x appenditure already put at the end of it and, I have the scaled three hundred percent. Now, these do not append the at 3x to the end of these. Unfortunately, it's not there yet. But, you can go in and add at 3x pretty easily to those. You could also have the ones that were half the size and a quarter of the size if you needed them scaled down that far as well. So, as you can see, that was just one or two clicks, very simple. And I generated this entire folder of assets at one hundred percent, two hundred percent, and three hundred percent. I didn't have to rename anything. I didn't have to download any extras. All I had to do was use the Extract feature. Now Extract is something that is relatively new to Photoshop CC so you're going to see this thing change and evolve over time with more functionality. And, also, if you're using an older version of Photoshop, you will not have access to this. You need the latest and greatest Photoshop CC 2014 in order to run this. But, if you have it, it's going to be probably the biggest time saver for a web designer that I've ever seen.