Navigation

Adobe revolutionizes Photoshop with Generator

By Benjie Moss | Resources | Sep 9, 2013

This morning 500,000 premium Creative Cloud subscribers will be waking up to an update alert for Adobe Photoshop. Adobe’s flagship product has been revised for the first time since the switch to the subscription model back in June.

The big news is that for the first time the heart of Photoshop, its workflow, has been revised for the benefit of web designers.

Photoshop’s native workflow has never worked for web design. As a tool, Photoshop has been too cumbersome, requiring a mixture of slicing, layer merging and resaving multiple times to export out a design. Back in 2000, when images in the backgrounds of table cells seemed like a good idea, Photoshop was fine; but it has since been superseded by dedicated web tools like the superb TypeCast.

Sure, Adobe have flirted with the idea of Photoshop for the web in the past with initiatives like ImageReady; and it’s always been possible to save images for the web from Photoshop. It’s just that those processes always felt tacked on.

 

Adobe Generator

The aim of Photoshop 14.1 is to enable designers to rapidly design for multiple screens. Exporting assets is now ridiculously easy: first, you need to enable File > Generate > Image Assets; then you rename a layer in Photoshop with the name you want to use, wdd.png for example, and Photoshop will immediately create an assets folder with the image in it. You don’t even have to click Save for Web.

What’s more, asset generation is live: if you edit a graphic in Photoshop the image in your assets folder is automatically updated.

This revolutionary change to the way Photoshop works is powered by Adobe Generator, which is open source (you can find it on GitHub). Built with Node.js you can actually write your own plugins for Generator, meaning you can customize the way Photoshop exports your assets. (Adobe recommend reviewing the generator-assets file on GitHub as a guideline for any plugin you build.)

One of the demos we were shown was a gaming company that had built a plugin for Generator that exported live to their game engine. You could, by the same token, build a plugin to publish live to a server, meaning that you could open up Photoshop and live-edit images on your website just by making tweaks in your original PSD.

 

Generator for responsive design

An additional feature is the option to specify not just a name, but options for the export. You can specify scale on the image for example, you can even specify multiple images to create a number of different assets simultaneously; fantastic for responsive design.

Adobe is expecting the community to build a lot of plugins for Generator, just as it has actions for Photoshop. However, the one they’re launching with (apart from the default image generator) is a plugin to tie Photoshop directly to Adobe Reflow; making Photoshop responsive design-friendly for the first time.

One of the biggest headaches for anyone exporting a design from Photoshop has traditionally been handling text, which can’t responsibly be images on the web. Incredibly, Adobe have also addressed that concern in the Reflow plugin by making any text exported via generator native HTML text. You can even sync everything with Typekit, to create consistency from start to finish. Shape layers have also been addressed, and will be exported to Reflow as HTML & CSS.

generator_001

If you’re one of the many designers that build assets files from your main PSD you’ll find that those asset files can now be dropped into Reflow’s library, allowing you to design in Reflow with updateable assets.

 

There’s more…

In addition to Generator, Adobe have introduced dozens of additional improvements including, increased stability; Behance share is available in more languages; native PSDX support, 32-bit image support for filters; improved GPU detection; and improved anchor point selection.

As exciting as this, there’s actually more: Adobe are currently working with major browser vendors on a new image format for the web, an adaptive image format; once that format has been finalized, Photoshop and Generator will support it. The holy grail of web images may be just around the corner.

If you’re not already a Creative Cloud subscriber, I’d suggest you sign up for a 30 day trial today.

 

Conclusion

Adobe have taken a lot of flak recently for their decision to move to a subscription model, but it’s the Creative Cloud subscription model that allows awesome updates like this one and if Adobe continue to innovate in this way, the naysayers will be silenced before long.

Photoshop was the number one design tool for web designers for many years, but its print-based workflow, and dated export options made it increasingly irrelevant. Adobe Generator turns the tool on its head; it’s one of the most exciting updates I’ve ever seen for an Adobe product.

Suddenly, Photoshop is top dog again.

