It’s not easy being a Web designer or developer these days. Never mind the CSS, JavaScript, and HTML5 coding—just dealing with the creation and tracking of images for multiple sites, mobile apps, and games can be enough to make your brain explode.
But if you use Photoshop CC to mock up Website or screen designs—or otherwise need to extract images from layered comps—help has arrived with Adobe Generator. This open-source platform technology, powered by a JavaScript API, is included among an array of updates and improvements to Photoshop in the new 14.1 version.
Adobe has already put Generator to work, using it to create two new plug-ins for Photoshop CC. One automatically delivers image assets in real-time, thus saving the time and effort of extracting, cropping, sizing, and exporting each image by hand. The other links Generator to Adobe’s new Edge Reflow CC Web tool, which specializes in creating responsive Web designs that adapt content to different screen sizes. With a single click, designers can insert assets directly into Edge Reflow, thus reducing tedious manual labor.
This technology automates real-time generation of image assets directly from the layers and layer groups in your design comp and lets developers use JavaScript to create customized plug-ins to Photoshop CC.
Adobe has released the Generator and the image asset generation features as open source projects to encourage developers to create additional tools and services to integrate with Adobe CC.
The Generator platform lets you tag layers and groups in Photoshop CC, which are then automatically saved and updated in real time as individual files in the formats you specify. You can export layers as JPEGs, GIFs, or PNGs with a variety of options such as scaling for Retina displays, various compression levels, and more. Changes are previewed in the browser.
From creating comps and images for multiple devices to controlling and updating how those assets look across screens of various sizes and formats, Generator promises to offer an easier and faster way for designers to communicate, test, view, and change the behavior of their designs—not to mention speeding up mundane, time-consuming production tasks. Just enable Generator in the Photoshop prefs and then enable it in specific documents.
Generator, as well as a slew of additional updates to Photoshop CC, are available immediately to Creative Cloud members. Adobe’s new Generator features for Photoshop CC and Edge Reflow also will be presented at the company’s upcoming Create Now World Tour. The first event is scheduled for September 19, in San Francisco.
Author: Jackie Dove
Jackie Dove is an insomniac tech writer and editor in northern California. A wildlife advocate, cat fan, and photo app fanatic, her specialties include Mac hardware and software, art, design, photography, video, and a wide range of creative and productivity apps and systems. Jackie now writes for a variety of consumer tech publications.