Photoshopでの作業を効率化できる素晴らしいスクリプト！

みつけました。

多分超便利。

超便利ーです。

下記議事録的に引用します。

株式会社LIG (リグ) - 東京都上野にあるWeb制作会社

Photoshopでの作業を効率化する！いい感じのJSXスクリプトを作ってみた。

スクリプトのダウンロード↓

こんにちは！　UFO大好き、2012終末論信者のデザイナー、王です～！
とりあえずタイトルに興味を持ったがいまいちピンとこなかった、っていう方たくさんいるんじゃないかと思います。

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

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

スクリプトを使うには？

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

スクリプトをダウンロードし解凍したら、拡張子が「jsx」のファイルが幾つか入っていると思います。それらを下記のフォルダにコピーすれば（要再起動）、Phtoshopの「ファイル」→「スクリプト」に新しい項目が追加されます。

Windows:  Photoshop\Presets\Scripts\
Mac:  Photoshop/Presets/Scripts/

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

※新しく追加されたコマンドを下記で紹介します（見出しがコマンド名です）。

Margin

機能

一定間隔で選択されたレイヤーを並べる。

使い方

➊　並べたいレイヤーを選択

➋　スクリプトを実行、そしたら下図のような画面が立ち上がるはずです。見ての通り、margin-rightとmargin-topを設定できる。

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

➌　「Apply」をクリックしてスクリプトを実行する。満足できたらウィンドウを閉じればOK。そしたら、こうなる↓

Make Sprite

機能

複数の画像から一枚のCSSスプライトに作成する（レイヤー名にCSSコードを吐く）。

使い方

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

➋　あとはスクリプトの実行のみ、そしたらこうなる↓　レイヤー名がCSSコードに変わってることに注目して下さい。

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

Get CSS

機能

筆者自身上記で紹介した「Make Sprites」を使ってて不満を感じ、後から作ったのがこの「Get CSS」です。「Make Sprites」の補助ツール的な位置づけとして作ったもので、最初に「Make Sprites」でまとめてスプライトを作り、後から個別のパーツを追加・編集する際に便利なスクリプトです。

機能としては、選択されたレイヤー（複数のレイヤーの選択も可能）の座標と寸法を調べ、レイヤー名にCSSを書き込む。
なお、もし（選択ツールなどで）選択範囲が場合、レイヤー上の画像の座標と寸法ではなく、選択範囲の情報をCSSとしてポップアップ画面で出すことになっている。

使い方１

レイヤーを選択して（複数のレイヤーの選択も可能）実行すると、レイヤー名をCSSコードに変える。

使い方２

選択ツールなどでキャンバス上の任意のところに選択範囲を作り

実行すると、このような画面が立ち上がる↓、欲しい情報にチェックを入れたり外したりすることで相応のCSSコードを吐き出す。

「left and top」という項目があるが、これ一見してCSSスプライトとは無関係だが、imgタグでのスプライトを作成する時に使います！詳細は印刷にも対応！imgタグでCSSスプライトを使う方法をご参照下さい。

Ratio (「黄金比」と「大和比」)

機能

適当に描いた矩形から　「黄金比」と「大和比」　の矩形を簡単に作成できる。

※Adobe Photoshop CS6以下のバージョンでは動かない可能性があります。

使い方

➊四角を適当に描いて

➋スクリプトを実行すると、このような画面が表示される。設定は見て分かる通り、余計な説明はいらないでしょう。
「apply」で設定を「適用」、満足したら「OK」を押す。

➌これで黄金比の矩形が作られた！

※縦か横かは最初に描いた矩形で決まる、例えば、最初に縦の矩形であれば高さを維持しつつ、縦の黄金比の矩形を作成します。

おまけ

最後にスクリプトをより使いやすくするために、キーボードショートカットの設定方法について少々ご紹介します。

これ、僕的には設定するのとしないのと、使い勝手が天と地ほどの違いがある！なので、ぜひショートカット設定しておこう！！知ってる方はパスしてもらって大丈夫です。

１．編集　→　キーボードショートカット　を選択する。

２．出てきた画面から「ファイル」　→　「スクリプト」を探して、新たに追加されたコマンドを見つけ出し、ショートカットを設定する。（右のカラムをクリックして、そのままショートカットを押すことで設定できる）

まとめ

スクリプトを使わなくても勿論これらの作業はできるにはできるが、毎回のように全く同じ作業を繰り返していくうちになんか損してるとは思えて来ません？
だったらそんな退屈な単純作業から解放されましょう！スクリプトで！

本記事のスクリプトの再配布は自由ですが、元記事へのリンクを貼ってくれると嬉しいですd(*＾ｖ＾*)b♪。
あと、バグや不明点があったら気軽にコメント頂けたらと思います。

最後に、Photoshopのスクリプト機能に興味を持って頂けて、自分で書いてみたいなぁと思った方に、こちらの記事でスクリプト自体についても紹介してありますので、ぜひ一読してみて下さい。
PhotoshopでのWeb制作効率を向上させる「JSX」とは