こんにちは、Webエンジニアの澁木です。
今回は前回の続き、「Wordmove」について！
…ではなく、Photoshop Scriptを用いた作業効率化のお話です。
Photoshop Scriptとは？
Photoshop Script（以下JSX）JavaScriptなどの言語を使ってPhotoshopでの作業を「自動化」することが出来るというもので、「.jsx」という拡張子でファイルを作ることによってPhotoshop上で実行が出来ます。
「自動化」という言葉を聞いてPhotoshopのアクション機能を連想する方もいるかもしれませんが、jsxはファイルの保存処理、条件での分岐などが可能という違いがあります。
「画像のサイズが〇〇以下の場合は△△という操作をする」
といったことが可能になります。
JSXで「Hello World」
実際にjsxファイルの作成からPhotoshopでの実行までの流れを解説します。
①jsxファイルを作成
下記コードを書き、「sample.jsx」という名前でファイルを保存しましょう。
alert("Hello World");
②jsxファイルをPhotoshopに認識させる
①で作成したjsxファイルを下記フォルダに移動してください。
C:\Program Files\Adobe\Photoshopのバージョン\Presets\Scripts\
Mac
/Applications/Photoshopのバージョン/Presets/Scripts/
③スクリプトの起動
「ファイル ＞ スクリプト」から「sample」という項目を選択してください。
アラート文が表示されたかと思います。
超便利！作業効率化スクリプト
①AdjustImgSizeEven.jsx
preferences.rulerUnits = Units.PIXELS;
var imgW = activeDocument.width.value;
var imgH = activeDocument.height.value;
function isOdd(num){
num = Math.ceil(num);
return ( num % 2 !== 0 ) ? true : false;
}
if( isOdd(imgW) ){
activeDocument.resizeCanvas(++imgW, imgH, AnchorPosition.TOPLEFT);
}
if( isOdd(imgH) ){
activeDocument.resizeCanvas(imgW, ++imgH, AnchorPosition.TOPLEFT);
}
これは自作のスクリプトです。
現在開いているドキュメントのサイズを判別し、偶数ならそのまま、奇数ならカンパスサイズを+１し偶数にするというスクリプトです。
奇数の画像が縮小された場合にじんで汚くなってしまうので、偶数に調整するという作業は頻繁にあります。私はその度に手動で行っていたのですが、これで自動化できそうです。
②TextExportToCSV.jsx
下記サイトで配布されているスクリプトです。
詳細はリンク先で確認して頂きたいのですが、開いているPSDファイルのテキスト情報をCSV形式で出力できるというものです。
全体的なフォントサイズ感や使用されている色などをパっと把握出来たり、文章のコピーが簡単に行えたり、Web制作の効率がグッと上がること間違いなしです！
最後に
JSXはJavaScriptで記述が出来るということで、Web制作に携わる人だったら書ける方も多いハズ。興味がある方は下記公式リファレンス片手にチャレンジしてみても良いのではないでしょうか？
https://wwwimages2.adobe.com/content/dam/acom/en/devnet/photoshop/pdfs/photoshop-cc-scripting-guide-2015.pdf
