クリエイティブな技術を必要としない定型的なオペレーション作業はなるべく自動化しましょう。
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で画像(jpg、png等)を配置するとスマートオブジェクトとして配置されます。
(CC 2014〜は、環境設定/一般/オプションの[配置時にスマートオブジェクトを常に作成]のチェックを外すことによって通常のレイヤーとして配置することも可能)
スマートオブジェクトとして配置されるのは効率的でいいのですが通常のスマートオブジェクトと違って少しクセものなんです。
スクリプト「レイヤーをグループ化→描画モード：通常」
レイヤーをグループ化するとそのレイヤグループの描画モードはデフォルトでは「通過」になります。
その場合レイヤーグループ内で調整レイヤーで色調補正した場合、描画モードが「通過」なので下のレイヤーに影響します。(下記画像参照)
この調整レイヤーでの色調補正をレイヤーグループ内で留めたい場合レイヤーグループの描画モードを「通常」にするか、色調補正したいレイヤーに対してクリッピングマスクする必要があります。(下記画像参照)
この一手間を解消するスクリプトを作成したので、ご紹介させていただきます。このスクリプトを使用すればレイヤーグループを作成した際の描画モードをデフォルトで「通常」にすることができます。
まずはじめに下記リンク先よりスクリプトをダウンロードしてください。
↓Dearps_レイヤーをグループ化_通常.jsx ダウンロード↓
【利用方法】
①「Dearps_レイヤーをグループ化_通常.jsx」を
【Mac】/Applications/Adobe Photoshop [CC/CC2014]/Presets/Scripts/ に保存。
②Photoshopが起動している場合は再起動。
③[編集] ／ [キーボードショートカット]で「Dearps_レイヤーをグループ化_通常.jsx」にたいして「⌘+G」を設定。
これでレイヤーグループを作成した際の描画モードがデフォルトで「通常」になります。
是非ご活用下さい。
ぶっこ抜いてリンク スクリプト
指定したレイヤー(レイヤーグループ)を1クリックで外部リンクファイルとして書き出すスクリプト
Photoshop cc 2014からスマートオブジェクトを外部リンクファイルとして書き出すことができるようになりました。
手順としては、
という作業をする必要があります。
今回公開させていただく「ぶっこ抜いてリンク」スクリプトを使えば、
という工程だけですみます。
スマートオブジェクトの外部リンクファイル化機能にはこんなメリットがあります。
(1)ヘッダーやナビゲーション等共通モジュールを書き出して複数ファイルで共有できる。
(2)外部ファイルとして抜き出した分、元のPSDデータの容量が軽くなる。
今後間違いなく使用頻度が増えていく機能だと思うので是非活用してみてください。
ぶっこ抜いてリンク スクリプトのダウンロードは以下から。
Photoshop CC 2014版はこちら
Photoshop CC 2015版はこちら
ただレイヤーを別ファイルに抜き出したい場合は
「ぶっこ抜き スクリプト」を御覧ください。
Retina対応用画像の作成について@2x
最近Retinaディスプレイ対応画像を制作する機会が増えてきています。
Photoshop CCから機能追加された「画像アセット機能」ではレイヤー名に200%とRetina対応用画像のファイル名(□□□□@2x.jpg)を書いておくことで画像サイズ200%の画像を生成することが可能です。
しかし上記の方法で書き出された画像には注意が必要です。
下記画像をみていただくと分かる通りテキストレイヤーはくっきり綺麗に拡大されているのに対し後ろの写真がぼやけてしまっているのがわかります。
原因は画像アセット機能で保存される画像はスマートオブジェクトに対応していない為画像が荒れてしまいます。
この機能で綺麗に書きだすにはテキストレイヤーやシェイプレイヤーに限られてしまうのでRetinaディスプレイ対応させたい画像というのは写真が多いため機能として致命的です。
そこで今回はDearpsの考えるRetinaディスプレイ対応のための解像度２倍の画像を作成する一番最適な方法をご紹介します。
まず下記の記事より「ぶっこ抜きスクリプト.jsx」をダウンロードして下さい。
Retinaディスプレイ対応させる画像を作成する際の注意点
・写真は極力解像度が高いものを用意。
・写真を配置する際最初にスマートオブジェクト化しておく
(埋め込み配置、リンクを配置で読み込んだ場合は最初からスマートオブジェクト化された状態になります。)
・シェイプレイヤーやテキストレイヤーはラスタライズ化させない。
Retina対応用(サイズ200%)の画像を作成する。
①Retina対応用に高解像度版画像を作成したいレイヤー(レイヤーグループ)を選択します。
②［ファイル］メニューの［スクリプト］から［参照］を選択し、先ほどダウンロードした「Dearps_bukkonuki.jsx」を実行します。
③すると選択していたレイヤー(レイヤーグループ)が別ファイル抜き出されます。
④［ファイル］メニューの［イメージ］から［画像解像度］を選択し画像解像度を200%にします。(@3xにしたい場合は300%)
⑤これでRetinaディスプレイ用の画像の出来上がりです。
画像アセット機能で作成された画像と比較すると後ろの写真が綺麗に書きだされていることがわかります。
ぶっこ抜きスクリプト@2xを作ったので配布します。
ぶっこ抜いた後の画像サイズ２倍にする作業も自動化させたいという方のために 「ぶっこ抜きスクリプト@2x」を作成しました。
下記リンク先よりスどうぞ！
↓ぶっこ抜きスクリプト@2x ダウンロード↓
最後に宣伝。
この度共著でPhotoshopの本を執筆させていただきました。2015年3月13日にソシム社より発売になります。今回紹介したようなWebデザインに役立つスクリプトやTipsを多数紹介させて頂いています。下記バナーがamazonへのリンクとなっております。
ご興味がある方は是非御覧ください！
スライス作成スクリプト
Photoshopでスライスを作成するには[スライスツール]もしくは[レイヤーに基づく新規スライス]で作成する方法の２種類があります。
しかしそれぞれ不満がありました。
・[レイヤーに基づく新規スライス]はレイヤーグループに対してはNG
・スライスに名前を付け忘れる。
(書き出した画像をみて‘ユーザー_01.jpg’とかになっていてはじめて気がつく…)
・スライス名を確認するのにスライスオプションダイアログを開く必要があるので面倒
・スライスをレイヤーとして管理できない
等など…
特に[レイヤーに基づく新規スライス]はレイヤーグループに対してはNGが致命的ですね。
Photoshopってバージョンアップするごとに素晴らしい機能が追加されているのに、「スライス」に関してはけっこうノータッチなんですよね。
CCから機能追加された「画像アセット機能」を使えってことなんだろうけどいまいち馴染めない…そんな方も多いのではないでしょうか。
私が「画像アセット機能」を使わない理由はこんな感じです。
・タグの付け漏れがぱっと見で分からない
・画質をタグで設定できるけどこれはやっぱりWeb用に保存のダイアログでプレビューを見ながら最適な画質を設定するべき
・画像アセットの「@2x」機能がスマートオブジェクトに対応していない
(こちらの記事で触れていますRetina対応用画像の作成について@2x)
そこで今回はスライスに関する不満を解消させるスクリプトを作成したのでご紹介させていただきます。
まずはじめに下記リンク先よりスライス作成スクリプトをダウンロードしてください。
↓slicescript.zip ダウンロード↓
slicescript.zipを解凍すると「選択範囲からスライスを作成x.jsx」と「レイヤーからスライスを作成x.jsx」の２つのスクリプトファイルができます。
２つのスクリプトの使用方法は下記のとおりです。
【レイヤーからスライスを作成x.jsxの使用方法】
①レイヤーパネルでスライスを作成したいレイヤー(レイヤーグループ)を選択します。
②［ファイル］メニューの［スクリプト］から［参照］を選択し、先ほどダウンロードした「レイヤーからスライスを作成.jsx」を実行します。
③［スライス作成］ダイアログが表示されるのでスライス名を入力し、［確定］ボタンをクリックします。
④［レイヤー］パネルに「Webレイヤー」が作成され、その中に、［スライス作成］ダイアログボックスで設定したスライスのレイヤーが作成されます。
【選択範囲からスライスを作成x.jsx】
①［ファイル］メニューの［スクリプト］から［参照］を選択し「選択範囲からスライスを作成x.jsx」を実行します。
②選択範囲のバウンディングボックス が表示されるのでそれをスライス対象のサイズに変形させて確定（◯ボタンをクリック）します。
③［スライス作成］ダイアログが表示されるのでスライス名を入力し、［確定］ボタンをクリックします。
④［レイヤー］パネルに「Webレイヤー」が作成され、その中に、［スライス作成］ダイアログボックスで設定したスライスのレイヤーが作成されます。
※［選択ツール］で選択範囲を作成した状態でスクリプトを実行してそのまま選択範囲をスライス領域にすることもできます。
「Webレイヤー」は通常非表示になっていますがこれを表示することによってスライスを可視化できるのでプリントアウトをするなど指示書としても活用できます。
［注意］
このスクリプトは[スライスツール]、[レイヤーに基づく新規スライス]との併用はできません。
各スクリプトは下記のような役割をイメージしていただくとわかりやすいと思います。
[スライスツール] →「選択範囲からスライスを作成x.jsx」
[レイヤーに基づく新規スライス] →「レイヤーからスライスを作成x.jsx」
実際にこのスクリプトを使用している動画です。
最後に宣伝させてください！
この度共著でPhotoshopの本を執筆させていただきました。2015年3月13日にソシム社より発売になります。今回紹介したようなWebデザインに役立つスクリプトやTipsを多数紹介させて頂いています。下記バナーがamazonへのリンクとなっております。
ご興味がある方は是非御覧ください！
レイヤーボックス作成スクリプト
今回はwebバナーやボタンを作成する際に便利なスクリプトを紹介します。
まずはじめに以下リンク先よりスクリプトをダウンロードして下さい。
レイヤーボックス作成.jsxのダウンロードは以下から。
【準備】
ダウンロードした“Dearps_LayerBox.zip”を解凍し、「レイヤーボックス作成.jsx」ファイルをPhotoshopのスクリプトフォルダに入れる。
Windows: C:¥Program Files¥Adobe¥Adobe Photoshop□¥プリセット¥スクリプト
MacOS X: /アプリケーション/Adobe Photoshop□/Presets/Scripts
使用方法
①Photoshopを起動し、[ファイル] ／ [スクリプト]から「レイヤーボックス作成.jsx」を実行します。
②するとダイアログが表示されるのでサイズ等の情報を入力します。
以上でレイヤーボックスの出来上がりです。
バナーやボタンを制作する際のベースとしてご利用ください。
Webデザイン超効率化(カンプ制作下準備 編)
今回は“WEBデザイン超効率化 第2弾”として、デザインカンプを制作する際の下準備を自動化するスクリプトを紹介します。
まずはじめに以下リンク先よりスクリプトをダウンロードして下さい。
Dearps_サイトカンプ.zipのダウンロードは以下から。
【準備】
ダウンロードした“Dearps_サイトカンプ.jsx”ファイルをPhotoshopのスクリプトフォルダに入れる。
Windows: C:¥Program Files¥Adobe¥Adobe Photoshop□¥プリセット¥スクリプト
MacOS X: /アプリケーション/Adobe Photoshop□/Presets/Scripts
使用方法
①Photoshopを起動し、[ファイル] ／ [スクリプト]からDearps_サイトカンプ.zipを実行します。
②すると下記画像のダイアログが表示されるので名前やサイズ等の情報を入力します。
③以上でサイトカンプのベースが出来上がりです。
FireworksのスライスレイヤーをPhotoshopで実現【決定版】
Dearpsでは今までにPhotoshopでのスライスを楽にする裏テクニックを数々公開してきました。
【WEBデザ向け】スライスチップ作成パネルver2-CS4.CS5用
今回はこれらの決定版ともいえるスクリプトを作成する事が出来たので公開します。
【今回公開するスクリプトの特徴】
・選択範囲をスライスに変換する。
・スライスをFireworksのようにレイヤーで管理できる。
・スライスはWEBレイヤーフォルダに自動格納される。
・画像名称をスライス作成時入力できてレイヤー名にも反映される。
他にもメリットたくさん！まずはだまされたと思って使ってみて下さい=3
利用方法はこんな感じ。
【1】ファイルメニューから［スクリプト］＞［参照］を選択し、ダウンロードしたスクリプトファイル”fw_slice.jsx”を選択し読み込む
【2】バウンディングボックス が表示されるのでそれをスライス対象のサイズに変形させて確定（enter）します
【3】スライス名を入力するダイアログがでてくるので画像名を入力します。
【4】スライスがレイヤーとして保存されました。この方法で作成されたスライスはWEBレイヤーというグループに自動格納されます。
※もうひとつの使い方
事前にスライスを切りたいサイズに選択範囲を作成してから【1】を実行するとそのサイズでスライスが作成されます。
スクリプトのダウンロードは以下から。
Photoshopで超絶簡単に点線・破線をかく
まずはじめに以下リンク先よりスクリプトをダウンロードして下さい。
dot_line.zipのダウンロードは以下から。
【準備】
ダウンロードしたzipファイルを解凍し、“Dearps_点線破線.jsx”ファイルをPhotoshopのスクリプトフォルダに入れる。
Windows: C:¥Program Files¥Adobe¥Adobe Photoshop□¥プリセット¥スクリプト
MacOS X: /アプリケーション/Adobe Photoshop□/Presets/Scripts
使用方法
①Photoshopを起動し、[ファイル] ／ [スクリプト]からDearps_点線破線.jsxを実行します。
②すると上記画像のダイアログが表示されるので数値を入力します。
以上で出来上がりです。