PSD.js est un script Javascript permettant d'ouvrir, et donc de lire, un fichier Photoshop (PSD). Ses fonctionnalités permettent d'enregistrer le PSD en PNG, d'avoir un rapport sur les calques et leurs propriétés, ou carrément de parcourir les calques du PSD. Dans cet article, nous allons voir comment convertir un fichier PSD en PNG ; et comment afficher les propriétés des calques.

La documentation de psd.js est disponible ici.

Installation

Pour l'exemple, créez un dossier dans lequel vous ouvrez une invite de commande (terminal) pour y insérer :

npm install psd

Si vous avez un fichier package.json, ajoutez simplement psd dans les paquets.

Convertir un fichier PSD en PNG

Dans le dossier d'exemple, créez un fichier Javascript (je l'ai nommé test.js) et insérez-y le bout de code ci-dessous. Changez le nom du fichier PSD par le votre, en ayant bien entendu au préalable placé votre fichier Photoshop dans le dossier.

Le script est basique : on ouvre le PSD et on lance la fonction kivabien :

var PSD = require('psd');

PSD.open('fichier.psd').then(function (psd) {
    return psd.image.saveAsPng('fichier.png');
}).then(function () {
    console.log('Ayé !');
});

Pour lancer le script, dans votre terminal, écrivez :

node test.js

Le fichier PNG devrait être créé au même niveau que votre fichier PSD.

Export de la structure du PSD

La fonction export() de tree() permet d'afficher sous forme d'objet JSON l'arborescence de la structure du fichier PSD.

var PSD = require('psd');

PSD.open("fichier.psd").then(function(psd) {
    console.log(psd.tree().export());
});

Résultat obtenu :

psd-cli

Si vous souhaitez convertir un PSD en PNG simplement, avec une ligne de commande, installez psd-cli :

npm install -g psd-cli

Ainsi, avec la commande psd fichier.psd -c, vous créez un fichier PNG de votre PSD. Simple, non ?!

Vous pouvez même récupérer le contenu des objets texte dans un fichier .txt :

psd fichier.psd -t

Plus d'infos sur le README du projet.