Generator allows plug-ins to access rich information about open documents in real-time. Most people know that you can export web assets through Generator, but it can be used for so much more. Check out the custom Generator plug-in that Adobe employee CJ Gammon built to help automate the creation of an online comic strip for PBS:
In some companies, developers and designers attempt to automate workflows as much as possible, sometimes creating custom tools to streamline the process. But what if developers could tap into the tools their designers are already using? This is where Adobe Generator for Photoshop CC comes in. Generator allows you to access and automate commands and respond to changes in Photoshop.
We recently tried out Generator in an experiment with PBS Kids to bring one of their children’s comics to the web. They provided us with Word Girl, a comic that follows a child with super powers and a super vocabulary. Our job was to convert it into a web experience incorporating animation.
Because we were given flat artwork, we knew that we would have to break up the frames into separate layers in order to add animation, likely more than one layer for each cell. Ultimately there were over 200 individual images.
As you can imagine, this would be a pretty labor-intensive task with a number of challenges. We knew one challenge would be saving out all of these layers as optimized files with a consistent naming convention. We also knew it would be important to know the position and structure of each layer so that we could lay out the images correctly without manually positioning them. Because we wanted to animate the content within their cell frame, we would also need to mask layers so they would get clipped if they moved outside of the frame. Pulling this data from Photoshop and using it directly in our site would save us the trouble of creating these masks by hand.
The pain points we encountered can be categorized into two basic categories: asset generation and document structure.
- Asset generation is the ability to turn each layer into an optimized image with naming conventions to fit our needs.
- Document structure is obtaining key data like position and masks out of the document to use in building the animation.
Asset Generation
For asset generation, a lot of the work was done for us already. Photoshop CC ships with the ‘Image Assets’ Generator plug-in which allows you to use your layer name to automate the process of saving out all your layers as optimized web images. This plug-in is published on Github for anyone to tweak or improve.
Document Structure
To collect the document structure, we decided to create our own Generator plug-in using the ‘Image Assets’ plug-in as a starting point. Fortunately collecting the document structure is relatively easy. Since Generator runs on node.js, all the code is written in JavaScript and the Generator API provides access to the core PSD structure in JSON.
We were then able to create a method within our plug-in that saves this out to a .json file to be loaded into our website. This file contained not only the layer structure and names, allowing us to easily iterate through them and load the necessary images, but also the position of the layer’s bounds. This gave us the exact position our images needed to be placed at to reflect their position in the PSD.
The next step was to collect the clip path, so that images moving outside of their frame would be clipped appropriately. To do this we set up our Photoshop document with all the layers of each cell in groups. Then we created a vector mask on that group to be used as the clip path for the images. The vertices of a vector mask are not available in the document info JSON, but a recently added method in Generator allowed us to query the vector mask of a given layer. We used this to collect the vector mask data and include it with the document info.
Simply by running this script we automatically produced the images and a JSON file with the information we needed to reassemble the PSD in HTML. We were then able to go into the website and animate the layers manually (Yes, there are some things we still need to do manually, but maybe one day this will be solved too).
Building this custom solution likely saved weeks of time and frustration. This project is just one small example of how designers and developers can build custom workflows to speed up and simplify the tedious aspects of their job using Adobe Generator in Photoshop CC.
No comments:
Post a Comment