Photoshpデザインデータからのhtmlコーディングどうしていますか？

皆さんはデザインデータからのhtmlコーディングどうされてますでしょうか？
ざっくりと手順を切り分けると次のようになるかと思います。

・画像切り出し（スライス、画像アセット）
・divフレーム組み
・画像や背景をセット
・テキストスタイルをセット
・タイトル、メタタグ、リンクをセット
・cssアニメーションやエフェクトの追加

で、これらを省コストで実現するために
sass やejs（当事務所ではgulp-twig）やcofee scriptなどを使用しているかと思います。
画像の切り出しは Photoshopメニューの「画像のアセット」や「Slicy」アプリでしょうか。
ですが、

せっかく sassやejs でnode.js を使用しているのだから .PSDファイルを直接 node.js でさわれないかしら・・・？

と思って npm で探してみると、あります。

npm – psd
https://www.npmjs.com/package/psd

こちらを使用するとPhotoshopのレイヤー構造をjsonオブジェクトに変換できるようです。

npm-psdの使い方

1. npm – psd のインストール は ターミナルから以下のコマンドで行います。

npm install --save psd

2． .pdf データの読み込みとデータ構造の表示

let psd = require("psd").fromFile('test.psd');
psd.parse();
let data = psd.tree().export();
console.log( data );

結果例

{ children: 

   [ { type: 'group',

       visible: false,

       opacity: 1,

       blendingMode: 'normal',

       name: 'grid',

       left: 161,

       right: 1334,

       top: -1,

       bottom: 2001,

       height: 2002,

       width: 1173,

       children: [Object] },

     { type: 'group',

       visible: false,

       opacity: 1,

       blendingMode: 'normal',

       name: 'cursor hand',

       left: 889,

       right: 1332,

       top: 519,

       bottom: 1596,

       height: 1077,

       width: 443,

       children: [Object] },

     { type: 'group',

       visible: false,

       opacity: 1,

       blendingMode: 'normal',

       name: 'Header',

       left: -216,

       right: 1683,

       top: -1,

       bottom: 173,

       height: 174,

       width: 1899,

       children: [Object] },

こんな感じで、 .psd データの中を表示することができます。

次回はこの node.js psd モジュールを使用して psd ファイルからテキストデータとcssスタイルを取り出してみたいと思います。