要素のサイズやカラー、フォントなどデザイン情報ワンクリックで書き出してくれるphotoshop plugin 【Ink】が便利

photoshop

デザイン情報をワンクリックで書き出してくれる便利なphotoshop plugin【Ink】(インク)の紹介です。

INK公式サイト画像
INK公式サイト画像

要素の名前、フォント、レイヤースタイル、縦幅、横幅、透明度、カラーなどの情報を、書き出して表示してくれる便利なpluginです。
うまいこと使ったら業務の引継ぎ時や、仕様を伝える時、コーダーに渡す時などに効率化出来るかもしれませんね。

photoshopの対応バージョンはCS6以降です。

スポンサーリンク

インストール方法

Ink. A Photoshop documentor plugin

http://ink.chrometaphore.com/

上記公式サイトの【GET INK】からファイルをダウンロードする。

zipファイルになっているので解凍する。

INKインストール
INKインストール

解凍して出来たファイルの中に、【INK.zxp】というファイルがあるので、ダブルクリック。

INKインストール2
INKインストール2

アドビエクステンションマネージャーが立ち上がるので、そのまま承諾→インストールと進めます。

これでインストールは完了です。
早速使ってみました。

Inkの使い方

photoshopが立ち上がっていたら一旦閉じてから起動しなおさないとダメみたいです。
起動したら、【ウィンドウ】→【エクステンション】に【INK】が追加されているので、表示します。

INKの使い方
INKの使い方

表示後は上記画像の左側のパネルが表示されます。
要素を選択した状態で、それどれのボタンを押せば動作します。

どんな感じに出力されるかというと・・・

INKの動作サンプル
INKの動作サンプル

こんな感じです。どうですかね・・・?
【__Ink】フォルダーが生成されるので、計測分のレイヤーはそこに格納されています。
文字色や文字サイズ、表示位置が気に食わない場合はグループ分けされているレイヤーが入っているので変更できます。

手作業で仕様をレイヤー上に書くよりも結構効率が上がる気がします。
問題点としては【日本語で書き出せない】という事。
レイヤー名を日本語でつけていたらnameの部分が空白になります。

あとは公式サイトにある画像のように、要素と要素の間のピクセル値も表示出来るかと思ったんですが、残念ながらやり方がわからなかったです。もしかしたら選択範囲で出力するのをうまいこと使ってやるのかもしれません。(誰か教えてくださいな・・・)

この記事が気に入ったら
『いいね』しよう!


PAGE TOP