Join Justin Seeley for an in-depth discussion in this video Using the Photoshop web asset generator, part of Photoshop CC 2014 for Web Design.
Traditionally, when you wanted to mass export out images from a mockup in Photoshop, you had to spend time either copying and pasting graphics into a new document, or you would slice up your mockup using the slice tool and then individually optimize those slices each time you wanted to save it out in the safer web dialogue box. Now, however, Adobe has built something called Generator, which allows you to quickly export out multiple web graphics from a single PSD file. And then store them in a folder that gets continuous updated throughout the life of the file. Let's take a look at how this works.
I've got my layers panel out on screen now. And you should bring yours out as well because that's where you're going to be doing a bulk of the heavy lifting. And what we're going to do is just scroll through this file and find images that we need to export out like the big background image here. The team photos here. And then the portfolio images here. What I want to do is be able to quickly and easily export all of this information out. And so what I'm going to do here is I'm just going to go through it piece by piece. Let's open up the welcome image first, I'm going to select the color fill layer and the two trees layer, and I'm just going to group those together.
And once I do that, I'm going to double click where it says group, and then I'm going to name it something. So, I'm going to call it welcome.jpg and when I do that, that just indicates to Photoshop that I want to save this out as a JPG. Alright? Now let's open up the about us section. Go down to row one. And if you remember, when we pulled all of these out of the stack that we loaded them in, they actually had JPG extensions. I've gone through and cleaned them up a little bit. So that you can see the file names are a little bit cleaner. But they do still have the .JPG extension, so everything's all good.
However, what we're going to do here is we're going to do a quality test. So what I'm going to do is double-click here, and on the end of JPG for the first row, I'm going to put 10. Indicating that I want these saved at the highest quality JPG setting. And basically what I'm doing here is I'm doing this so that I can compare file size. I'm doing these three images and these three images. So, I'm going to put JPG setting of six on the end of these, and then we'll also check the quality of these at the end. So in additional to providing format, you can also provide quality settings as well.
And so now, let's go down to portfolio and row one, and all of these also have weird little names so we'll just rename these, so this one will be something like card.jpg. And this one will be balloonraces.jpg. And you can see some of these already had the .jpg extension, so I could actually just change the name if I wanted to. Like seminar flyer, eye doctor billboard.
I'm just basically trying to simplify the file names; you don't have to go through and do these, I'm just doing it for an example to show you what it's going to look like and so when they generate, you'll know that they actually generated based on these and not some other file, so let me just scroll through these really quick. And we'll name all these files. There we go, okay. So, now I've got all these named and so what I'm going to do now is go to the file menu, choose generate and choose image assets. And when I do that Photoshop's automatically going to read this document and then create a folder.
That folder's going to live in one of two places. Either on your desktop or in the same place that this file is already saved. If you haven't already saved your file, which this file exist already it's been saved in your exercise files folder, so that's were it's going to generate our folder. But let's say you had just created a new file and you turn this on. It would put it on your desktop. If I jump over into my exercise files folder for chapter eight, you're going to see this new folder ttc_mockup_final-assets. Opening that up is going to show me all of those images.
And you're also going to see the differences in the file size between, let's say Alex, which I saved at a quality setting of 10. And then Joey that I saved at a quality setting of four, and I can also select both of those, and I can open them up in, let's say, Photoshop, and I can look at the difference of quality. So there's Alex, who's saved at 10. There's Joey who is at six, not a whole lot of difference, there's some pixelation on Joey's face, so I may want to go back and change the ones that I set to six to be at ten.
Because there's not that much of a file difference, only about 10k. So let's close those up, and let's go back in here. And I'll close up portfolio. Don't need to make any changes there. Let's just go through here on these, and let's change the six to a ten. And then Photoshop should read that; you don't have to even save anything. If I go back out into my finder, open that up, you can now see that Joey is back up to 16k, Rachel back up to 18k. And we also have Kim, which is the other one, at 14k.
So all of those updated accordingly, which is great. Now, in addition to just doing single versions of the files, you can also do multi-versions, to check and see what they would look like at different file formats. So let's scroll up here to the top. And, while I'm not going to do a different file format for the welcome.jpg, I am going to do an alternate version of it. Why? Because. Let's say that we needed to generate retina quality graphics for the retina screens, high res screens. The easiest way to do that is to generate a 200%, meaning the image is 200% larger size than it was originally.
So in this case, what I'm going to do is just going to put a comma after JPG. Then we're going to type out 200%, telling Photoshop, hey, I want you to double this in size. And then we're going to call it welcomeIMGat2x.jpg. Just like so. Now when I jump back over to that folder, there's my at 2x graphic. Notice, that welcome.jpg, and welcomeimageat2x.jpg, looks to be difference in size, right? So let's open these up. In Photoshop and take a look.
So here's the at2x version. Notice I'm viewing it at 25% of its actual size. If I go to image, image size, you can see that it is 2650 by 1301. If I go into the welcome.jpg, it is image, image size 1280 by 650. So this one is two times as large, as this one. You'll also notice when I view this at 100%, versus this one, the difference in quality is not all that bad.
And that's because Photoshop's new up-sizing algorithm is much, much better in CC, that it ever has been. So generating retina quality graphics is much, much easier. So, anytime you need to do retina graphics, just do a comma after the original asset. Type out 200%, rename the file with the appended at2x extension. And then, add the file extension on the end of that .jpg, .png, whatever the case may be. So as you can see, generating web assets out of Photoshop is a real snap now with Adobe Generator.
And there are tons of possibilities for this. PNGs. JPGs. GIFs. You can do multiple versions. Multiple sizes. It's really cool, the types of things you can do. Adobe actually has a webpage dedicated to Generator, in a blog post, where you can see all of the different information and the syntax for how to use Generator about midway down the page. And so you can find this. The URL's really long. But you can find this at a special short URL that I've given you. And that url is Seeley, my last name, .co/psgeneratornotes.
And once you go to that URL, you'll be taken to this blog post. You can read up all about Generator, how it works, how you should use it, and how it can really help streamline your workflow. So the next time you have a bunch of assets to, for lack of a better term, generate, check out this feature and see if it doesn't save you a whole lot of time.
- Why use Photoshop for web design?
- Decoding the mysteries behind screen size and resolution
- Giving your website a purpose with a content strategy
- Customizing a web workspace in Photoshop
- Designing responsively
- Creating wireframes on a grid
- Choosing colors and fonts
- Developing a UI kit with Photoshop
- Assembling a page mockup
- Creating image sprites
- Optimizing images
- Integrating with the rest of the Adobe Creative Cloud