メニュー

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

Eyecatch-CGM_PhotoshopScript

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

すいみん

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

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

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

目次

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

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

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

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

  1. Add-onsにアクセスしてJSXLauncherをダウンロード
    あわせて読みたい
    JSX Launcher
    JSX LauncherButton type Javascript (Extendscript) launcher panel.
  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 またタスクトレイからもアイコンから右クリックでソフトを起動できます。

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



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

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

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

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

Captain Awesome
Expanding Smart Objects
Expanding Smart ObjectsRemember a while ago I wrote how to expand Smart Objects in Photoshop? So, yeah, that is kind of tedious process. Therefore, I made a script that makes all work...
  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メソッド - BOOTH
【Photoshop】レイヤーとマスクのリンクを一括で繋ぐスクリプト - CGメソッド - BOOTHレイヤーとマスクのリンクを一括で繋ぐスクリプトつなぐスクリプトです。 使い方 https://www.cg-method.com/entry/photoshop-linkLayerMasks/ Copyright (c) CG Method Re...

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

Eyecatch-CGM_RotateMultipleLayers

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

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

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


STEP.1
下記のURLにスクリプトを格納

C:\Program Files\Adobe\Adobe Photoshop CC 20xx\Presets\Scripts

STEP.2
動画を参考にスクリプトを実行




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

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

グループのマスクだけを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メソッド - BOOTH
【Photoshop】レイヤーを縦/横にピッタリ並べるスクリプト - CGメソッド - BOOTHレイヤーを縦/横にピッタリ並べるスクリプトです。 使い方 https://www.cg-method.com/entry/photoshop-arrange-layers/ Copyright (c) CG Method Released under the MIT ...

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

Eyecatch_CGM_SelectFilesImportLayers

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

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



STEP.1
下記のURLにスクリプトを格納

C:\Program Files\Adobe\Adobe Photoshop CC 20xx\Presets\Scripts

STEP.2
動画を参考にスクリプトを実行




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

あわせて読みたい
【Photoshop】選択したファイルをPSDにデータにまとめるスクリプト - CGメソッド - BOOTH
【Photoshop】選択したファイルをPSDにデータにまとめるスクリプト - CGメソッド - BOOTH選択したファイルをPSDにデータにまとめるスクリプトです。 使い方 https://www.cg-method.com/entry/photoshop-import-folder-file-one-document Copyright (c) CG Method...

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

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

  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メソッド - BOOTH
【Photoshop】フォルダー内のPSDファイルをJPG / PNGを出力するスクリプト - CGメソッド - BOOTHフォルダー内のPSDファイルをJPG / PNGを出力するスクリプトです。 使い方 https://www.cg-method.com/entry/photoshop-png-jpg-export-from-psd-in-folder/ Copyright (c)...

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

調整したい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重にしましょう。

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

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

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

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

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

スクリプトの引用先はこちら
http://artawa.hatenablog.com/2017/01/19/005953

  1. まずサンプルを用意

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

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

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

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

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

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

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

http://www016.upp.so-net.ne.jp/sorakaze/script/sample/ClippingArea.js.txt

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

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

標準版との違い

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

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

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

Gist
Updated Photoshop "Layer Comps To Files.jsx" with optional numeric prefixing and improved file name ...
Updated Photoshop "Layer Comps To Files.jsx" with optional numeric prefixing and improved file name ...Updated Photoshop "Layer Comps To Files.jsx" with optional numeric prefixing and improved file name formatting - Layer Comps To Files.jsx

サーバーで使用する場合

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

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

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


すいみん

Photoshopの公式スクリプトに関する記事です!

あわせて読みたい
【Photoshop】最初から使える!公式標準スクリプト・機能おすすめ6選
【Photoshop】最初から使える!公式標準スクリプト・機能おすすめ6選Photoshopには標準機能とは別に公式のスクリプトや特殊な機能が備え付けられています。本記事では特に便利な6つのスクリプト・機能を紹介いたします。Photoshop:最初か...

すいみん

PhotoshopのUI制作に関するスクリプト記事です!

あわせて読みたい
【Photoshop】UI制作効率化!おすすめのスクリプト9選
【Photoshop】UI制作効率化!おすすめのスクリプト9選【UI制作効率化!おすすめのスクリプトまとめ】UI制作に役に立ちそうなスクリプトをまとめました。シェイプの角を丸くするPhotoshopで作成した矢印をを少し丸くしたいと...

すいみん

Photoshopのイラスト制作に関するスクリプト記事です!

あわせて読みたい
【Photoshop】イラスト作業効率化!おすすめのスクリプト12選
【Photoshop】イラスト作業効率化!おすすめのスクリプト12選【イラスト作業効率化!おすすめのスクリプトまとめ】イラストやLive2D制作に役に立ちそうなスクリプトをまとめてみました。まとめてグループセットを作成する予めグル...

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

目次
閉じる