CG・映像デザイナー技術ブログ

【Photoshop】作業効率化!おすすめの便利スクリプト20選

Eyecatch-CGM_PhotoshopScript

Photoshopで作業を繰り返すときに根性で作業していないでしょうか?

assistant すいみん

手作業のほうが早い時もありますが、消耗も激しい!

Photoshopにはスクリプトを使うことができ、一度このスクリプトを作ってしまえば単純作業が非常に簡単に終わらせることができます。

本記事では今まで作成してきたPhotoshopの自作スクリプトを紹介いたします。

この記事の著者
CGブロガー すいみん

CGブロガー

すいみん

Suimin

プロフィール

某美大の油絵科を卒業後、大手CG映像プロダクションに入社。
その後ゲーム業界に転職。
現在は技術系のCGデザイナーをしています。 書籍:Unity デザイナーズ・バイブル
プロフィール詳細はこちら

作業効率化に!自作スクリプトまとめ

いままで作ってきた自作Photoshopスクリプトをまとめました。

拡張機能スクリプトランチャー

エクステンションでスクリプトランチャーを自作しようと思ったのですが、うまくいかないのでAdd-onsのJSXLauncherで代用してみました。

  1. Add-onsにアクセスしてJSXLauncherをダウンロード
    参考 JSX Launcheradobe.com
  2. PhotoshopまたはIllustratorを起動してウインドウ>エクステンションからJSXLauncherを起動
  3. オプションからフォルダのパスを選択

環境設定:Photoshopスクリプトランチャー

Photoshopスクリプトはこちらのスクリプトランチャーを使うとより簡単に実行できます!

STEP.1
スクリプトを好きな場所に格納
スクリプトでも拡張機能でもなく専用のソフトウェア「CGM_PsLauncher.exe」です。
Photoshopのバージョン関係なく使用できます。
アイコンも同じ階層に入れておきましょう。
・CGM_PsLauncher.exe
・folder.bmp
・jsx.bmp
STEP.2
スクリプトランチャーを起動します
「CGM_PsLauncher.exe」を起動します。
初回はPhotoshopスクリプトが格納されているフォルダを指定しましょう。

パスを通すと「CGM_PsLauncher.exe」と同じ階層に「path.ini」というパスが記載されたデータが生成されます。次回からは自動でパスが通ります。

STEP.3
スクリプトランチャーに表示されたをスクリプトを実行
あとはPhotoshopを開いて、Photoshopスクリプトを実行するだけです!

ちなみに「CGM_PsLauncher.exe」を×ボタンで閉じてしまっても

※1 Photoshopの画面がアクティブであれば*SHIFTキー2回連続クリック*すると再びスクリプトランチャーが起動します。

※2 またタスクトレイからもアイコンから右クリックでソフトを起動できます。

動画をみると使い方がより深まります。


サンプルデータもついてます。有料です。
参考 【Photoshop】フォトショ用スクリプトランチャー - CGメソッド - BOOTHBOOTH

いままで拡張機能でスクリプトランチャーを作ってきましたが、追加更新の手間や導入コストが非常に手間でした。
外部ソフト化することで、バージョンに依存することなく、手軽にスクリプトランチャーを使えるのでおすすめです。

スマートオブジェクトの中身を戻す

マトリューシカみたいにスマートオブジェクト化されまくっているデータなんかは、このスクリプトで元の状態にもどすと便利です。

参考 Expanding Smart Objectsdarkwark.com
  1. スマートオブジェクトを選択
  2. ファイル>スクリプト>参照>[KAM] Expand SmartObject.jsxで実行
    グループで中身が生成されます。(オリジナルのスマートオブジェクトも残ります。)

レイヤー操作:レイヤーとマスクのリンクを一括で繋ぐ

Eyecatch-CGM_ConnectMaskLinks

作業中レイヤーとマスクのリンクを外してしまうことがあります。
データ整理として、レイヤーとマスクのリンクを一括で繋ぐスクリプト。

STEP.1
下記のURLにスクリプトを格納
C:\Program Files\Adobe\Adobe Photoshop CC 20xx\Presets\Scripts
STEP.2
動画を参考にスクリプトを実行

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

参考 【Photoshop】レイヤーとマスクのリンクを一括で繋ぐスクリプト - CGメソッド - BOOTHBooth

レイヤー操作:特定のレイヤー名にだけ回転をかける

Eyecatch-CGM_RotateMultipleLayers

特定のレイヤー名にだけ処理(回転)をかけるスクリプト作ってみました。
プログレスバーもつけてみたり。数値を取得できたレイヤーだけ処理するという力技です。

特定のレイヤーに何かをする操作は使えると思います。

レイヤー名の最後が「:45」と書いてあるものは、45度回転するようにしています。

STEP.1
下記のURLにスクリプトを格納
C:\Program Files\Adobe\Adobe Photoshop CC 20xx\Presets\Scripts
STEP.2
動画を参考にスクリプトを実行

