デザインのガイドラインや指示書の作成が驚くほど捗るPhotoshopの機能拡張 -Ink

PSDのレイヤーに配置した要素のサイズやエフェクトやフォントなどの情報を1クリックでドキュメント化するPhotoshopのプラグインを紹介します。

機能拡張は無料で利用でき、Photoshop CC/CS6に対応しています。

サイズやフォントの情報など、1クリックで作成してくれます。

• Inkの特長
• Inkのインストール
• Inkの使い方

Inkの特長

ウェブページなどのレイアウトやさまざまな要素のサイズ、形、カラー、エフェクト、フォントの種類・サイズなど、指定したレイヤー上にある情報を1クリックでPSD上にドキュメント化します。

Ink

スタイルガイドなどでルールをしっかり決めておくと、デザインのアウトプットにぶれがなくなり、最終のプロダクトも想定通りに仕上がります。

Inkのインストール

まずは、インストーラーをサイトからダウンロードします。

Ink

CS 6にインストールしたので、その手順を。

1. ダウンロードしたファイルを解凍し、「CS6」フォルダ内の「Ink.zxp」をダブルクリックします。
2. Adobe Extension Managerが起動するので、指示に従いインストールします。
3. Photoshopを再起動します。
4. メニューの[ウインドウ - エクステンション]から「Ink」を選択すると、パネルが起動します。

Inkの使い方

使い方は簡単です。
PSDをご用意ください。

要素を配置したPSD

「Ink」パネルを起動します。

Inkパネル

レイヤーパネルから情報を書き出したい要素を指定し、インクマークのボタンをクリックするだけです。
サイズ情報だけ、選択範囲だけの時は、下のボタンをクリックします。

全情報を書き出すとこんな感じに、

Inkで各要素の情報を書き出し

書き出した情報は「_Ink」フォルダにまとめられています。

情報は「_Ink」フォルダに