【オリジナル制作】Photoshopでの作業を効率化できるいい感じのJSXスクリプト

王

2012.09.05

こんにちは、デザイナーの王です。「とりあえずタイトルに興味を持ったけどいまいちピンとこなかった」という方もいるのではないでしょうか。

ずばり、Photoshopのスクリプト機能を利用して、表題の作業を自動的に処理させるということです。僕みたいな怠け者で楽をしたい人にはぴったり！

今回主に紹介したいのは自作のスクリプトで、Webに特化した作業を簡単にしてくれます。

ダウンロードはこちら（ダウンロードが開始されます）：
https://liginc.co.jp/demo/2012/09/PhotoshopScripts.zip

スクリプトを使うには？

まずはスクリプトの使い方について説明していきます。

スクリプトをダウンロードし解凍したら、拡張子が「jsx」のファイルが幾つか入っていると思います。それらを下記のフォルダにコピーし、PCを再起動させます。
Windows：PhotoshopPresetsScripts
Mac：Photoshop/Presets/Scripts/

※「Photoshop」はPhotoshopがインストールされたフォルダを表しています。

すると、Phtoshopの「ファイル」→「スクリプト」に新しい項目が追加されます。

では、新しく追加されたコマンド「Margin」「Make Sprite」「Get CSS」「Ratio」を、順に紹介していきたいと思います。

Margin

機能

選択されたレイヤーを一定間隔で並べることができます。

使い方

並べたいレイヤーを選択します。

スクリプトを実行します。

すると、下のような画面が立ち上がります。

見ての通り、margin-rightとmargin-topを設定できます。

※縦横の間隔をそれぞれ設定できますが、大抵の場合は縦か横のどちらかのみを設定するだけでOKだと思います。画面が半透明になっているので画像と照らし合わせながら設定できます。

「Apply」をクリックしてスクリプトを実行します。

満足できたら「OK」をクリック。

すると、上のようになります。

Make Sprite

機能

複数の画像から一枚のCSSスプライトを作成します。レイヤー名には、CSSコードを吐きます。

使い方

スプライトのパーツをレイヤー毎に分け、1つのドキュメント内にまとめます。

あとはスクリプトを実行するだけ。

すると、下記のようになります。レイヤー名がCSSコードに変わってることに注目してください。

※背景レイヤーと隠したレイヤーは計算から外すことになっています。グループとスマートオブジェクトは1つのレイヤーと見なします。

Get CSS

上記で紹介した「Make Sprites」を使ってて不満を感じ、あとから作ったのが「Get CSS」です。「Make Sprites」の補助ツール的なものだと考えてもらえば大丈夫です。最初に「Make Sprites」でまとめてスプライトを作り、あとからそれに個別のパーツを追加・編集するときに便利なスクリプトです。