Building Resilient Systems on AWS: Learn how to design and implement a resilient, highly available, fault-tolerant infrastructure on AWS.

Convert PSD to PNG with Node.js

By David Walsh on November 22, 2015

Automating and manipulating media is a fascination of mine, partly because I don't understand the magic behind it and partly because the idea of turning one thing into another is fun and useful. That latest media tool that has piqued my interest is a JavaScript tool called psd.js.

psd.js is a project that allows you to read PSD files, including:

Document structure and size
Layer/folder size + positioning, names, visibility, and opacity
Font data (via psd-enginedata)
- Text area contents
- Font names, sizes, and colors
Color mode and bit-depth
Vector mask data
Flattened image data
Layer comps

What the media converter and JavaScript lover in me found most awesome was one basic feature: converting a PSD to PNG with JavaScript!

var PSD = require('psd');
 
PSD.open('homepage.psd').then(function (psd) {
  return psd.image.saveAsPng('homepage.png');
}).then(function () {
  console.log('Finished!');
});

That's a nice, tidy API there and I love that it doesn't require anything other than JavaScript (many other Node.js image libraries require ImageMagick on the machine). Of course converting PSD to PNG is easy with ImageMagick too, but being able to use Node.js instead opens a whole host of opportunity!

Recent Features

By David WalshJuly 28, 2011
Animating CSS3 Transforms with MooTools Fx
I recently posted an awesome (if I may say so myself) CSS3 / MooTools tutorials called Create a Photo Stack Effect with Pure CSS Animations or MooTools. The post presented two ways, a pure CSS method or MooTools-powered class, to duplicate Google+'s elegant photo stack...
By David WalshNovember 26, 2012
Animated 3D Flipping Menu with CSS
CSS animations aren't just for basic fades or sliding elements anymore -- CSS animations are capable of much more. I've showed you how you can create an exploding logo (applied with JavaScript, but all animation is CSS), an animated Photo Stack, a sweet...

Incredible Demos

By David WalshJune 22, 2009
MooTools Fun with Fx.Shake
Adding movement to your website is a great way to attract attention to specific elements that you want users to notice. Of course you could use Flash or an animated GIF to achieve the movement effect but graphics can be difficult to maintain. Enter...
By David WalshJuly 28, 2011
Animating CSS3 Transforms with MooTools Fx
I recently posted an awesome (if I may say so myself) CSS3 / MooTools tutorials called Create a Photo Stack Effect with Pure CSS Animations or MooTools. The post presented two ways, a pure CSS method or MooTools-powered class, to duplicate Google+'s elegant photo stack...

Discussion

Simon
Wow I have been thrilled to learn about this cool feature and implemented a small Node binary to deal with PSD files

For those running Linux/Mac who are tired of opening a VM and/or cracking Photoshop just to be able to see the new web design you need to integrate… Just install this module :
```
npm install -g psd-cli
```
You are then ready to see the real rendered PSD in a PNG file, without lousy Gimp changes by typing :
```
psd my-file.psd -o
```
Link to the NPM package : https://www.npmjs.com/package/psd-cli
Ryan LeFevre
Thanks for the shout out David! I know you’re primarily focused on Javascript, but for completeness sake I figured I would mention that the Ruby version of the library is currently more feature complete: https://github.com/layervault/psd.rb

I am planning on porting the rest of the features in the Ruby library to the JS version in the near future though!
Roger
This is super! just been looking at jspdf also, Great what can be done on the client side these days.
Doron
Ryan, it’d be cool to see feature parity with the Ruby version! I wonder how much support is currently provided for working with PSD layers, e.g. applying transformations such as shadows and overlays (See: https://support.cloudinary.com/hc/en-us/articles/115001217949 for examples).