• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer
  • Behance
  • Facebook
  • Instagram
  • LinkedIn
  • Pinterest
  • Twitter
  • YouTube
  • 0 items$0.00
PTC Logo

Photoshop Training Channel

  • About
    • About The Photoshop Training Channel
    • FAQ’s
  • Tutorials
    • All Tutorials
    • 3D Photoshop Tutorials
    • Compositing Photoshop Tutorials
    • Graphic Design Photoshop Tutorials
    • Retouching Photoshop Tutorials
    • Photoshop Tools & Techniques
    • Photoshop Text Effects
    • Tip Of The Day
    • Amazon.com Tutorials
  • Premium Tutorials
  • Connect
    • Contact Us
    • PTC Newsletter
    • Facebook
    • LinkedIn
    • Pinterest
    • RSS
    • Twitter
    • Youtube
  • Resources
    • Events
  • Join The PTC Newsletter
Home » Photoshop Tutorials » Technical & Workflow » Adobe Generator – Photoshop CC 14.1

Adobe Generator – Photoshop CC 14.1

585
SHARES
Share on FacebookPin in Pinterest
Share on TwitterLinkedinWhatsappReddit
Subscribe on YouTube!

Posted In: Technical & Workflow | Watch on YouTube

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% [email protected], 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:

  • Photoshop CC 2018
  • Photoshop CC 2017
  • Photoshop CC 2015.5
  • Photoshop CC 2015
  • Photoshop CC 2014
  • Photoshop CS6
Diggin' these tutorials? Sign up for updates and subscriber-only tutorials…It's FREE!

Tutorial Files

028 - Adobe Generator (1504 downloads)

Other Photoshop Tutorials You Might Like:

  • scripst-event-manager-photoshopUsing The Script Events Manager In Adobe Photoshop CS6
  • How To Create Custom Panels With Adobe Configurator 3.1
  • Photoshop CS6 TutorialsPhotoshop CS6 Tutorials

About Jesus Ramirez

Jesús Ramirez is a digital graphics expert, speaker, and educator specializing in Adobe Photoshop. Jesús is best known as the founder of the Photoshop Training Channel, one of the most popular Photoshop YouTube channels in the world. More.

Follow: Instagram / YouTube / Twitter

Subscribe
Login
Notify of
guest
guest

This site uses Akismet to reduce spam. Learn how your comment data is processed.

10 Comments
Oldest
Newest
Inline Feedbacks
View all comments
Robert Nichols
Robert Nichols
7 years ago

Great job on the PS CC Generator. Great tool.

Reply
Mary
Mary
7 years ago

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?

Reply
Jesus Ramirez
Jesus Ramirez
Author
Reply to  Mary
7 years ago

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?

Reply
Mary
Mary
7 years ago

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

Reply
Michael Summers
Michael Summers
7 years ago

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

Reply
Michael Summers
Michael Summers
Reply to  Michael Summers
7 years ago

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

Reply
danbo
danbo
6 years ago

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

Reply
Jesus Ramirez
Jesus Ramirez
Author
Reply to  danbo
6 years ago

danbo,

You can check out this link for more on what you can declare

http://helpx.adobe.com/photoshop/using/generate-assets-layers.html

Reply
Rebecca
Rebecca
5 years ago

Great little tutorial. Really well explained. Thanks

Reply
Jesus Ramirez
Jesus Ramirez
Author
Reply to  Rebecca
5 years ago

You’re welcome, Rebecca!

Reply

Primary Sidebar

Join Over 52,000

Photoshop users who subscribe to receive tutorials straight into their inbox!

About Me:

Profile Image

Follow

Jesús Ramirez is the founder of the Photoshop Training Channel, a top Photoshop training YouTube channel with more than 1,300,000 subscribers. More.

Click The Buttons Below!

  • Follow
  • Instagram

Photoshop Tip Of The Day:

August 7, 2018

To activate multiple layers using your keyboard, press Shift Alt [ (Mac: Shift Option [) to activate the layer below the currently selected layer (or the ] key to activate the layer above).

You can keep adding to the selection one layer at a time by tapping on either of the bracket keys while holding down Shift and Alt (Mac: Option).

Get more Photoshop tips →

Tutorial Flashback

  • scripst-event-manager-photoshop
    Using The Script Events Manager In Adobe Photoshop CS6

Search

Upcoming Events

Jesús Ramirez will be presenting at the following conferences or events:

June 10, 2019
CreativePro Week 2019
CreativePro
Seattle, WA

See Previous Events

PTC’s Most Shared Tutorials This Month

  •  
    How To Remove a Background In Photoshop [For Beginners!]...
    L
    62 Shares
  •  
    Create Book Cover Mockups in Photoshop [Pro Techniques]...
    I
    37 Shares
  •  
    Better DUAL LIGHTING Effect In Photoshop [Total Control]...
    L
    5 Shares
  •  
    Channel Based Selections in Photoshop...
    I
    3 Shares
  •  
    How To Repair Old Film Negatives in Photoshop...
    I
    2 Shares

My Tutorials in Spanish – Mis Tutoriales en Español

videosptc.com

Footer

About PTC

The Photoshop Training Channel is a Photoshop resource site for beginners. PTC was founded in July 2012 by Jesús Ramirez. The main goal of this site is to provide quality tips, tricks, hacks, and other Photoshop resources that allows beginners to improve their skills. More.

Connect with Us

Questions? If you have any questions, please feel free to Contact Us!
  • Behance
  • Facebook
  • Instagram
  • LinkedIn
  • Pinterest
  • Twitter
  • YouTube

Subscribe To Our Newsletter

Every week we'll send you Photoshop in-depth tutorials!
JOIN OUR COMMUNITY OF 52,000+ Photoshop Users!

Privacy Policy | Sitemap
Copyright © 2012 - 2021 Photoshop Training Channel.
Adobe, the Adobe Logo, Photoshop and Lightroom are registered trademarks of Adobe Systems Incorporated.
wpDiscuz