ガイドラインや指示書の作成が楽になる！エレメントやマージンのサイズを書き出してくれるPhotoshopのスクリプト -Size Marks

エレメントやマージンなど、指定した箇所のサイズを新規レイヤーに書き出すPhotoshopのスクリプトを紹介します。

個人でも商用でも無料で利用でき、ライセンスはMIT licenceです。

Size Marks -GitHub

当方のPhotoshopに入れてみたので、使用シーンをアニメーションgifにしてみました。こんな感じに選択範囲ツールで選択した箇所のサイズをすぐに書き出してくれます。

Size Marksを使ってるアニメーション（偶然両方とも173pxになってびっくり！）

以前紹介したInkも同様にサイズを書き出してくれますが、ベクターとテキストのデータのみです。エレメントがベクターならInk、ビットマップのエレメントやマージンならSize Marksが便利です。

Inkの特集記事：Photoshopの機能拡張 -Ink

Size Marksのインストール

Size MarksはPhotoshopのスクリプトで、当方の以下の日本語環境で動作しました。

• Photoshop CC 2014 for OS X
• Photoshop CS 6 for Win7

※配布ページにはCC 2014 for OS Xでテスト済みとあるので、それ以外の環境は自己責任でご利用ください。

では、インストール方法を。
下記ページにアクセスし、「Size-Marks.jsx-v0.1.1.zip」をクリックし、ファイルをダウンロードします。

Size Marks -GitHub

1. ダウンロードしたファイルを解凍します。
2. 解凍したファイル「Size Marks.jsx」をPhotoshopのアプリケーションフォルダに移動します。
   移動先：/アプリケーション/Adobe Photoshop CC 2014/Presets/Scripts/
   ※CS 6で利用する場合もCS 6の「/Presets/Scripts/」内に移動すればOKです。
3. Photoshopを再起動します。
4. Photoshopのメニュー「ファイル - スクリプト」内に「Size Marks」があればインストール完了です。

Size Marksの使い方

使い方は簡単です。
選択ツールで測りたい箇所を選択し、スクリプトを実行します。
※長い方のサイズが適用されます。

Size Marksを使ってるアニメーション

カラーを変更したい場合は、スクリプトの下記の記述をお好みのカラーに変更してください。

SolidColor;color.rgb.red=255,color.rgb.green=0,color.rgb.blue=255;

スクリプトをメニューから起動するのが面倒だ、という人は、ショートカットを割り当てておくと簡単にできます。

Photoshopのメニュー「編集 - キーボードショートカット」から、「ファイル」の欄にある「Size Marks」にショートカットを設定します。オススメのキーは「Shift+Cmd+P」です。

Photoshopのキーボードショートカットの設定