Automated Workflow Using Photoshop Generator
We wanted to explore how web designers and developers could leverage automated workflows to optimize their process. Photoshop Generator is a node server running inside of Photoshop which allows you to respond to changes and access the PSD to generate assets.
PBS Kids provided a word girl comic PDF they wanted converted to the web. We didn't just want to have a static experience, we wanted it more engaging, so we decided to animate it. This involved breaking up the PDF in Photoshop into a lot of separate layers. Updating and saving out all these layers and then updating the code to load the files would be a tedious process.
Fortunately with Generator we were able to write a script that saved out all of these layers optimized for the web along with a JSON file describing the layer structure. This allowed us to associate layers in groups based on their frame, as well as leverage other features like layer masks for clipping the frame layers. The web application was built using HTML Canvas for dynamically drawing and positioning the frame layers so we could animate to them in the manner they were designed in the PSD. We also used masking in canvas to clip the frames.
We ended up with an optimized workflow generating all the assets directly from Photoshop in a format that could easily be digested by the web client, that worked great on mobile devices as well. The end resulting application lived on the PBS Kids website.
Check out Word Girl Here.