Hey guys, welcome back for another very exciting tutorial here at the PhotoshopTrainingChannel.com.
My name is Jesus Ramirez.
You can find me on Twitter @JRfromPTC.
In this tutorial, we'll discuss Adobe Generator, an awesome new plug-in found in Adobe Photoshop
CC version 14.1.
This plug-in is ideal for web designers, user interface designers, or pretty much anyone
who works with multi-layer files that require exporting several images from one Photoshop
file.
This means, that you can now automatically export layers as images and instantly update
those files as you make changes to the layers, making it remarkably easy to export images
out of Photoshop.
Keep in mind that this, probably, won't replace your Save for the Web dialogue box, but it's
a useful tool to get things out of Photoshop quickly.
Let me show you how Adobe Generator works.
First, open up your file.
In this case, we're going to use this website template that I have here, and this is for
a fictitious business called Water Dancers, and I'm just going to press Ctrl H to get
rid of the guides, and we'll Zoom In just a bit.
So, in this website mock-up, which, by the way, you can download for free on my website,
so you can follow along this tutorial.
So, in this fictitious business, we have several elements that we want to use in our website.
So, what Adobe Generator allows us to do is to export the elements without having to use
the Slice Tool, or Copy and Paste elements into a new document, or running some scripts,
or any of those things.
What Adobe Generator allows us to do is to easily export them while we work on them from
this Photoshop file.
Now, to get started with Adobe Generator, the first thing you need to do is make sure
that it is enabled within Photoshop.
To do that, you can press Ctrl K, that's Command K on the Mac, to bring up the Preference panels,
and go into Plug-ins, and make sure that Enable Generator has a check mark next to it, then
press OK.
Then, you can go into File, Generate and make sure that Image Assets has a check next to
it.
If it doesn't, just select this menu option here.
Now, if you don't see the Generate option, it's because you have an older version of
Photoshop.
So make sure that you're running the latest version of Photoshop, and you can just click
under Help and Updates to update to the newest version if you are a member of the Creative
Cloud.
Okay.
So now that Generator has been enabled, we can start renaming some of these layers to
export the assets onto our computer.
Now, remember, the file is saved in a folder called Water Dancers and there's nothing else
in that folder.
If I start renaming some of these files, Photoshop will automatically start saving them as assets,
so I'll show you how that works.
I'm going to open up the Nav Bar and I have this Text layer named "logo" as you can see
there.
So, what I'm going to do now is I'm just going to add .jpg after the word logo.
Then, I'm going to commit the changes by pressing Enter on my keyboard, and notice that when
I bring back my folder, Photoshop went ahead and created this new folder called Water-dancer
site, which is the name of my psd file, and appended the word assets next to the file
name.
So, that will be the name of your folder, whatever you name the Photoshop file.
And, if I double click on that folder, you'll see that I now have a file called logo.jpg.
Now, this was a Text layer, and Photoshop went ahead and created that into pixels, obviously,
for a jpeg.
Now, if I come back into this layer and realize that I actually wanted a png because I wanted
to keep the transparency, I can go ahead and rename this layer into logo.png, commit the
changes by pressing Enter.
If I bring back the folder, you'll see that Photoshop went ahead and deleted the jpeg
file and kept the png file, and this has transparency on it, of course.
Also, I'm not too happy with the orange color here; maybe I want to use a blue, maybe some
of the blue found in the water.
So I can click on my Text Tool, select the text, and find a blue, here, in the water
somewhere, something that looks nice, maybe some of the blue here; maybe that blue there.
I'll press OK.
Press Ctrl Enter to accept the changes on the Text layer.
And if I go back into my folder, you'll see that the new file has blue on it.
So Photoshop automatically updates the files based on the changes that you made to the
layers.
Now, you can do a lot more than that.
We have this button here, which offers a free lesson to anyone interested in taking some
water dancing classes.
So, I'm just going to press V on the keyboard and I'm just going to press Ctrl Click on
this button, just so I can easily find it on my layers panel, and that's Command Click
on the Mac, by the way.
So I have this layer in this text layer, they make up that button.
So, if I will just rename one layer, Photoshop will not know that these two are linked, and,
therefore, only save the button.
So what we need to do now is take these two items and put them into a group.
So I'm going to press Ctrl G, that's Command G on the Mac, and now we have one group.
And I can just call this ìfree lesson.pngî which will make it into a png file.
Now, we can also add quality settings to this command, so I can add an 8 or 24 after png.
So I'm going to add 24 for a higher quality, and I'm going to commit the changes by pressing
Enter, then, I'm going to go back into my folder, and you'll see that I have a png file
made out of that button.
Now, you can also use different quality settings on jpegs, so I have these buttons here that
I want to use as my social media buttons in my website, so I'm just going to click on
the groupóFacebook group, which is this one here, double click on the layer name to rename
it to jpg, and give it a quality of 9, for 90%.
So you can also set the quality of jpegs, so 1 is for 10%, 2 for 20%, and so on.
You can also specify things like size.
For example, Twitter.jpg, 200% Twitter@2x.jpg to give it a retina display graphic.
We can, also, do multiple files with different file types.
So, for Google, I'm just going to delete the plus, and then, type in Google.jpg,Google.png.
And we can even do a third one, Google.gif, Enter to commit the changes, and for the YouTube
one, we'll just make that one a .png-8. Make the changes.
Another awesome feature about Adobe Generator is it can figure out what layer styles and
clipping masks are being added to a particular layer.
So let me show you an example here for the banner.
We are using this image with this adjustment layer, so I'm going to go ahead and disable
them so you can see what the adjustment layer looks like.
And I'm actually going to make this panel a little bit bigger so you can see it.
So, you're probably thinking that you need to select the banner, and select the Gradient
Fill while holding Shift to make a group out of that, and then, rename the group, but you
don't need to do that.
You can actually just select the banner and rename the banner, and Photoshop is smart
enough to know that these adjustment layers are clipped to this layer, giving it this
look, so Photoshop will save this look without having a group.
So, if I double click on the banner, and type .jpg, and the number 10, for the highest quality
jpeg and hit Enter, I can go back into the folder and you'll see that Photoshop has made
a high-quality jpeg out of this file using the adjustment layers that are being applied
to it.
Now, one other thing that I wanted to show you was that Photoshop also added the ability
to work directly with Edge Reflow, which is Adobe Photoshop's tool for working with responsive
web design.
So, if you enable that, and you have Adobe Edge Reflow, you can now sync with Photoshop.
I'm not going to go into too much detail with Adobe Edge Reflow, but I just wanted you to
know that that option is there in case you're using it.
So I'm just going to minimize this, and what I'm going to do now is I'm going to go back
into the folder, and you're going to see that all the layers that we've been renaming have
been turned into actual files.
So, as you can see, here's the Facebook file.
Here's the three different files created out of that one Google Plus layer, and, here,
we have the retina display 2X Twitter icon.
And if we go and make any changes to the layers, they'll, of course, be updated in the folder.
And that's the beauty of working with Adobe Generator.
Okay, guys, I hope you enjoyed this tutorial.
If you have any questions or comments, please leave them down below.
If you're on my website, you can enter your email on the sidebar to get access to my "subscriber
only" tutorials.
Also, don't forget to share this tutorial on Facebook, Twitter, Google+, or wherever
you like to share your stuff.
As always, thank you for watching and I'll talk to you guys next time.