Webサイトのガイドライン作成に欠かせないPhotoshopの機能拡張が嬉しいバージョンアップ！アートボードにも対応 -Ink

PSDのレイヤーに配置した要素のサイズやエフェクトやフォントなどの情報を1クリックで書き出すPhotoshopのプラグイン「Ink」が機能を強化してバージョンアップしました。

Inkは無料で利用でき、Photoshop CC2015/CC/CS6に対応しています。
↓のブルーの箇所は、Inkで1クリックで作成できます。

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

Inkの特徴

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

指示書、ガイドラインやスタイルガイドなどの作成が驚くほど、楽になりますね。

しかもInkは、1.5からアートボードにも対応！
※最新版は、1.5.3（2015/12/9 公開）

アートボードにも対応

Inkのインストール

CC2015のインストールは以前の方法から変わり、少し面倒になりましたが、問題なく利用できます。
※CC, CS6は「Ink.zxp」をダブルクリックし、指示に従うだけでインストールできます。

まずは、下記ページから「Ink.zip」をダウンロードします。

Ink

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

1. ダウンロードした「Ink.1.5.3.zip」を解凍します。
2. CC2015で利用する時は、「Ink.1.5.3」内の「Photoshop CC 2015」フォルダを開きます。
3. 「Photoshop CC 2015」フォルダ内の「Ink.zip」を解凍します。
   ※フォルダの中身は変更しないでください。
4. 解凍したInkフォルダを移動するフォルダを開きます。
   OS X: ライブラリ\Application Support\Adobe\CEP\extensions\
   Win 64: C:\Program Files (x86)\Common Files\Adobe\CEP\extensions\
   Win 32: C:\Program Files\Common Files\Adobe\CEP\extensions\
5. 「extensions」フォルダ内に「Ink」フォルダを移動します。
   ※「extensions」フォルダが無い場合は、「CEP」内に作成します。
6. Photoshopを再起動します。
7. メニューの[ウインドウ - エクステンション]から「Ink」を選択すると、パネルが起動します。

※インストール時は、フォルダ内の「IMPORTANT.txt」を必ずご確認ください。

インストールしたInkのパネル

Inkの使い方

Inkの使い方は、簡単です。
まずは、PSDを用意してください。

用意したPSD

メニューの[ウインドウ - エクステンション]から「Ink」を起動します。

Inkのパネル

情報を書き出したいレイヤーを指定し、インクマークのボタンをクリックします。
サイズは幅だけ高さだけ、情報はカラーだけエフェクトだけ、そして選択範囲だけを書き出すこともできます。

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

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

Inkで作成されたレイヤー

パネルの3つのタブでは、書き出す項目とデザインが変更できます。

Inkのオプション