Share this post
Comments (no login required)
  • Matt Clark

    Anyone who criticized their decision to go with the subscription model clearly has never been a freelancer faced with the daunting prospect of having to fork out thousands of pounds to upgrade their adobe package.

    • Otto Robba

      This assumes that all freelancers need to upgrade their Adobe packages and that all freelancers use Adobe software. Both assumptions are wrong.

      • Matt Clark

        If the freelancer isn’t using adobe software then adobe’s choice in payment model is irrelevant.
        And if they are happy staying with cs6 or less then this doesn’t affect them either.
        Not really sure what your point is.
        For anyone who wants to stay current and up to date with adobes suite then CC is by far the best way to do so.

      • Otto Robba

        If this move is positive for you and your workflow, that is great. I’m sure that for many this will be a boon – I know quite a few people who are happy with the new pricing, some are pirates going legit even.

        My point with my first post was that one should not disregard valid criticism based on a blanket statement like “anyone who criticized [...] has never been a freelancer faced with [...] having to fork out thousands of pounds to upgrade”.

        There are valid critics for Adobe’s new subscription system – even from people who occupy the freelancer position and have faced what you describe. While the pricing now is certainly acessible, the increased dependence that it creates can be troublesome.

      • http://www.webdesignerdepot.com/ Benjie — WebdesignerDepot

        I take your point Otto, but with a commitment of 12 months, as opposed to the old 18 month release cycle, you can now bail out of Adobe products 6 months earlier. Which means less of a dependence, not more.

      • Tim

        It is more of a dependence because you cannot keep using your software if you “bail” on using your subscription.

  • Tom

    Updating Adobe every 2 years when the new CS comes out is way more than 2 years of CC at $1,200 way worth the Creative Cloud subscription.

  • Tim

    I don’t think I’d call it revolutionary when Slicy and a couple other apps have been able to do this for over a year and much better than the way Photoshop is handling it.

    • http://www.webdesignerdepot.com/ Benjie — WebdesignerDepot

      The title refers to Adobe revolutionizing *Photoshop*.

      • Tim

        Yes, I know, but it is not revolutionized. It is slowly being brought up to modern times. They’ve also done a few things that take it back several years by screwing around with the way we edit shape layers. Fortunately, they’ve somewhat fixed it in this update. Still not as good as the way it was, though.

      • http://www.webdesignerdepot.com/ Benjie — WebdesignerDepot

        I think you’ve misunderstood the word revolutionized: it means a radical shift in the way something operates, for example what Adobe have just done to Photoshop.

      • Tim

        Than it is an evolution, not a revolution. I think you misunderstood what the word revolution means.

      • http://www.webdesignerdepot.com/ Benjie — WebdesignerDepot

        I’m sorry Tim, but an evolution would be a development of existing features.

  • Tsk tsk.

    I have a strong feeling that this article was paid for by Adobe. Way to go, WedDesignerDepot.

    • http://www.webdesignerdepot.com/ Benjie — WebdesignerDepot

      I have a strong feeling that this comment was paid for by Sketch. Way to go, Tsk tsk. :P

      We do occasionally run sponsored posts but when we do they’re clearly marked as such.

      My opinions aren’t for sale, and I stand by everything I said above. I could have slammed the new PS update and it would have made no difference to my bank balance whatsoever — but, credit where credit’s due: it’s a great update to PS.

      • Tim

        Except, that you can’t specify a folder that you want the exported assets to go in. They are automatically placed in a folder within the folder where the PSD exists. And you can’t rename that folder.

      • http://www.webdesignerdepot.com/ Benjie — WebdesignerDepot

        Yes, you can. You can save to different folders, and even save to remote servers. All with a little JavaScript.

      • Tim

        If you know Javascript and can write your own actions. You can’t do it right from the layers panel like you can with Slicy.

      • http://www.webdesignerdepot.com/ Benjie — WebdesignerDepot

        I’m not sure anyone who doesn’t know, or can’t learn, a bit of JavaScript should be building a website anyway.

        Best to hand that over to someone who pretends they know JavaScript and can Google for plugins.

      • Tim

        Users of Sketch wouldn’t have to pay someone to comment against Adobe. I am using Sketch more and more instead of Illustrator. It is forward thinking, which Illustrator is not. And by the way, Sketch wouldn’t be paying anyone, Bohemian Coding would (the company that makes Sketch). That’s like saying Photoshop paid you to make this comment.

      • http://www.webdesignerdepot.com/ Benjie — WebdesignerDepot

        Whatever way you want to slice it, Adobe didn’t pay us a penny to report what I consider to be a significant development in one of the tools *most* web designers use everyday.

  • http://www.webdesignerdepot.com/ Benjie — WebdesignerDepot

    If you choose to bail out you either don’t want the software or are switching to an alternate, in which case you can open your files with that.

    There’s also the one-month subscriptions for anyone that needs temporary access.

  • Dave

    This is a nice addition, but I still prefer the SuperSlicr action… it just feels a bit more fluid. http://www.mightymeta.co.uk/superslicr-ditch-the-slice-tool/

  • Tim

    The major downside is that you won’t be able to open your Photoshop or Illustrator (etc) file once you cancel your subscription unless you have older versions installed and you save your files down to those older versions.

  • Otto Robba

    Being cheaper is different from creating less dependence.

    If you travel, for instance, to Russia and try to log into your Creative Cloud account, you get effectively blocked. Creative Cloud only works on countries which have it enabled.
    This did not happen when using the licensed versions which could be acquired on retail at discounted prices even.

    It is cheaper to use Aviary than Illustrator but that is an extremely dependent solution.

    You could bow out after one week and keep using Photoshop 7, as far as licensing goes. And yes, it is unfair to european citizens with the euro/pounds pricing.

  • Kyle Hale

    Why am I not seeing the new update in my Application Manager?

  • http://www.ducktoes.com/webdesign Ducktoes Web Design

    This is a great post. I don’t know how to use the Generator yet but I like how it exports to html which is great for both SEO and web design.

  • Frank Neulichedl

    The price difference is not that bad if you detract the european VAT – as US/CA prices are without sales tax

  • ramatsu

    Is there any way to specify the scaling algorithm when generating scaled assets? Nearest neighbor, various bicubics, etc? It would sure be good to be able to tune the appearance of the generated files instead of getting whatever the default appears to be, which is no mui bueno for graphic images (vs. photos)

    • http://www.webdesignerdepot.com/ Benjie — WebdesignerDepot

      Yes, you can. There are quite a few options provided by default, but any time you want a bit more control there’s the option of writing your own plugin.

  • Renamy
  • http://www.webdesignerdepot.com/ Benjie — WebdesignerDepot

    I think the reason is probably that Adobe sees Photoshop as its most important product, and as such tries to cram everything into it.

    Illustrator would certainly benefit from something like Generator but I’d hate to see it get bogged down in all the unnecessary features Photoshop has stuffed into it.