Locked lesson.
About this lesson
This is an advanced technique for those who want to design their web pages primarily in Photoshop.
Exercise files
There are no related exercise files for this lesson, or we cannot provide them due to copyright issues.
Quick reference
Topic: Generator
Export your layers as individual web components.
When to use
This is an advanced technique for those who want to design their web pages primarily in Photoshop. The generator allows you to export the document as web page images so that changes to each layer will be updated automatically.
Instructions
Turn on generator
- With the design that you want to export images for, go to Menu/file/Generate/Image Assets.
Convert layers into images
- Select the layers that you want as a separate image.
- Command or Control + G to group them.
- Rename the grouped file with a web compatible extension.
- Examples: .png, .jpg.
- This will generate a folder (in the same place as the file is saved) with the layers saved as web reedy image.
Specify image quality
- With files types like jpg you can specify the level of quality (file size) required by adding a number after the extension.
Save the layer ‘Bagel’ as ‘Bagel.jpg6’ will save the image as a JPG at 60% quality.
Updates
- Now that the generator is running, any changes that you make in the Photoshop document will now update the file images automatically as well.
Adding a 2nd retina quality image
- Save the layer ‘Bagel’
- As ‘Bagel.png,200%Bagel2x.png.’ will save the image as a png quality, as well as a high quality version for retina displays.
- 00:04 Hey everyone, Howard Pinsky here with a brand new feature part of
- 00:07 Photoshop CC14.1 called Generator.
- 00:10 If you're a web designer you're gonna absolutely love this feature.
- 00:13 Generator allows you to automatically export your layers to images and
- 00:17 then updates them as you make changes.
- 00:19 Now, you're probably asking yourself, can't I do this with a script or
- 00:23 doesn't Slices allow me to do this?
- 00:25 To an extent it can, but
- 00:26 let me show you how much more seamless this process can be using Generator.
- 00:30 Here's a mockup of an iceflowstudios.com design that I have been
- 00:33 experimenting with, which I put together in Photoshop.
- 00:36 Before Photoshop CC14.1, saving the individual elements of
- 00:41 this website would be a long and tedious process.
- 00:44 You'd either have to isolate each and every layer before saving them for web,
- 00:48 you can use the Slice tool, which doesn't always play well with transparent layers,
- 00:52 or you can use the export layer to files script which is faster, but
- 00:55 quite limiting.
- 00:56 On top of this, once you do get all your layers exported,
- 00:59 if you make a change to your design, guess what?
- 01:02 Yep, you got to repeat the process all over again.
- 01:05 Generator changes all that.
- 01:07 Let me show you how.
- 01:08 This mock up is composed of a few images which I'd like to eventually use on
- 01:12 my website.
- 01:13 My logo at the top, the magnify glass, the social media buttons,
- 01:17 the stats icons, and, of course, the hero image in the back.
- 01:21 Before we are able to start generating any images,
- 01:23 Generator needs to be enabled first.
- 01:26 It is turned of by default, so
- 01:27 you are not unexpectedly exporting images on all of your projects.
- 01:31 Under the File menu, you are going to find the new Generate sub-menu,
- 01:34 where you can turn on Image Assets.
- 01:37 When images are generated, a folder will be created where your document is saved.
- 01:41 If I switch over to my Finder window, here's my mock up file, but
- 01:45 no assets folder so what's going on?
- 01:47 Well, in order for an image to be created, the layers' name must be
- 01:51 modified to tell Photoshop how you'd like to export each image.
- 01:55 Let's start with my logo.
- 01:56 Taking a look in the Layers panel, the logo is composed of many shapes, which,
- 02:00 if we were to use the Export Layers to File script,
- 02:03 would give us a ton of unwanted files.
- 02:06 And using slices wouldn't give us a transparent image,
- 02:08 as it's on a while background.
- 02:10 When dealing with an element that's made up of multiple layers,
- 02:13 you'll want to group the full design so Photoshop knows exactly what to export.
- 02:18 This also helps with organization, as well.
- 02:20 So, even if you're not using Generator, it's a good idea to group your layers.
- 02:24 So, selecting the first layer that's part of the logo,
- 02:26 I can hold down my Shift Key and then click on the last layer.
- 02:29 This will select all the layers in between.
- 02:32 And once they've been selected, Command or Control+G to place them into a group.
- 02:36 Now, here's how to kick Generator into full gear.
- 02:39 Instead of a simple layer name like Logo,
- 02:41 you'll want to give it a file name such as Logo.png.
- 02:45 And then when you accept a new name,
- 02:47 your assets folder will be automatically created with the logo inside of it.
- 02:52 Let me do a few more, for the magnify glass I'm gonna name it glass.png and
- 02:57 then checking the assets folder there's the new image.
- 03:00 You can also use different file extensions and tags, as well.
- 03:04 For these social media buttons, instead of a png I may wanna export them as jpegs.
- 03:09 So, I can name this button YouTube.jpeg.
- 03:11 And if you're familiar with saving images in Photoshop,
- 03:14 you're usually able to define a quality value.
- 03:17 Because this will be used on the web,
- 03:19 I don't want to save it at a hundred percent quality.
- 03:21 So, in that case I can use a value from one to ten right after the file name.
- 03:27 One being 10%, ten being 100%.
- 03:29 So, right after youtube.jpeg,
- 03:32 adding the number six will save this image at 60% quality.
- 03:36 Let me do the others now.
- 03:37 twitter.jpeg, 6, google.jpeg 6,
- 03:42 and facebook.jpeg, 6.
- 03:45 Now, hopping back to Finder, there are the images that I just renamed.
- 03:49 Let's do one more.
- 03:50 The hero image in the background needs to be generated as well,
- 03:53 but I also want to include the transparent white bar at the bottom,.
- 03:57 So, I am going to place the image and the white overlay into a group, and
- 04:01 then name it hero.jpeg with a 4 at the end of it to save it at 40% quality.
- 04:07 When dealing with large images that will be used on the web, you'll want to
- 04:10 reduce the file size as much as possible to speed up loading times.
- 04:15 Now, here's the biggest benefit to using Generator.
- 04:17 As I mentioned at the beginning of the video,
- 04:19 traditionally, if you made changes to your design,
- 04:21 you'd have to take multiple steps in order to update the saved images.
- 04:26 Watch how easy it is now.
- 04:28 The magnify glass is sticking out like a sore thumb.
- 04:31 I may want to reduce it's opacity to, let's say, around 30%, and
- 04:35 possibly even rotate it a little bit.
- 04:37 That looks better.
- 04:38 Now, without saving and
- 04:39 without doing anything else, the generated image has already been updated.
- 04:43 One more example, if I wanted to change the Hero Image,
- 04:46 I can simply place a new image into the Hero Image folder and,
- 04:50 just like that, Photoshop updates the exported image.
- 04:53 Absolutely no extra steps are needed.
- 04:56 And Generator also supports other tags, which can be seen on the screen now.
- 05:00 That will allow you to export using different extensions, quality values, and
- 05:04 support scaling, as well.
- 05:06 As a final example, if I want to export a retina display version of my logo,
- 05:10 I can simply add a comma after logo.png,
- 05:13 then add 200% before the next file name, logo2x.png.
- 05:19 It's that simple.
- 05:20 I now have a regular sized logo, and a logo that's perfect for retina displays
Lesson notes are only available for subscribers.