Having been in the business of building the internet for longer than we care to remember (since Macromedia Flash, Adobe Fireworks and Director), we at LEWIS have spent thousands of pounds and countless hours upgrading and installing the latest software updates.
Historically, we used Illustrator to craft our web designs. With features such as Smart Guides and a more intuitive grid system it was far superior to Photoshop, but there was always something that didn’t feel quite right. Handing those complex Illustrator files to the front-end development team was unfair. It made their job more difficult and it would often result in the designers spending extra time refining images to ensure they were pixel perfect.
So, in 2012 we reviewed our process and took the decision to switch to Photoshop. Illustrator had served us well but Photoshop had come a long way and offered a much better workflow. At that point, CS6 was the latest version and after a short transition, we started to see results. Smart Objects and Layer Comps saved time by allowing us to test multiple layout options for internal and client reviews. Being able to design three or four options for navigation styles and flick between them to make decisions was nothing short of a revelation.
When Adobe announced CC and forced the industry into the controversial subscription model we were hoping for more innovative features. We weren’t disappointed when we found Generate Image Assets – it was just a game-changer for everyone in the studio. GIA replaced the cumbersome slice tool that cut images like a sledgehammer and saved so much time for the front-end development team.
It combined slicing, file naming and exporting images for web, all in real time. It had so much potential but it also meant we needed to rethink the way design and technical teams worked in the studio. Every designer works slightly differently, and so does every developer. So I’d never suggest a one size fits all solution. But figuring out the basics and ensuring that the project teams are on the same page at the outset is crucial.
Our designers are very strict with the naming and organisation of layers. Keeping them in Layer Groups and in a logical and hierarchical structure is critical to taking advantage of Generate Image Assets. Header, navigation, heroes, page content and footers should all flow logically. For developers, we ensure that naming conventions, image size targets and the requirement for retina and breakpoints for responsive images are all considered. This helps the designers set up documents and gives the developers the assets they need to build the pages into workable HTML.
It means they can focus on web standards, framework, browser compatibility and validation rather than having to waste time wrestling with messy PSD files supplied by designers. The first project that gave us the opportunity to trial the new workflow in full was the XCP Professional website. As usual, we started with UX planning and developed the technical specifications. The design team then began crafting the page designs in Photoshop. We prefer a mobile-first design process but clients often need to see how their brand and products will look on the big screen so we tend to do this in parallel with desktop design. The designs were generated at double size to cater for retina devices. Then, for internal and client review, we maximised the use of Layer Comps. This allowed us to test out colour combinations, typographic treatment, user interactions and navigation options. We used the handy ‘Export Layer Comps to files’ script to export JPG files and then built prototypes using Invision.
Once all pages were client approved, we were ready to prep our files for Design to Build handover and cue Generate Image Assets. Our PSD files were meticulously organised, all assets were neatly filed in layer groups, image masks were applied where required and all elements were named according to the syntax our development team had specified.
We ran a handy script that allowed us to select multiple layers and automatically add the file extension to layers such as JPG, PNG, GIF. You can try the script here: bit.ly/R401SE. We then set up a default setting layer to export assets in multiple sizes for each of the responsive breakpoints. For example: <default hi-res/@2x + 75% mid-res/ 50% lo-res/>
This process generated three image assets from a layer: hi-res, mid-res and lo-res. The next step is where the magic happens: File menu>Generate Image Assets. Each asset was directly exported to the subfolders. Our developers used these images to build the site, and if we needed to amend anything we simply reopened the PSD to make the change; the files would then be updated in real time. Bingo, an efficient workflow that saves time and improves the quality of our work. See the result for yourself at www.xcp-protection.com