Although quite a few developers advocate designing in the browser, not least because of RWD taking over, the fact remains many designers remain wedded to Photoshop when creating interfaces. The problem is, Photoshop was initially designed as a retouching tool, and although it’s taken on features for working with layout, it’s still a frequently clunky tool for dealing with web design.
Cazoobi Creative Solutions owner Norm Sheeran is one such designer who's remained fond of Adobe's giant. He told .net that he’s “always found Photoshop to be the most flexible app for design, and without a doubt it offers the most features”. However, having also been frustrated with Photoshop’s drawbacks, Sheeran has created WebZap, which he said was “a complete Photoshop plug-in with a number of different tools and workflows specifically for web developers”.
According to Sheeran, the project was in part inspired by his earlier creation, DevRocket, which provides the means for iOS app designers to rapidly create mock-ups: “It was readily accepted by the iOS dev community, and I got a bunch of requests asking if I could make something similar for web designers.” Immediately eschewing the idea of code output, Sheeran decided to focus entirely on creative visual design, that point when you “first fire up Photoshop and start thinking about layouts, colours and styles.”
The resulting plug-in enables you to create layouts based on a 960 grid system, with a web page broken up into three areas: navigation, feature and fold. “There are a range of different smaller layouts you can place in these areas, allowing you to create custom layouts within seconds,” added Sheeran, who pointed out these could work well when designing initial ideas with clients, instead of scribbling on bits of paper. In addition, the plug-in provides the means to quickly add form buttons, create text, and style text across an entire layout. The majority of components are editable, said Sheeran: “The only raster layers generated are photo images in placeholders, and they’re just for mock-ups, so you can replace them with your own. All UI components and text generated by WebZap uses standard Photoshop text and custom shape layers, meaning you can change things however you want.”
WebZap is available from webzap.uiparade.com, priced $15. Minimum requirements are Photoshop CS5.