サンプルデータもついてます。
参考 【Photoshop】特定のレイヤー名にだけ回転をかけるスクリプトBooth

レイヤー操作:グループの全マスクを表示・非表示する

グループのマスクだけをON/OFFしたかったので作成してみました。

trueにするとグループのマスクが全てONになります。

desc1.putBoolean( idUsrM, false );


レイヤー操作:レイヤーを縦/横にピッタリ並べる

Eyecatch_CGM_SelectFilesSideBySideJoin

選択したレイヤーを縦または横にピッタリ並べてみました。
※基本的に同サイズの画像を並べたい時に使う想定です。

STEP.1
下記のURLにスクリプトを格納
C:\Program Files\Adobe\Adobe Photoshop CC 20xx\Presets\Scripts
STEP.2
動画を参考にスクリプトを実行

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

参考 【Photoshop】レイヤーを縦/横にピッタリ並べるスクリプト - CGメソッド - BOOTHBOOTH

レイヤー操作:選択したファイル/フォルダを1つのドキュメントにレイヤー化する

Eyecatch_CGM_SelectFilesImportLayers

一つ一つ処理するわけではなく、画像をまとめたいと思ったので作成しました。

選択したファイルを1つのドキュメントにレイヤー化するスクリプトです。

STEP.1
下記のURLにスクリプトを格納
C:\Program Files\Adobe\Adobe Photoshop CC 20xx\Presets\Scripts
STEP.2
動画を参考にスクリプトを実行

サンプルデータもついてます。
また選択したフォルダ内の画像をまとめるスクリプトも付いています。

参考 【Photoshop】選択したファイルをPSDにデータにまとめるスクリプト - CGメソッド - BOOTHBOOTH

座標から色を取得してその色のべた塗りレイヤー作成する

タイトルの通り、座標から色を取得してその色のべた塗りレイヤー作成するスクリプトです。

  1. カンバスの左上からx10 Y10の位置の色を拾って描画色に設定
  2. 描画色のRGB値を取得
  3. 塗りつぶしレイヤーを作成して、RGB値を入力する


書き出し:選択したフォルダー内のPSDファイルからJPG/PNGを出力する

複数のPSDデータを貰った時に見本として、JPGまたはPNG画像が欲しかったのでスクリプトを作りました。

少しくらいの数ならPSD開いてJPG保存と繰り返してしまいます。
しかし時間はチリツモで消費していきますし、集中力も削れるのでスクリプトを使うのがベストです。

STEP.1
下記のURLにスクリプトを格納
C:\Program Files\Adobe\Adobe Photoshop CC 20xx\Presets\Scripts
STEP.2
動画を参考にスクリプトを実行

下記の3つのスクリプトが格納されています。

  • 選択したフォルダー内のPSDファイルからJPG出力するスクリプト
  • 選択したフォルダー内のPSDファイルからPNG出力するスクリプト
  • 選択したフォルダー内のPSDファイルから比率を維持しつつ高さ・幅1000pxより大きい場合は1000pxにしてJPG出力するスクリプト

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

参考 【Photoshop】フォルダー内のPSDファイルをJPG / PNGを出力するスクリプト - CGメソッド - BOOTHBOOTH

書き出し:選択したレイヤーを別ドキュメントに複製する

調整したいUI素材の切り出し様に。

選択しているレイヤーを新しいドキュメントに複製して、トリミングしているだけです。


書き出し:ドキュメントを複製して別名で保存する

オリジナルのデータはそのままで、ドキュメントを複製してからスクリプト処理をして別名で保存する方法です。
適当にドキュメント見ながら書いたので、もっと良い書き方があるかもしれませんが、便利です。


複製すると保存していないドキュメントになるので、オリジナルの方のパスや名前をドキュメント数を指定することで取得

n = documents.length -2;
var filePath  = documents[n].path;
var fileName = documents[n].name.replace(/\.[^\.]+$/, ''); 

下記のような書き方でもスクリプト実行される

(function(){
   処理
})() ;

読み込み:複数ページ格納されているPDFをレイヤー毎に読み込む

せっかくAdobeXDでプロトタイプを作成しても、画面ならべて、紙に印刷して!ということは、ままあります。
そんなときにPDFで出力して、まとめてPhotoshopのレイヤーで各ページ読み込む方法の紹介です。

AdobeXDのPDFの出力

書き出し>すべてのアートボードから単一のPDFファイルにチェックをして書き出します。

  1. ファイル>スクリプト>参照>PDF_Pages_to_Layers.jsxを実行
  2. インポートしたいPDFを選択します。
    以上で、レイヤー毎にPDFのページが読み込まれます。

書き出し:選択したPSDを画像アセットで書き出す

画像アセットに関するスクリプトを書いてみてメモです。
画像アセットは普通に使う分には超便利なのですが、スクリプトにするとちょっと面倒でした。

たとえば特定のレイヤー(名前:リネーム)をPSD名+pngで書き出すために、画像アセットのルールでレイヤー名を変更します。


