From the course: Photoshop for the In-House Designer

CC Extract - Photoshop Tutorial

From the course: Photoshop for the In-House Designer

Start my 1-month free trial

CC Extract

“

- [Instructor] CC Extract is part of the service layer of Creative Cloud and it's brilliant if you're working with developers who may not even have Creative Cloud Applications. They may work in a text only world, but they still need the assets. I'm going to open the PSD that I have here for an HTML email campaign and I'm going to go to the layers icon on the right hand side. Now, there's a button at the top here, Go to Extract, and when I click that, it will take me out to a separate window and this is something I could share a link to, by the way, and it will render me a special version of this file. It sometimes takes a moment. It depends on the complexity of the file. So, this is the extract workspace and in it you can see bits of information about things that you click on. So, for example, I can see that it's using Arial here in two different families there and some of the colors that are available at the moment, the defaults here, and also the layers. So, I've got access to those. And this Assets area which you'll see more of in just a moment. So, to extract things about the file, all I need to do is, basically, click on them. So, I've clicked on The Landon Hotel at the top there which of course is it's own layer and I'm getting some information useful for the CSS here such as its width and its height and also its X and Y location. And I could copy that CSS from here. Now, if I come across back to the styles, you should actually see some of that CSS there. So, the width and height property, all nicely written in the correct syntax. So, you could just copy that and paste it. You could also change the units, by the way, to relative M units, okay, to pixels, and M's as well. So, I can do that and I can also, if I can just get back to the word there, download that particular asset and the same with other content. If I click on the image file here that I've got inside of this layer or do it via the layers here, then I can get access to that content as well. So, we move further down and the text just here, this is slightly different here. So, if you're email comp had or web comp or whatever comp had the text in it that was actually going to be used, you can copy that here as well. Okay, and it is actually possible to download the whole lot. I'm going to click this arrow here, okay, and I can save this as an image if I want to. And, I can have a scale rendition just there. So, I'll tap Save, okay, and that will be now over in the Assets tab there. And, I'm getting a little notification saying that it's been added. Okay, and there's all of the styling information for that also. Let's come down and find one of the other images here. Let's have this one of San Francisco. So, if I click on that and I'll add that asset. This time, I will have a scale rendition at 2X as well and I think I'll have that as a JPG and up the quality there to the maximum of 100. Tap Save, like so and that will then get cued for the Assets. And, once I'm ready, I can just bring down those Assets like so. If I've made a mistake, I can remove them. But, it's a really easy way for you to work with a developer who could be on the other side of the planet and you're not sending them a whole bundle of things or an email. Just a simple link to the file which you can do at the top right hand side here in the browser.

Contents