Generator

Quick reference

• 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.