Join Justin Seeley for an in-depth discussion in this video Saving icons using Extract, part of Creating Icons with Photoshop.
- In addition to the generator plug-in, you also have the ability to use something called "extract" inside of Photoshop, and in this movie I'm going to show you exactly how that works. Now extract, in general, is a feature that allows designers and developers to sort of speak the same language in terms of translating PSD assets into web design code, but we're going to use it for a much different purpose, we're going to use it just for converting all of these icons into several different formats all at once. Now, the key here is to make sure that you make extract's job as easy as possible.
So what I'm gonna do is go through here, and I'm just gonna convert these to smart objects. I'm just going to right-click all of these and turn them into smart objects. It still maintains all the layers, everything is still as it was before, we're just wrapping them in a protective coating, so to speak, and I'm doing this for one specific reason. If I don't do this, extract thinks that I want to extract everything inside of each one of these layers, including all of the sublayers. So what I want to do is tell extract, no, I just want these layers right here. So I'm going to do that, select all of them, and then go to File menu and choose "Extract Assets." When I do that, you're going to see that it comes up with all of my icons over here on the right hand side, and then I can choose and I want to do something like 25 percent, 50 percent, 200 percent and 300 percent, so I want to do that for each one of them.
I also want to make sure that they're all in PNG-24 or 32, if you don't know the difference between PNG-24 and 32, 32 actually adds the alpha channel masking to allow for transparency around the outside, so we want to make sure that we have that at PNG-32, so I'll make sure all of these look good, and you can just click on each one of these to get a preview of what they're gonna look like. So, right now, what it is doing, it's just setting this up, it's gonna call these what we have them named here in this dialog box, and then what we're gonna do, get all of these variations just from one simple click.
I'm gonna go to the Extract button, it's gonna say it's gonna alter the document's layer names, OK, no problem, then it's gonna ask me what I want to call them, I'm just gonna call this "icons", into my Chapter 04 folder, hit Extract, and it's gonna do its magic. Once it has finished, I get this folder open here. Here's all of the default icons, so there's the Calendar, the Camera, the Chat, Gear, et cetera, but look at this. Here's the 25 percent, here's the 50 percent, here's the 200 percent, all with the @2x already appended to the end of the file name, and then here are the 300 percent icons as well.
You'll notice they're all still really crisp, really clean, nothing has been pixelated, that's because even though they are converted into smart objects, it still remembers that those are all made of vector assets, so I get all of those, all at once, I didn't have to change any layer names or do any typing or anything like the generator plug-in did, I just went into that dialog box, set up my parameters, and went from there. Now, the other interesting thing that this dialog box can do that you might not have seen before is it can do SVG, which is pretty awesome.
So what I'm gonna do now, let's just do one of these. I'm gonna go to the File menu, and I'm gonna choose "Extract Assets." It's gonna open up here, and it's going to immediately try to do this as a PNG file. What I'm going to do is I'm going to go in here and I'm gonna choose SVG for this mobile one, and I could do this for all of them if I wanted, but, let's turn off all these scales here, and let's just choose Extract, hit OK, and SVG this time, so we'll do that, and so you notice here, all of these are PNGs.
They've exported out as standard PNGs, but this one is an SVG, and you can actually open SVG inside of Adobe Illustrator CC 2014, or you can actually copy and paste that directly into an application like Adobe Muse. If you're not familiar with SVG, I highly recommend that you check out some of the web design courses here at lynda.com, where we explain a little bit more about what SVG or scalable vector graphics are, because that is a very big deal now on the web, especially when it comes to icons, because you want things to be easily scalable no matter what screen they're on.
If you use SVG versus using static images, it's going to make it easier for you to serve those up, because you're not having to generate out the @2x or 3x, or 25 percent versus 100 percent, all that, so you don't have to have all of those if you're able to do it through SVG. Now there are certain limitations that go along with SVG, and that's why I highly recommend that you study up on it and learn about it beforehand, but I just wanted to give you an idea of exactly how it works inside of Photoshop, because you cannot do it just straight out with generator, you have to do it with the extract. So there you go, that's how you can quickly and easily export out multiple assets using the extract feature inside of Photoshop CC 2014, it is a brand new feature and I highly recommend that you use it, play around with it, and see how you can put it to work for you in your next project.
- Exploring file formats, sizes, perspective, and platform guidelines
- Choosing an icon style
- Creating sketches and assigning color schemes
- Building a grid system for icons
- Redrawing icons with shapes
- Saving icons
- Generating icons for different operating systems