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

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

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

Inkで作成したガイドライン

Inkの特徴

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

サイトのキャプチャ

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

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

Photoshopのキャプチャ

アートボードにも対応

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の使い方

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

元のPSD

用意したPSD

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

Inkのパネル

Inkのパネル

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

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

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

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

サイトのキャプチャ

Inkで作成されたレイヤー

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

サイトのキャプチャ

Inkのオプション

top of page

©2017 coliss