Adobe Generator – Photoshop CC 14.1


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.

Other Photoshop Updates

Check out my other Photoshop tutorials that cover updates:

Similar Posts

Subscribe
Notify of
10 Comments
Oldest
Newest
Inline Feedbacks
View all comments
Robert Nichols

Great job on the PS CC Generator. Great tool.

Mary

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

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

Michael Summers

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

Michael Summers

img src=”” alt=”” tittle=”” width=”’ height=”’

danbo

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

Rebecca

Great little tutorial. Really well explained. Thanks