【Photoshop】UI制作効率化！おすすめのスクリプト9選

2018年8月25日2021年4月6日

UI制作効率化！おすすめのスクリプトまとめ

UI制作に役に立ちそうなスクリプトをまとめました。

シェイプの角を丸くする

Photoshopで作成した矢印をを少し丸くしたいと思ったのですが、デフォルトだとシェイプを保ったまま丸くする機能がなさそうなのでスクリプトを探してみました。
※ちなみにイラレにもっていけば、丸くする機能がデフォルトであります。

下記のURLからスクリプトをダウンロードします。
https://photoshopscripts.wordpress.com/2013/02/03/corner-editor-photoshop-script/
シェイプを選択します
スクリプト＞参照＞Corner Editor.jsx
4,4,4,4のという感じで丸めたいピクセル数を選択
丸めたい形のアイコンを選択すれば、シェイプに丸みが付きます。

Photoshop Scripts

Corner Editor This Photoshop script can do everything that the Rounded Rectangle Radius Resizer script can, and a lot more! Round the corners of any polygonal shape Multiple ...

ガイドをコピーする

画像アセットがあるものの、未だにガイド引いてスライス機能は使います。
ガイドコピーしたいと思い、探しましたら便利なスクリプトがありました。

[timeline]
[tl label=’STEP.1′ title=’下記のコードをコピして、メモ帳にペースト’]
名前をCopyGuides.jsxにします。
[open title=’ガイドをコピーするスクリプト’]

[/open]
[/tl]
[tl label=’STEP.1′ title=’Photoshopを起動’]
コピーしたいガイドのあるデータを開きます
[/tl]
[tl label=’STEP.1′ title=’スクリプトを実行’]
ファイル＞スクリプト＞参照からShitキーを押しながらCopyGuides.jsxを選択
これでガイドがコピーされた状態になります。
[/tl]
[tl label=’STEP.2′ title=’もう一度スクリプトを実行’]
ガイドをペーストしたいデータを開き、もう一度ファイル＞スクリプト＞参照からCopyGuides.jsxを普通に選択するとガイドがペーストされます。

[/tl]
[/timeline]

ドキュメント内で使用されているフォント一覧を表示する

指定されたフォントだけ使われているか調べるため、ドキュメント内で使用されているフォント一覧を表示するスクリプトです。

[timeline]
[tl label=’STEP.1′ title=’下記のURLにスクリプトを格納’]
C:\Program Files\Adobe\Adobe Photoshop CC 2017\Presets\Scripts\
[/tl]

[tl label=’STEP.2′ title=’動画を参考にスクリプトを実行’]

[/tl]
[/timeline]

サンプルデータもついてます。

レイヤー操作：パーツのサイズ情報を自動で作成

UIパーツの情報を自動で作成してくれる拡張機能『Ink』の紹介です。

下記からInkをダウンロード
http://ink.chrometaphore.com/
Photoshop CC 2015+フォルダの中をInk.zipを解凍。
解凍した中身を下記の場所に格納
C:\Program Files\Adobe\Adobe Photoshop CC 2017\Required\CEP\extensions\Ink
Photoshopを起動。ウインドウ＞エクステンション＞Inkを選択
寸法を表示したいレイヤーを選択して水滴ボタンをクリック。
自動でサイズが表示されます。
表示がはみ出ていたら、イメージ＞すべての領域を表示

レイヤー操作：パーツの余白の計測をする

『Size-Marks.jsx』の紹介です。
選択範囲を囲み、スクリプトを実行だけです。

コリス

ガイドラインや指示書の作成が楽になる！エレメントやマージンのサイズを書き出してくれるPhotoshopのスク... エレメントやマージンなど、指定した箇所のサイズを新規レイヤーに書き出すPhotoshopのスクリプトを紹介します。個人でも商用でも無料で利用でき、ライセンスはMIT licenc...

テキスト：位置を変えずに文字を中央揃えにする

イラレのスクリプトで使って地味に便利だったので、Photoshop版も作成してみました。

やっていることは単純です。

座標を予め取得しておく
中央揃え
元の座標位置に戻す

[open title=’位置を変えずに文字を中央揃えにするスクリプト’]

* 複数選択可
* 左合わせ “`var just = Justification.LEFT“`
* 右合わせ “`var just = Justification.RIGHT“`
[/open]

レイヤー操作：選択したレイヤーサイズのシェイプを作成する

画像のサイズを取得しようとしてできたスクリプトです。

選択してるレイヤーの座標を調べる方法

boundsで4点取得できます。(開始X座標,開始Y座標,終了X座標,終了Y座標)

layObj = activeDocument.activeLayer.bounds;
x1 = layObj[0];
y1 = layObj[1];
x2 = layObj[2];
y2 = layObj[3];
alert("("+x1+","+y1+")-("+x2+","+y2+")");

選択したレイヤーのサイズのシェイプを作成する

[open title=’選択したレイヤーサイズのシェイプを作成するスクリプト’]

[/open]

カンバス操作：カンバスサイズを偶数にリサイズする

カンバスサイズを奇数ピクセルから偶数ピクセルにする（奇数の場合+1pixel足す）スクリプトを書いてみました。

[open title=’カンバスサイズを偶数にリサイズするスクリプト’]
[tl label=’STEP.1′ title=’下記のURLにスクリプトを格納’]
C:\Program Files\Adobe\Adobe Photoshop CC 2017\Presets\Scripts\
[/tl]
[tl label=’STEP.2′ title=’動画を参考にスクリプトを実行’]