Photoshopスクリプト（jsx）│UIパーツのサイズ情報を自動作成する方法│Ink

PhotoshopでUIデザインを作成する際、パーツのサイズ情報を自動で表示できると便利です。

この記事は2017年当時にInkで寸法情報を生成した記録です。

掲載リポジトリはCC 2015向けの案内です。作者による2016年の操作解説もありますが、使用する配布物の版によって対応機能は異なります。現行Photoshopでの互換性は今回確認していません。

Inkの導入方法（旧環境の記録）

STEP.1 Inkをダウンロード

1. 上記の配布元で対応環境と配布物を確認します。リポジトリ全体のZIPと、拡張機能のインストール用Ink.zipは同じものではありません。
2. Photoshop CC向けのインストール用Ink.zipがある場合、そのファイルを解凍します。

STEP.2 Inkのインストール

1. 以下は当時の記事で使った配置先です。現在のインストール先として流用せず、配布元のOS別手順と使用中のPhotoshopの対応状況を確認してください。

C:\Program Files\Adobe\Adobe Photoshop CC\Required\CEP\extensions\Ink

2. Photoshopを再起動します。

Inkの使用方法

STEP.1 Inkを起動

1. Photoshopを開きます。
2. [ウィンドウ] → [エクステンション] → [Ink]を選択します。

STEP.2 レイヤーのサイズ情報を表示

1. 寸法を表示したいレイヤーを選択します。
2. Inkパネル内の水滴ボタンをクリックします。
3. 自動でサイズ情報が表示されます。

STEP.3 表示範囲の調整

• 注釈がカンバスの外にはみ出し、文書の寸法を広げてもよい場合は、[イメージ] → [すべての領域を表示]を選びます。これはズーム変更ではなくカンバスを拡張する操作なので、固定寸法の納品用PSDでは複製した文書で行ってください。

Photoshopのほかの操作は、まとめからご覧いただけます。

あわせて読みたい

Photoshopの使い方｜保存・レイヤー・一括処理から探す Photoshopでやりたい作業から記事を選べます。複数の画像に同じ編集を繰り返す場合は「アクション・一括処理」、JSXファイルを初めて使う場合は「スクリプトの導入・実…

環境設定とカンバスの記事は、ほかにもあります。

あわせて読みたい

Photoshopスクリプト（jsx）│ガイドをコピー＆ペーストする方法 Photoshopで作業する際、ガイドを別のドキュメントにコピーしたい場面があります。 この記事では、ガイドの座標をスクリプトで保存し、別の文書へ移す方法を扱います。 …

あわせて読みたい

Photoshopスクリプト（jsx）│パーツの余白を計測する方法 Photoshopでデザインを作成する際、パーツの余白（マージン）を素早く測定できると作業を効率化できます。 この記事では、Size Marksで長方形の選択範囲を寸法線と数値…

あわせて読みたい

Photoshopスクリプト（jsx）│カンバスサイズを偶数にリサイズする方法 Photoshopでカンバスサイズを偶数にリサイズする方法。 Photoshopでデザイン作業をしていると、カンバスサイズが奇数ピクセルになってしまうことがあります。 書き出し…

あわせて読みたい

Photoshop│カンバス外の描画を削除する方法 Photoshopで作業をしていると、カンバス外に不要な描画が残ってしまうことがあります。 最短手順は「Ctrl + A（Mac: Command + A）で全範囲選択 → [イメージ] → [切り抜…

まとめ

• Inkを導入すると、UIデザインのパーツ情報を自動で表示可能
• ボタンひとつでレイヤーのサイズを確認できるので、手作業の手間が省ける
• 掲載リポジトリのCC 2015向けREADMEには、アートボードと同種の複数レイヤー効果は未対応とある。ただし、作者の2016年の解説にはアートボード内での動作も記載されており、版を区別する必要がある

寸法の確認だけなら、まずプロパティや変形の数値表示を使います。

Inkは旧環境で注釈を生成した資料として参照し、動作が確認できない環境へ無理に導入しないでください。

よくある質問：Inkでレイヤーのサイズ情報を表示する（旧環境の記録）

Inkとは何ですか？

PhotoshopでUIデザインを作成する際に、パーツのサイズ情報を自動で表示できる拡張機能です。この記事は、2017年当時にInkで寸法情報を生成した記録です。

現在のPhotoshopで使えますか？

記事では、配布元はCC 2015向けの案内を掲載していますが、現行Photoshopでの互換性は今回確認していないとしています。Inkは旧環境で注釈を生成した資料として参照し、動作が確認できない環境へ無理に導入しないでください。

導入するときに気をつけることは何ですか？

配布元で対応環境と配布物を確認します。リポジトリ全体のZIPと、拡張機能のインストール用Ink.zipは同じものではありません。記事の配置先は当時のものなので、現在のインストール先として流用せず、配布元のOS別手順と使用中のPhotoshopの対応状況を確認してください。

どうやってInkを起動しますか？

Photoshopを開き、[ウィンドウ] → [エクステンション] → [Ink]を選択します。

レイヤーのサイズ情報はどう表示しますか？

寸法を表示したいレイヤーを選択し、Inkパネル内の水滴ボタンをクリックします。自動でサイズ情報が表示されます。

表示がはみ出している場合はどうしますか？

[イメージ] → [すべての領域を表示]でカンバスを拡張できます。表示倍率だけを変える操作ではありません。固定寸法を保ちたい文書は複製してから試してください。

Inkで対応していないものはありますか？

掲載リポジトリのCC 2015向けREADMEには、アートボードと同種の複数レイヤー効果は未対応とある。ただし、作者の2016年の解説にはアートボード内での動作も記載されており、版を区別する必要があります。

寸法の確認だけなら、Inkを導入する必要がありますか？

記事では、寸法の確認だけなら、まずプロパティや変形の数値表示を使うとしています。メニューの名称や最新の仕様は、Adobeの公式情報で確認してください。