Skip to main content

Photoshop CC update brings open source ‘Adobe Generator’ tool for real-time image asset generation

[youtube=http://www.youtube.com/watch?v=6TRz-gNdQFg]

Updates out today for Photoshop CC (version 14.1) bring new features for Creative Cloud members including a brand new open source technology that Adobe is calling “Adobe Generator”. The new feature will allow users to automatically create image assets in real-time without the need “of copying, slicing and exporting each layer manually.” Here’s how it works:

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 now have a folder of images that are always up-to-date with your Photoshop design. If you need larger dimension images for Retina displays, you can also quickly create those by adding a scaling factor.

In Photoshop, Adobe Generator can be turned on by navigating to  File -> Generate -> Image Assets and renaming layers with supported tags. Adobe notes some examples in its blog post. For example,  “200% logo-retina.png, logo.png” produces both a 2x and a 1x asset, while “heroImage.jpg10” produces a 1x asset with max quality.

Adobe noted that the new generator feature also provides “a real-time connection between Photoshop and Edge Reflow,” allowing users to bring in assets from Photoshop with a single click. Generator is an open source project, which will allow users who know JavaScript to modify or write their own plug-ins using the technology. The company posted the video below that shows developers who are using Generator to write a custom plug-in for a mobile game that allows them to “change the UI of a game in Photoshop while the game is being played.”

Normally $50/month ($30 for existing CS customer), you can currently get some big discounts to upgrade from a Creative Suite product to a Creative Cloud membership. There’s an additional $20/month off for signing up for Creative Cloud for Teams and last week Adobe introduced a new Photoshop Photography bundle that allows customers to get Photoshop CC, Lightroom 5, 20GB of online storage, Behance ProSite, and more for $9.99/month.

[youtube=http://www.youtube.com/watch?v=fMxvyB1fMNY]

Here’s a breakdown of all the features in the first release of Generator courtesy of Adobe:

  • Real-time image asset generation gives Photoshop CC users the power to eliminate time-consuming production steps while ensuring their designs are properly implemented both on the desktop and mobile screens
  • Tagged layers and groups in Photoshop CC are automatically saved and updated in real-time as individual files, in the format selected
  • Layers can now be exported as JPEG, GIF, or PNG with a variety of options, including scaling for Retina displays and varying levels of compression
  • In one click, Edge Reflow CC can import Photoshop CC assets, including images and text directly into Edge Reflow, allowing designers to immediately begin their responsive design process and reduce manual production steps

FTC: We use income earning auto affiliate links. More.

You’re reading 9to5Mac — experts who break news about Apple and its surrounding ecosystem, day after day. Be sure to check out our homepage for all the latest news, and follow 9to5Mac on Twitter, Facebook, and LinkedIn to stay in the loop. Don’t know where to start? Check out our exclusive stories, reviews, how-tos, and subscribe to our YouTube channel

Comments

  1. Tj Tokarczyk (@tjtokar) - 11 years ago

    Been using Slicy to do this for a while.

  2. NQZ (@surgesoda) - 11 years ago

    Cool but still not going to pay for creative cloud…CC to me is a gigantic slap in the face and scam to all the loyal Adobe end users.

  3. str3ss (@str3ss) - 11 years ago

    @surgesoda , couldn’t agree more. This sounds like a nice feature but not near enough to make me forget that Adobe is trying to force us to lease our tools. CreativeCloud has a place, and it’s innovative, but not at the cost of abandoning the traditional install.

  4. Dan Jurak - 11 years ago

    Not much new here. CC still seems like a huge money grab to me. Nothing wrong with CS5 or CS6 that compels me to switch. After using Adobe products for over twenty years each upgrade seems more incremental than anything. Adobe by and large is just adding bloat it seems.

  5. gslogger - 11 years ago

    Has it occurred to anyone that Macromedia Fireworks was better at slicing and dicing since 1998? And had symbols. And had multiple pages for god’s sake. Adobe is still trying to force its two square print tools into two web round holes and still to this day cannot better Fireworks. No wonder they killed it. Adobe’s tools have the curse of the monopoly upon them. Much as MS Word has actually gotten to be a worse product over the years, Adobe is following suite. It’s all such a stupid waste. And don’t even get me started on their stupefyingly stubborn and absurd ‘customer support’. For 15 years Fireworks has been the better web tool, Adobe’s response? Break its legs and then shoot it in the head. Ive got CS6, but I’ll be damned if I’m paying a subscription for their software. There are finally real some competitors on the horizon, I look forward to supporting their efforts.

  6. Is there any way to create an invisible asset, or create an invisible box around one? Say I create a bunch of icons that are 36px wide, but I want them to export at 50px. For instance, using Slicy, i can create an object in the same folder and name it “@bounds” and it will use that as a boundry box for any other assets in the same folder (additionally, you can create a vector mask and achieve the same thing).

    • stoeff (@stoeffix) - 11 years ago

      yes, adobe mentioned it on their blog:
      just add the dimensions of your invisible box before the filename, i.e. “50×50 icon.png” or “100×100 200% icon@2x.png

      the only minor drawback compared to the way it works in your mentioned example in Slicy is that you won’t be able to set the area yourself. the icon will just be centered in the exported image.

      • Sadly, “50×50 icon.png” will scale the icon, not create a transparent border around it. We’re working on using layers masks for transparent padding, though.

    • Not at this point, but we’re working on it!

  7. Actually, I am against the posts about: “CC is a gigantic slap in the face,” “Scam”, “force us to lease,” “money grab,” etc. These comments make real designers question your actual abilities. Do the math. The creative suite was available for purchase legally a few years ago for right around $1500 for an average user. Compared to the current Creative Cloud which at max is (rounded up) $50 a month. That is only $600 usd a year. Yearly updates to software programs would cost about half of the entire software purchase. Back to right around $600 a year. I am a hack, I am a broke college student. Why pay for the entire program when I can just download it online for free right? Various reasons: 1. Your work is legit. If you are going to be a real artist quit playing around. 2. We don’t all have $1500 in the bank to get a legal copy of the programs we use to make our work with, and it sucks when we are out of date or download a hack file! We need to get a job done in a design, $50 bucks is cheap compared to the other option! 3. If you are still using CS5, and do not know what CS6 is actually capable of… my friend there is a huge difference. Add ALL of the new updates that are available on the cloud…. and BAM! 4. Oh wait… why am I wasting my time on you. Obviously, if you are complaining about the new way Adobe is doing things (which was to integrate more people and be an actual business to actually turn a profit like it should be,) Y’know what, keep your old versions. Keep your CS4, or CS5. I work with all ages to work PS and AI. I work with other instructors that teach FL and DW. All of the new students are on the Creative Cloud this semester. You will get left in the dust. If you say that CS5 is better…. well…. you can sit in your little box.

  8. Renamy Team (@Renamy_com) - 10 years ago

    1 missed thing in image asset generation: Multiple layers renaming Photoshop plugin.

    http://www.youtube.com/embed/D7BZ3lMLZ-E?rel=0&vq=hd720&autoplay=1

    http://www.renamy.com

Author

Avatar for Jordan Kahn Jordan Kahn

Jordan writes about all things Apple as Senior Editor of 9to5Mac, & contributes to 9to5Google, 9to5Toys, & Electrek.co. He also co-authors 9to5Mac’s Logic Pros series.