29
25

More than 5 years have passed since last update.

PSD から レイヤー情報ぶっこ抜くのにもう jsx とか使わなくて良い

Last updated at Posted at 2017-01-17

こんにちわ、ユニバの MJ です。

今日は、ある案件で PSD ファイルから座標とってそれを json 形式で管理したいという課題が出た時の対処について話します。
この話って業界的には当たり前なんですかね。。。?
当たり前だったら恥ずかしい話やで〜

よくある既存の方法

photoshop では 作業効率を爆上げするスクリプトを .jsx という拡張子を使って実装する。
ただ、これを作るのはだるい。
photoshop で debug しなければいけないし、別に PSD 開きたいわけではなく、純粋にデータが欲しい。
ExtendScript Tookkit なるものがあるが、これで書く気にもならなかった。

psd.js

神ツールがあった。
psd.js

これを使えば、psd をパースして、中身を見れます。便利な関数つき。

how to use

psd.js は node module です。
次のような構成を例にしましょう。

- node_modules (`npm install psd` を実行しましょう)
- app.js
- test.psd
app.js
var path = require('path');
var PSD = require('psd');
var psd = PSD.fromFile(path.resolve(process.argv[2]));
psd.parse();

console.log(psd.tree().export());

こうしたら terminal で

node app.js test.psd

を実行します。
すると terminal では psd の情報がベローっと出ているはずです。神。

終わりに

node 経由で psd の中身が見れるなんて夢が広がりますな。

29
25
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
29
25