Photoshop CC 14.1 came out on September 8th, and one of it’s most impressive additions was Adobe Generator.
Adobe Generator allows you to create image assets in real time as you work, eliminating the repetitive steps of copying, slicing and exporting each layer manually. Simply add a file extension to the name of your layer or layer group, and Photoshop will automatically create a JPG, PNG or GIF from the contents of that layer. If you make a change to that layer, the file is immediately updated. This means that you will now have a folder of images that are always up-to-date with your Photoshop design.
Generator is an open source project, which will allow users who know JavaScript to modify or write their own plug-ins using the technology.
To turn on Adobe Generator, go to File > Generate > Image Assets.
Now all you have to do is rename the layers or layer groups that you want to export.
Here are some examples of the supported tags:
- .png (Default value: png32 with semi-transparent alpha), .png8, .png24, .png32
- .jpg (Default value: 9), .jpg(1-10)
- .gif
- 1-n%, (Number) px x (Number) px for scaling
Here are some examples of how tags can be used:
- “200% logo@2x.png, logo.png” produces both a 2x and a 1x asset*
- *”@2x” is just a useful naming convention for retina images and it is not required.
- “banner.jpg10” produces a 1x asset with max quality
- “400% button.png, 250×250 button.jpg40%” produces a 4x PNG asset and a custom-scaled JPEG asset
Real Time Connectivity With Adobe Edge Reflow
Adobe Generator also provides a real-time connection between Photoshop and Edge Reflow, Adobe’s new responsive Web designs tool.
With a single click, you can insert assets directly into Edge Reflow, reducing tedious manual labor.
Additional improvements
The 14.1 update also includes many other improvements to Photoshop, including enhancements to Color Range options, Isolation mode, and path selection, as well as native PSDX support (read-only) and 32-bit image support for many more filters. Click here to see a full list of the improvements and bug fixes.
If you liked this article, then please subscribe to our YouTube Channel for more free Photoshop video tutorials. You can also find us on Facebook and Instagram.
Great job on the PS CC Generator. Great tool.
It would be nice to get the tutorials without having to share it…
I understand you want to increase your exposure, but i am thinking of leaving the channel, if this does not change, how do i stop the emails on new tutorials off this site?
Mary, if you’re referring to the asset files, then you don’t have to share the post to download the files. Just click on the X to the top right of the social buttons. That option is on every tutorial and has been there since day one.
As for your last question, to unsubscribe from the newsletter emails, click the unsubscribe link on the bottom of any email and you will no longer receive email updates.
Mary, I’d be really sorry to lose you, but why would you leave if this site offers great free content without you having to do anything?
Even if you were required to give a “like” for a file download (which you are not), would that be too much to ask for the high-quality tutorials you’re receiving for free?
I wasn’t aware of clicking the X, I just did it and got the tutorial.
last night i unsubscribed and signed up again, it says i’m still subscribed. Should I check back in a week for the database to catch up??
Regarding “liking” for a tutorial, which i now understand is not a preresquisite, i’d love to stay, I just prefer to remain private on fb.
Thanks
Mary
What’s so cool. I was watching this video on my laptop witched had CS 6. That option was not available. Almost made a post right than. Than right before I made the post I decided to go to my desktop and look at the CC version. Adobe Generator was there. Later on you said that we needed the CC version.
Now Adobe needed to let us add a hyperlink to the buttons or images. Maybe this will come in future upgrades to Photoshop
You should let us use the html tag
img src=”” alt=”” tittle=”” width=”’ height=”’
Does anyone have insight on additional “Default” settings, or declarations, that you can make in CC Generater?
It seems you can really only declare a default folder/subfolder, and declare a default size for all generated images… are there more options?
For example, I’d like to write a line to declare a default for all images in the document to be .png24 or 200% + .jpg5
danbo,
You can check out this link for more on what you can declare
http://helpx.adobe.com/photoshop/using/generate-assets-layers.html
Great little tutorial. Really well explained. Thanks
You’re welcome, Rebecca!