Adobe Photoshop Generator CC 14.1~ 向けのデザインワーク記録プラグイン、ShotThumb(ショットサム)ver1.0 をつくりました。

Shot Thumb | Adobe Photoshop CC Generator Plugin

スクリーンショット 2013-11-18 20.02.05

インストール方法と動作風景

スクリーンショット 2013-11-18 20.56.29

◎Mac
/Applications/Adobe Photoshop CC/Plug-ins/Generator/

◎Windows
¥Adobe Photoshop CC¥Plug-ins¥Generator¥ ←なければ作る

Shot Thumbからダウンロードして、
展開されたディレクトリ「shotback.generate」をコピーして上記のパスにペースト。
Photoshop CCを起動するとこんな感じに現れます。

スクリーンショット 2013-11-18 21.01.53

アウトプットはこのような形に。

スクリーンショット 2013-11-18 21.01.12

ShotThumbをつくった目的

プロのデザインワークを共有したい/みたい。

▶クールなデザインを生んでる人の作業は参考にしたい…よね?

・デザインアクティビティの可視化・解析

▶デザインのフィードバックの精度を上げる。

デザイン工数の試算と結果を明らかにしたい。

▶作ってやり直しを未然に防ぐ。1分1秒も無駄にしない

ShotThumb…はじめはただのスクリプトだった。

スクリーンショット 2013-11-18 20.18.39

①Ctrls2PNG.jsx  ワークフローを振り返るためのPhotoshopScripting|1 pixel|サイバーエージェント公式クリエイターズブログ

ちょうど去年、既にUIデザイン業務の性質上、「成果物でしか周囲が評価できない可能性が高く、ワークフローが不明瞭になりがち」という問題意識があって、デザイン作業のあれやこれやをエンジニアのGitみたくコミットログに出来ないかという観点でスナップショットを取るスクリプトを書いたんだ。

で、デザ13の山下君がシロクで内定者アルバイトを始めたのをきっかけに、

②ShotThumb.app アプリケーションに進化。

スクリーンショット 2013-11-18 20.05.30

いままで個人に適用してたものを、後輩にも使ってもらおうと思って、Applescriptベースで、定期的にJSXファイルを実行するアプリケーションを組み上げた。今年の1月くらいのお話。この時はMacオンリーの作業環境にしか適用できなかった。

そして、今

③Photoshop Generatorの組み込みプラグイン「ShotThumb」に進化。

スクリーンショット 2013-11-18 20.33.28

ShotThumbをヒトコトで言うと、「タイムラプス風にデザインワークを記録するツール」という感じになります。

話題のPhotoshop新追加機能「Generator」の構想がすごかった件。で紹介したように、Adobe Photoshop 14.1 でNode.jsが組み込まれるという凄まじいアップデートを遂げると同時に、SDK要らずで生成に特化したプラグインを作れる Generator(生成)のプラグインを自前で開発するための準備まとめ をご紹介しました。

実際に作ってる途中では、JSXファイルをevalするときに苦労した話とか。そもそも、日本語環境だと動かないeventメソッドがあったりとか、結構四苦八苦しましたが、Node.jsへの理解も深まり、先の構想もしきながら着地したところです。

ShotThumbの機能紹介

スクリーンショット 2013-11-18 20.58.13

1.ShotLog
▶作業アクションを起こすたびに、JPG画像がタイムスタンプとともに記録されていきます。

2.PSDファイル自動バックアップ
▶作業アクション数を刻むと、自動でPSDバイナリデータのバックアップが生成されます。

3.追加予定機能
ビデオログ、解析のためのJSONデータ提供を予定。

4.企業/研究機関 向け アクティビティモニタリング

▶ShotThumb解析環境も準備中です。 ご興味ある方は是非ご連絡をください!

今、デザイナーフレンズたちから貰ってる改善点。

・ある程度のスペックがないと重い
▶非同期書き出しにします。

・チェックのオンオフ設定の保存
▶記録できるようにします。

・webのhtml書き出しを利用した後だと出力がおかしい
▶非同期書き出しで解消予定。

そのうちなおします!(誰か手伝ってくれる方いないかな…)

Shot Thumb | Adobe Photoshop CC Generator Plugin

GitHub : https://github.com/takahirome/generator-shotthumb