さらに間に「画像アセットをON」の記述をたして、画像アセットONにします。


スクリプトでの画像アセットの書き出されない問題

スクリプト中は画像アセットのジェネレーターは動きません
よって、スクリプト中にPSDを閉じてしまうと画像アセットは書き出されません。
もちろん$.sleep(5000)と途中で止めても、ジェネレーターも止まります。

スクリプトでの画像アセットの書き出されない問題の解決方法

ドロップレット化する(.exe)にして外部から操作すると画像アセットで書き出されます。

選択したPSDを画像アセットで書き出すスクリプトです。バッチ処理から画像アセットで書き出されます。


※ESTKから実行します。
ちなみにCMDから実行したときにミスってPhotoshop.exeをぶっ壊したのでbatの扱いに注意…

アクション:アクションを追加・実行する

このスクリプトの利点はアクションを登録してもらうなどの手間は必要なくて、スクリプトを実行すればアクションも登録されるし、スクリプト側から実行できる点です。

パスを指定して実行すれば、アクションスクリプトが読み込まれて実行されます。
※パスはバックスラッシュを2重にしましょう。

紹介:使ってみて便利だったスクリプトまとめ

実際に使ってみて便利だったスクリプトを紹介します。

レイヤー操作:全てのロックを解除する

どこかにロックがかかっているレイヤーがあるので、全部調べて、すべてのロックを解除するスクリプトの紹介です。

レイヤー操作:ベース画像はそのままに要素を切り替えて画像書き出しする

スクリプトの引用先はこちら
参考 【Photoshop】レイヤーの書き出しツール - ツクロウヤツクロウヤ

  1. まずサンプルを用意

  2. 切り替えたいレイヤーを選択して、スクリプト(LayerExporter.jsx)を実行(+トリミングも)

選択した3点の画像が出力されました

レイヤー操作:選択範囲を四角で選択する

画像アセットで、ピクセル指定しても書き出されるサイズが1pxずれている事があります。
マスクで囲えば正確なサイズででるのですが、そのシェイプの範囲をきれいに四角で選択するにあたって、
スクリプトを書く必要があったのですが、もうすでに存在していたので、その紹介です。

標準機能を駆使しても、シェイプの範囲にそってガイドは引けるものの、四角に選択することは困難です。
このスクリプトその補助になるでしょう。

  1. レイヤーのサムネイルをCtrlクリックすると、シェイプの形に沿って選択されます。

2.ClippingArea.js使用すると下記の画像のとおり、シェイプの範囲を四角で選択できます。

参考 レイヤー内の不透明なエリアのクリッピングそらかぜ工場

書き出し:レイヤーカンプのファイル書き出し

Photoshopの標準スクリプト(ファイル>スクリプト>レイヤーカンプのファイル書き出し)のカスタマイズ版スクリプトの紹介です。

標準版との違い

例えばUI画像を遷移別にレイヤーカンプで登録、それらを出力する時に、『レイヤーカンプのファイル書き出し』スクリプトでレイヤーカンプの画像を出すと便利です。

ただ標準のままの場合は強制的に連番がついてきます。
それだと邪魔な場合が多いので、連番をON/OFFするカスタマイズ版です。

『レイヤーカンプのファイル書き出し』スクリプトのカスタマイズ

参考 Layer Comps To Files.jsxgithub.com

サーバーで使用する場合

※ ローカルでセッティングした情報を保存する記述を削除したバージョンです。

※ 追加でプリフィックスはハイフンで区切るのではなく、アンダーバーで区切る用に修正しています。

fileNameBody = fileNameBody.join('_').replace(/[:\/\\*\?\"\<\>\|\\\r\\\n]/g, "_");

assistant すいみん

Photoshopの公式スクリプトに関する記事です!
Eyecatch-CGM_photoshop-official-standard-script 【Photoshop】最初から使える!公式標準スクリプト・機能おすすめ6選

assistant すいみん

PhotoshopのUI制作に関するスクリプト記事です!
Eyecatch-CGM_PhotoshopScript-UI 【Photoshop】UI制作効率化!おすすめのスクリプト9選

assistant すいみん

Photoshopのイラスト制作に関するスクリプト記事です!
【Photoshop】イラスト作業効率化!おすすめのスクリプト12選

以上、すいみん(@cg_method)でした!

Photoshopに関する参考記事・ツール・書籍のまとめ

Photoshopに関する記事を下記にまとめました。



photoshop-summary-article


便利な機能紹介!Photoshopに関する作り方まとめ

フォトショップのソフトウェア購入


eyecatch-buy-adobe-creative-cloud
【Adobe Creative Cloud】最安!アドビ認定スクールから購入する方法(+講座付き)

フォトショップの参考書籍

assistant すいみん

独学で勉強できてしまうPhotoshopですが、他の人の手法を見ると全然使いこなせてなかったことに気がつくこともあります