クリエイティブな技術を必要としない定型的なオペレーション作業はなるべく自動化しましょう。
Photoshopにはアクションのように作業を記録して保存、再利用するようなとても便利な自動化機能が多数用意されています。アクション、バッチ、ドロップレット、スクリプト、プラグインなどなど。頻繁に繰り返すような定型的なオペレーション作業はこのような機能を使って自動化しましょう。
今回は多数ある自動化機能の中から「スクリプト」についてご紹介します。
Dearpsではオリジナルのスクリプトを多数公開していますが実はこのPhotoshopのスクリプトはプログラミングの知識がなくても簡単に作れてしまうんです。
作業をJavaScriptとして記録「ScriptingListener.plugin」
アクションはご存知のとおり作業を記録して保存、再利用することができる機能です。実はPhotoshopにはそれの「スクリプト版」 があります。
Adobe公式サイトで配布されている
「ScriptingListener.plugin」を使うことによってPhotoshopでの作業を自動でJavaScriptとして書き出してくれます。
まずは「ScriptingListener.plugin」をインストール
(1)まずはじめにAdobe公式サイトで配布されている
「ScriptingListener.plugin」をダウンロードします。
(2)ダウンロードしたファイルを解凍して「Utilities」(Windows：Scripting Utilities)フォルダの中にある、「ScriptingListener.plugin」(Windows：ScriptListener.8li)を下記フォルダに移動します。
Windows: C:\Program Files\Adobe\Adobe Photoshop□\Plug-ins
Mac OS X: /アプリケーション/Adobe Photoshop□/Plug-ins
(3)次に「Sample Scripts/JavaScript」フォルダの中にある、「ScriptListenerOn.jsx」と「ScriptListenerOff.jsx」を下記フォルダに移動します。
Windows: C:\Program Files\Adobe¥Adobe Photoshop□\プリセット\スクリプト
Mac OS X: /アプリケーション/Adobe Photoshop□/Presets/Scripts
(4)これで準備完了です。Photoshopが起動している場合は再起動してください。
「ScriptingListener」の使用手順
(1)記録したい作業を開始する前に[ファイルメニュー]/[スクリプト]/[ScriptListenerOn]を選択します。これで作業の記録がスタートするので作業を行います。
(2)作業が完了したら[ファイルメニュー]/[スクリプト]/[ScriptListenerOff]を選択します。これで記録がストップします。
(3)デスクトップに「ScriptingListenerJS.log」というファイルができているので適宜ファイル名を変更して拡張しを「.jsx」にします。
(4)これでスクリプトファイルの完成です。作成した「(ファイル名).jsx」ファイルを下記フォルダに移動します。
Windows: C:\Program Files\Adobe\Adobe Photoshop□\プリセット\スクリプト
Mac OS X: /アプリケーション/Adobe Photoshop□/Presets/Scripts
(5)Photoshopを再起動してファイルを開いた状態で[ファイル] / [スクリプト]から作成したスクリプトを選択すれば先ほど記録した作業が実行されます。
[メモ]
アクションではショートカットを設定する場合ファンクションキーを指定する必要がありますがスクリプトは通常のアプリケーションメニューと同じように[編集メニュー]/[キーボードショートカット]で自由にショートカットを割り当てることができます。
「ぶっこ抜きスクリプト」を作ってみよう！
実はDearpsで公開しているスクリプトのほとんどが「ScriptListener」で書き出されたJavaScriptを加工することによってつくられています。
Dearpsで公開しているスクリプトの中で人気の高い「ぶっこ抜きスクリプト」を試しに作成してみましょう。
(1)[ファイルメニュー]/[新規]を選択して新規ファイルを作成します。サイズは適当でOKです。つぎに長方形ツールで矩形を描きます。これも適当でOKです。
(2)ここからの作業を記録します。[ファイルメニュー]/[スクリプト]/[ScriptListenerOn]を選択して記録をスタートします。
(3)レイヤーパネルで「長方形 1」を選択した状態で右クリックをしてメニューから[レイヤーを複製]を選択します。
(4)「レイヤーを複製」ダイアログが表示されるので[保存先]/[ドキュメント]のプルダウンメニューから「新規」を選択します。
(5)[イメージメニュー]/[トリミング]を選択します。
(6)「トリミング」ダイアログが表示されるので「透明ピクセル」および「トリミングする部分」すべてにチェックが入っていることをかくにんして「OK」をクリックします。
(7)作業の記録をストップします。[ファイルメニュー]/[スクリプト]/[ScriptListenerOff]を選択して記録をストップします。
(8)デスクトップに「ScriptingListenerJS.log」というファイルができているのでファイル名を「ぶっこ抜き.jsx」に変更します。
(9)「ぶっこ抜き.jsx」をテキストエディタなどで開きます。
記録された作業は一操作ごとに
// =======================================================
で区切られます。
※Photoshop CC 2015では記録された作業以外に不要なコードが生成されてしまいます。下記画像を参考に不要部分を削除します。
青い部分は (2)の[ScriptListenerOn]のスクリプトを実行した操作の記録なので削除。
赤い部分も不要コードなので削除します。
黄色い部分の作業の記録だけ残して上書き保存します。
(8)これでスクリプトファイルの完成です。下記フォルダに移動します。
Windows: C:\Program Files\Adobe¥Adobe Photoshop□\プリセット\スクリプト
Mac OS X: /アプリケーション/Adobe Photoshop□/Presets/Scripts
(9)Photoshopを再起動してファイルを開いた状態で[ファイル] / [スクリプト]から[ぶっこ抜き]を選択すればスクリプトが実行されます。
アイデア次第でさらに便利に！
JavaScriptについての知識がある方はもちろん、知識がなくても少し学ぶことによってよりスクリプトを活用することができます。条件分岐やダイアログを利用した数値の入力なども可能です。
最初にダウンロードした「Documents」フォルダ内に「Photoshop Scripting Guide JA.pdf」 というスクリプティングガイドがあります。この機会にスクリプトについて学んでみてはいかがでしょうか。
[メモ]
アクションでは作業工程を一時停止してパラメータを変更することができますが、スクリプトでも下記のようにコードを書き換えることによってその作業で一時停止してパラメータを変更することができます。
停止したい作業のコードの最後に記述されている「DialogModes.NO」を「DialogModes.ALL」に書き換えます。
試しに先ほど作成した「ぶっこ抜き.jsx」を下記のように書き換えて確認してみましょう。
拡大縮小時「縦横比を固定」にデフォルトでチェックをいれる
Photoshopではレイヤーの拡大縮小時、オプションツールバーの「縦横比を固定」はデフォルトではチェックが入っていない状態になります。
拡大縮小時は縦横比を固定したい場合が多いですよね？
そこでスクリプトを利用して「縦横比を固定」にデフォルトでチェックをいれる方法を紹介します。
スクリプトの利用手順について
自由変形_縦横比固定スクリプトをダウンロード
(1) ダウンロードしたzipファイルを解凍して「自由変形_縦横比固定.jsx」をPhotoshopのスクリプトフォルダに移動します。
Windows: C:¥Program Files¥Adobe¥Adobe Photoshop□¥プリセット¥スクリプト
MacOS X: /アプリケーション/Adobe Photoshop□/Presets/Scripts
(2)Photoshopを再起動して[編集] / [キーボードショートカット]でスクリプトの「自由変形_縦横比固定」に‘Command+T’を設定します。
これで拡大縮小したいときはショートカット‘Command+T’で変形すれば「縦横比を固定」にデフォルトでチェックを入れた状態で作業を進めることができます。
ガイド作成スクリプト
レイヤー、レイヤーグループ、選択範囲からガイドを作成することができるスクリプトを作成しました。Photoshop CC 2015用になります。
スクリプトの利用手順について
ガイド作成スクリプトをダウンロード
(1) ダウンロードしたzipファイルを解凍して「Dearps_ガイド作成.jsx」をPhotoshopのスクリプトフォルダに移動します。
Windows: C:¥Program Files¥Adobe¥Adobe Photoshop□¥プリセット¥スクリプト
MacOS X: /アプリケーション/Adobe Photoshop□/Presets/Scripts
(2)Photoshopを再起動してファイルを開き、選択ツールで選択範囲を作成するか、ガイドを作成する対象のレイヤー(レイヤーグループ)をレイヤーパネルで選択します。
(3) [ファイル] / [スクリプト]から「Dearps_ガイド作成.jsx」を選択するとガイドが作成されます。
favicon作成 効率化Tips
Photoshop CC 2015のアートボード機能を利用したfavicon(ファビコン)作成のTipsを紹介します。現在faviconの種類は膨大にありますが必要最低限ということで下記サイズを作成できるようにしています。
- 16×16 px （IE）
- 32×32 px （Chrome、Firefox、Safariなど）
- 48×48 px （Windows デスクトップ）
- 152×152 px （iOS・Androidのホーム画面）
favicon(ファビコン)作成 Tips
favicon.psdをダウンロード
(1)ダウンロードした「favicon.psd」を開いてください。
(2)レイヤーパネルで最前面のレイヤー「favicon (edit)」のサムネイルをダブルクリックしてスマートオブジェクトを編集します。
(3) ロゴを配置するなどしてfaviconを作成します。
(4)完成したら上書き保存をして閉じます。この時点で全サイズのfaviconにデザインが反映されます。
(5)[ファイル]メニュー/[生成]/[画像アセット]を選択します。すると「favicon.psd」と同一階層に「favicon-assets」フォルダが作成され中に4種類のfaviconが書き出されます。
(5)favicon-16×16.png、favicon-32×32.png、favicon-48×48.pngの３つの画像を「.ico」形式に変換します。(複数の画像をひとつにまとめられる「マルチアイコン」にします。)
Photoshopでは変換することができないので下記サイトを利用します。
①画像ファイル３つを選択します。
②「アイコン作成」をクリック。
③背景色を選択。
④「アイコンをダウンロード」をクリックすると「favicon.ico」が保存されます。
(6)あとは「favicon.ico」、「apple-touch-icon.png」をルートディレクトリにアップロードしてHTML の <head>内に下記コードを記述すれば完成です。
<link rel="icon" href="/favicon.ico"> <link rel="apple-touch-icon" href="/apple-touch-icon.png">
選択範囲をベクトルマスクに変換するスクリプト
選択範囲をベクトルマスクに変換するスクリプトを作成しました。
スクリプトの利用手順について
選択範囲からベクトルマスクスクリプトをダウンロード
(1) ダウンロードしたzipファイルを解凍して「Dearps_選択範囲からベクトルマスク.jsx」をPhotoshopのスクリプトフォルダに移動します。
Windows: C:¥Program Files¥Adobe¥Adobe Photoshop□¥プリセット¥スクリプト
MacOS X: /アプリケーション/Adobe Photoshop□/Presets/Scripts
(2)Photoshopを再起動してファイルを開き、長方形選択ツールで選択範囲を作成します。
(3) [ファイル] / [スクリプト]から「Dearps_選択範囲からベクトルマスク.jsx」を選択すると選択範囲がシェイプに変換されます。
アートボードを個別ファイル(PSD)に書き出す方法
Photoshop CC 2015の新機能「アートボード」で作成した各グループを個別のPSDとして書き出す方法を紹介します。
アートボードの書き出し方法
(1) [ファイル] / [書き出し]/ [アートボードからファイル]を選択。
(2)「アートボードからファイル」ダイアログが表示されるので適宜入力します。
②ファイルの先頭に文字列を入れたい場合は入力します。入力しなければそのままアートボード名がファイル名になります。
③チェックをいれると選択したアートボードだけを書き出すことができます。
④ファイル形式を選択します。PSD以外に下記ファイル形式が選択できます。
BMP,JPEG,PDF,Targa,TIFF,PNG-8,PNG-24
⑤アートボードを保持したい場合はチェックをいれます。
(3) 実行ボタンをクリックするとファイルが書き出されます。
レイヤーパネルでアートボードを選択した状態で「ぶっこ抜きスクリプト」を実行して別ファイルとして抜き出す方法も手軽でおすすめです。
レイヤーを選択範囲に移動するスクリプト
レイヤーを選択範囲に移動するスクリプトを作成しました。
スクリプトの利用手順について
レイヤーを選択範囲に移動スクリプトをダウンロード
(1) ダウンロードしたzipファイルを解凍して「Dearps_レイヤーを選択範囲に移動スクリプト.jsx」をPhotoshopのスクリプトフォルダに移動します。
Windows: C:¥Program Files¥Adobe¥Adobe Photoshop□¥プリセット¥スクリプト
MacOS X: /アプリケーション/Adobe Photoshop□/Presets/Scripts
(2)Photoshopを再起動してファイルを開き、長方形選択ツールで選択範囲を作成します。
(3)レイヤーパネルで移動させたいレイヤー(レイヤーグループ)を選択します。
(4) [ファイル] / [スクリプト]から「Dearps_レイヤーを選択範囲に移動スクリプト.jsx」を選択すると選択範囲にレイヤーが移動します。
Bootstrap×Photoshop フォーマット作成スクリプト
※Photoshop CC 2015〜対応
Photoshop CC 2014以前のバージョンをお使いの方はPSDデータを配布させていただきますのでそちらをご利用ください。(Bootstrap_psd.zip)
追記 2016 4/12
Bootstrapを利用する場合のカンプ制作に！
1クリックでBootstrapのグリッドシステムに対応したフォーマットが作成できるスクリプトをつくりました。ぜひご利用ください。
BootstrapはWebサイトなどを作成するためのCSSフレームワークです。
あらかじめWebサイト制作に必要なHTMLやCSS、JSが用意されているので簡単にスピーデイーにサイトを制作することができます。
スクリプトの利用手順について
Bootstrapフォーマット作成スクリプトをダウンロード
(1) ダウンロードしたzipファイルを解凍して3つのファイル「Bootstrap_[デバイス].jsx」をPhotoshopのスクリプトフォルダに移動します。
Windows: C:¥Program Files¥Adobe¥Adobe Photoshop□¥プリセット¥スクリプト
MacOS X: /アプリケーション/Adobe Photoshop□/Presets/Scripts
(2)Photoshopを再起動します。
(3) [ファイル] / [スクリプト]から「Bootstrap_[デバイス].jsx」を選択します。
作成するデバイスを選択します。
(4)Bootstrapのフォーマットが作成されました。
「Bootstrap_デスクトップ.jsx」を実行した場合のサイズは下記になります。
カンバスサイズはフルHDのディスプレイを想定して1920pxに幅を広げています。
「Bootstrap_スマホ.jsx」の場合はiPhone6 (750×1334)の画面サイズを想定してフォーマットが作成されます。
画像配置の超効率化スクリプト｜PHOTOBOX
画像配置の手間をスクリプトで解消！
Webサイトのカンプを制作するうえで、画像配置って結構な手間ですよね。それを解消するスクリプトを作成したのでご紹介します。
まずは一般的な画像を配置する方法について
(1)長方形ツールなどで画像サイズのシェイプを描く。
(2)シェイプの上に画像を配置してシャイプに対してクリッピングマスクをかける。
(3)色調補正などを施す際は調整レイヤーでさらにクリッピングマスクで重ねていきます。
この方法でもいいのですが、レイヤー構成として美しくないし、クリッピングマスクが面倒だったり、誤操作でクリッピングマスクが外れてしまったりと、なにかと不満を感じます。
それを解消するわたしの理想のレイヤー構成は下のような構成になります。
簡単に説明するとレイヤーグループに対して画像サイズでベクトルマスクを設定して、その中に写真や調整レイヤーなどを配置していく構成です。
今回紹介するスクリプトはこの構成を驚くほど簡単にスピーディーに作成してさらに+αの機能を含めています。ぜひ利用してみてください。
スクリプトの利用手順について
PHOTOBOXスクリプトをダウンロード
(1) ダウンロードしたzipファイルを解凍して「Dearps_PHOTOBOX.jsx」をPhotoshopのスクリプトフォルダに移動します。
Windows: C:¥Program Files¥Adobe¥Adobe Photoshop□¥プリセット¥スクリプト
MacOS X: /アプリケーション/Adobe Photoshop□/Presets/Scripts
(2)Photoshopを再起動して適当なファイルを開いてください。
(3)画像を配置したいサイズ、位置に選択範囲を作成します。
(4) [ファイル] / [スクリプト]から「Dearps_PHOTOBOX」を選択します。
(5)画像配置のダイアログが表示されるので配置する画像を選択して「配置」ボタンをクリックします。
環境設定で「配置時に変形をスキップ」にチェックが入っていない場合画像配置した際バウンディングボックスが表示されてしまいます。その場合は何も行わずそのまま「enter」で変形を終了させてください。
(6)画像が配置されるので適宜サイズ調整を行い完成です。
このスクリプトを使用しないで普通に画像配置をする場合は表示領域の中心に画像配置されてしまうので移動するのが手間です。PHOTOBOXスクリプトを使用すれば選択したエリアの中心に画像が配置されるので移動の手間が省けます。
まだ配置する画像が決まっていなくて「ダミー画像」を入れたい場合は、(5)のステップで画像配置のダイアログが表示された際に「キャンセル」をクリックすれば下のようなダミー画像が配置されます。
さらにダミー画像のレイヤー名には画像サイズが表記されます。
（写真を配置した場合でもダミー画像は背面に配置されます。）
もちろんキービジュアルにも活用できいるので利用シーンは多いと思うのでぜひご活用ください！
ダミー画像作成スクリプト
シェイプを作成してスクリプトを実行するだけ！
長方形ツールなどでシェイプを作成してスクリプトを実行するだけで自動でサイズを表記したダミー画像を作成してくれます。丸型などにも対応しています。
スクリプトの利用手順について
Dummyスクリプトをダウンロード
(1) ダウンロードしたzipファイルを解凍して「Dearps_Dummy.jsx」をPhotoshopのスクリプトフォルダに移動します。
Windows: C:¥Program Files¥Adobe¥Adobe Photoshop□¥プリセット¥スクリプト
MacOS X: /アプリケーション/Adobe Photoshop□/Presets/Scripts
(2)Photoshopを再起動して適当なファイルを開いてください。
(3)長方形ツールなどでシェイプを作成します。
(4) [ファイル] / [スクリプト]から「Dearps_Dummy」を選択します。
(5)ダミー画像が作成されます。
コーディング時のダミー画像はPlacehold.jpをおすすめします。