PNG EXPRESS. Automated Design Delivery for Adobe Photoshop

From design to development

the fast, precise and repeatable way.
From design to development the fast, precise and repeatable way.
Buy now for $29

Works with both Mac & PC. Version 2.4.2
Requires Adobe Photoshop CS5 or newer.
PNG Express screenshot
Watch the video

What is it?

Design delivery, fast-tracked.

PNG EXPRESS is a Photoshop® plug-in that slices and exports your PSD document to individual PNG/JPG assets & icon fonts, and allows you to generate matching design specifications with concise information on dimensions, margins, font features etc. It's easy and flexible with full control for designers, while providing clear and consistent deliverables for developers. That means faster workflow, better communication, and more time for lunch and ping-pong matches.

Features


Export assets from Photoshop

Automatically export assets from PSDs

PNG Express allows you to slice a PSD into individual PNG, JPG, or SVG assets with ease and flexibility. 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.

New iPhone6+ support PNG Express automatically builds assets for iOS 1x, Retina @2x & @3x, and multiple Android densities all at once from any source resolution. The integrated Android 9-Patch export greatly simplifies the setup and creation of 9-patches for different densities. Your vectors, smart objects and layer styles are scaled in full quality, and assets will be saved 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.

If you prefer vectors, then PNG Express also lets you export assets directly to a SVG icon font - with precise support for both single shapes, groups of shapes, and vector masks.

Made to fit your style

PNG Express gets out of your way while you work. You don't need to change your existing design workflow, or deal with unnecessary layers making a mess of your Photoshop document. Instead, with a few self-explanatory tags added to layer names you're free to keep focus on designing your way and in your preferred order. You are free to create overlapping slices, to create any number of asset states and variations following your own naming conventions, and you're free to save them where you want. No fuzz, just your assets as if you had carefully sliced and saved them manually.

Precise and independent assets

PNG Express takes accuracy very seriously. Assets are exported in isolation on a transparent background with pixel perfect precision and automatically trimmed to the smallest size possible. If needed, you can define the area to export manually, or choose to export an asset without transparency merged with the rest of the layers in the PSD. The export area and file name of each asset is accessable within the PSD itself, making it a great tool for iterative workflows and team work.



Measurements and detailed design specs

Create specifications fast and accurately

Creating specifications that clearly and accurately spells out the details in your design for developers can be a tedious task. With PNG Express you can create precise specs in just a few minutes!

And because it works in tandem with the asset exporting it is able to tie in information relating to the actual assets accompanying the specs. This means that PNG Express uses the sizes of actual PNG assets when specc'ing margins, dimensions and positions, while also referencing the actual filenames for easy indentification by developers.

Flexible and scalable

You can use PNG Express to spec any layer or group in any PSD document whether it contains layers tagged as assets or not. The generated specs are fully editable and placed in a seperate layer group for easy organisation.

Write Metadata to External Files

With PNG Express you can not only export the image assets from your Photoshop document, but also write all the associated metadata to external files. There is built-in support for JSON, XML and simple HTML mockups, but the powerful template system allows you to fully customize the metadata output to fit your exact neeeds.

See How It Works

"I use PNG Express all the time. It's awesome." Diego Monzon, User Interface Designer

"... makes exporting assets a breeze." Michael Flarup, Designer at Robocat

"bought it, cried with bloody tears over the countless hours spent slicing Photoshop files without it! It's BRILLIANT!" Martin Velchevski, UX/UI/WEB Designer

"PNG Express is an absolutely must-have extension for all mobile and web designers who quickly want to export perfectly sliced assets and measurements directly from Photoshop." Mariusz Ostrowski, Pixle

"PNG Express is full of amazing features (..) It works beautifully, requires little effort, and makes the usual chore of exporting a large .psd a less daunting task." Review on The Industry, by Ari S

"PNG Express is about to make your life easier." Rated 5/5 in Photoshop User Magazine

Prefix tags working on single layers and groups:
PNG: Defines an asset to be exported as a PNG file.
JPG: Defines an asset to be exported as a JPG file.
SVG: Defines an asset to be exported as a SVG icon font.
STATE: [Optional] Defines a state inside a PNG/JPG/SVG group. Asset will be exported in all states.
VAR: [Optional] Defines a variant inside a PNG/JPG/SVG or STATE group. Asset will be exported in all variants in all states.
// [Optional] Prevent layer or group from appearing in any exported file
Special tags:
/folder/ [Optional] Export asset to a sub-folder named folder (example: PNG:/icons/search)
-m [Optional] Enables merged export. The asset will be merged with other visible layers.
×
×
×
×

Changelog

v.2.4.2
v.2.4.1
v.2.4.0
v.2.3.1
v.2.3.0
v.2.2.0
v.2.1.1
v.2.1.0
v.2.0.1
v.2.0.0
v.1.4.1
v.1.4.0
v.1.3.5
v.1.3.0
v.1.2.1
v.1.1.0
v.1.0.1
×