Vingow 開発ブログ
midori
2014年4月11日

あなたのWebデザイン制作作業を加速させる!Photoshopプラグイン&スクリプト6選

はじめまして、デザイナーのmidoriです。
スマホ時代の専門紙「Vingow」を運営するJX通信社で、主にWebデザイン制作を担当しています。
アルバイトとしてJXに入るまでずっとIllustratorを使っていたのでイラレ党な私ですが、お仕事ではPhotoshopを使う機会の方が多いです。

今回はPhotoshopの機能を大幅に便利に拡張してくれるプラグイン・スクリプトたちをご紹介します。

編集系

colorPicker

Colorful . VTda.info
Colorful . VTda.info / vtdainfo

配布元:サイト作るときに便利なPhotoShop JSX、ショートカット、アクション – Develo.org
「複数のオブジェクトの色を一気に同じ色に変えたい…」というものぐさ(わたしです)にぴったりなスクリプト、colorPicker。
まずは複数のオブジェクトを選択し、colorPickerのスクリプトを実行するとカラーピッカーが出てきます。色を選択してOKを押すと、オブジェクト全ての色を変更することができます。
Develoではこの他にもkameさん作のスクリプトが数多く配付されており、いつもお世話になっています。後ほどもう一つご紹介します。

Distribute Layer Spacing Horizontal

minimum rowline / Hiroyuki Takeda
minimum rowline / Hiroyuki Takeda

配布元:Distribute Layer Spacing Horizontal – Trevor Morris Photographics
もともとイラレ党なので日常的に幅の違うオブジェクトを等間隔で並べていたのですが、Photoshopではそれができないんですね…はい…驚愕しました。
というわけでこちらのスクリプトを重宝しています。名前の通り、レイヤーに分かれたオブジェクトたちを横等間隔で並べてくれます。両端のオブジェクトが不動で中のオブジェクトの位置が調整され、間隔の数値指定はできません。

ガイド系

Copy Guides

Copy Copy Copy / CarbonNYC
Copy Copy Copy / CarbonNYC

配布元:Photoshop Tip by @sdidonato on @dribbble
「このガイド、そのままそっくり別ファイルに移したい…」なんてときにはこれ。
Copy Guidesはガイドを別のファイルにコピー&ペーストすることができるスクリプトです。
Shiftキー+スクリプト実行でガイドをコピー、別のファイルにうつってスクリプト実行でペーストされます。

GuideGuide

IMG_0498 / zaphad1
IMG_0498 / zaphad1

配布元:GuideGuideCameron McEfee
これも非常に重宝します、Cameron McEfeeさん作のガイドプラグイン。
ガイドをマージン・カラム数/幅/高さ・間隔の幅/高さの数値を指定して引くことができます。縦横方向の中央線やアウトラインも引けます。なんて便利なんでしょうか。
ただ、自分で数値を指定して引く場合、右側からの指定は得意ではないみたいなので、左側から◯px指定で引いたほうがスムーズです。

書き出し系

CSS3Ps


配布元:CSS3Ps – free cloud based photoshop plugin that converts layers to CSS3 styles.
Photoshopで作った見本のボタンなどを、CSS3で表現するときに大活躍するプラグイン。
オブジェクトや文字レイヤーを選択してプラグインのボタンを押すと、上記の画像のようにCSSを書き出してくれます。

sliceGroup_Set

配布元:サイト作るときに便利なPhotoShop JSX、ショートカット、アクション – Develo.org

複数のレイヤーを選択して実行すると複数のレイヤーを結合したスライスを、一番上のレイヤーの名前をつけてつくってくれます。

複数のレイヤーから一つのスライスを作ってくれるスクリプト。
スライスにちまちま名前をつける作業を省略することができるので、地味に便利です。
ただ、スライスを1つずつ設定していかなければいけないので、ガイドからスライスを一括作成するときには使うことができません。

まとめ

以上6つご紹介させていただきました。いかがでしたか?
プラグインやスクリプトは、知れば知るだけ制作作業の効率化につながります。また、ショートカットキーを当てはめて使うなど、自分に最適なかたちで使うことで、あなたの作業時間を何分の一にもすることができます。
あなたも是非プラグインやスクリプトを駆使して、快適なPhotoshopライフを!

Vingowを一緒につくりませんか?

弊社ではVingowを一緒に成長させてくれるエンジニア、デザイナー、ディレクターを募集しています。勢いのある若手エンジニアから、若いチームを引っ張ってくれる経験豊富な方まで、Vingowに興味がある方はぜひご連絡下さい。まずは、気軽にランチでも行きましょう!

ランチに行ってみる
«
»