After designing a website or app in Photoshop, you’ll usually need to slice and export the design so it can be developed into a working product. There are a few apps and Photoshop extensions that we’ve taken a look at in the past such as Slicy (née Layer Cake), DevRocket, and WebZap. All are very useful for these kind of tasks, and today I’d like to introduce another.
PNG Express is a great Photoshop extension created by Rune Lund-Hermansen. It not only exports pixel-perfect PNGs, but also guides and spec sheets for developers (or references for personal use). Let’s dig a little deeper, shall we?
Unlike Slicy, a separate Mac app, PNG Express’ design takes on a lot of the default Photoshop styling.
This setup has its pros and cons, but if you’re like me you’ll appreciate having one less dock icon. One little gripe I had with the UI is that it’s not yet optimized for retina displays. Apart from that minor visual issue, everything else looks fine. The placement of buttons is right where you’d want them, with the largest button being the ‘Export Assets to PNG’ one, implying that it’s the button used most frequently.
PNG Express is full of amazing features. This may sound like hyperbole, but it’s not. This extension is clearly a special one. When you’re slicing a .psd into multiple .pngs (for, in this case, a certain website’s redesign), you’ll not only need to export pixel-perfect images, but their exact dimensions and margins as a simple spec sheet to refer to while turning the .psd into a working product. PNG Express performs these actions beautifully, with little or no hassle. It even exports font styling options for easy conversion to CSS (including the hex color codes).
Simply add tags to names of layers or groups, and you’re ready to export all – or only the selected – assets from your PSD with a single click.
If you’re exporting for multiple resolutions then just scale your PSD, adjust if needed, and then hit the Export button again to have all the assets saved out with exactly the correct sizes and file names. You can even export multiple states and variations of buttons etc. in one go, with automatic file naming and sizing.
My favorite feature of PNG Express is a small one, but a very important one for iOS designers. It will automatically add a chosen suffix to your layer names (in this case @2x), making iterative design for multiple displays super simple. Another feature that makes my workflow much simpler when using PNGE is the unobtrusive, automatic layer tagging process. Unlike in Slicy, you don’t have to manually name your layers, or add a suffix. This means you can focus on your design, and not on typing (you can leave that up to us).
I can assuredly recommend PNG Express as a great alternative to other slice/export applications. It works beautifully, requires little effort, and makes the usual chore of exporting a large .psd a less daunting task. If you’re interested in obtaining your own copy of PNG Express, you can purchase it here for $29, a reasonable price for a great piece of software.