こんにちは。デザイナーのあゆみです。
img
皆さん自動選択ツールのレイヤーとグループの切り替えをショートカットキーでできないかと思ったことはないでしょうか。
探しても見つからないし、社内デザイナーに聞いてみたけど誰も知らないし、もはや諦めてました。。
しかしショートカットキーは現状(おそらく)存在しませんが似たことができます。

1.Photoshopの自動選択のチェックを外す
これで要素を選択する場合グループ選択をする状態になっています。
この状態でレイヤーだけを選択したい場合。

2.Ctrlを押しながらクリックすればレイヤー選択になります
もう一度言います。レイヤーだけ選択したい場合はCtrlを押しながらクリックするだけです。

これだけ。ものすごくショックでした。
ずっとショートカットキーはないと言って、検索してもだめなのね…と思っていたので発想の問題だったんだなと思い知りました。

ググってみるとPhotoshopって無料のプラグインがいっぱいありますね。
今までGuideGuideぐらいしか使ってなかったなぁ…という事で今回はググって自分が使ってみたいなと思ったプラグインをご紹介させていただきます。

なお動作はPhotoshop CC2014にて確認しております。

まずはみんな大好き定番ガイドプラグイン

Guide Guide

66a4699b618053a99d4fab21c3a02b5c
http://guideguide.me/
これはもう定番ですね。サイトのアウトラインを作るときや、サイズの決まったboxの中で均等に要素を並べたい時に自分で計算しなくてもガイドを引いてくれる定番お役立ちガイドツール。

Quick Guide

quick
http://guchitaka.com/project-view/quickguidepro/
これもすごく便利なガイドプラグイン。
・オブジェクトや選択範囲を基準にガイドを引くことが出来る。
・選択範囲で選択したガイドだけ消すことが出来る。
・ガイドのコピペができる。
以上の点が特に好きです。

なのでざっとGuide Guideで基本のガイドをひいてQuick Guideで要素に合わせたガイドをひいたり、いらない部分を選んで消したりすると便利なのではないでしょうか…!両方とも大好きなプラグインです。

デザイナーとコーダーの架け橋になってくれる製図のプラグイン

私自身コーディング作業をすることが多いのですが、このboxの大きさは200pxでカラーは#333…とか指定が書いてあるといちいち長さを計ってスポイトで色を抽出して…という作業がなくなるのでとてもありがたいことですし、デザイナ―側からすれば口頭で説明する時間が省け、デザイン通りに実装してもらいやすくなります。
うまく使いこなせばデザイナーもコーダーもハッピーになれる大変ありがたい存在です!
またここは200pxで作ってたはずなのにここが書き出してみたら高さが199pxになってるぞ…とか適当に作ると一目瞭然なので戒めになります笑

Specctr

02d180e1679fc77444e1d4a5b4a17c71
https://www.specctr.com/
有料版の価格は49$…!なかなか手が出せない…!ですが無料のお試し版を利用することが出来ます。無料版ではSpecctrはテキストのカラー、大きさ、フォントの種類と要素の高さと横幅を記述してくれます。

Ink

fbae7202e257de0f6d4b2e0c9725e0d8
http://ink.chrometaphore.com/
こちらはレイヤーの名前、レイヤーの種類(シェイプかラスターなど)レイヤーの透明度、要素の大きさ、フォントの種類、テキストのトラッキング、テキストの色など出力してくれます。またレイヤースタイルでつくったグラデーションだったらCSSで吐き出してくれます。

なおレイヤーの名前は日本語だと文字化けを起こして読み込んではくれないようです。
日本語には弱い模様…

個人的にどちらを使いたいか
どちらも素晴らしいプラグインですが、無料だけで考えるなら使える種類が多いのはInkですね。
グラデーションが便利。でも有料版も含めるとSpecctrの余白まで計算してくれる機能がとても惹かれます…!余白がわかるだけで測る時間もぐっと抑えられるなんて素晴らしい!有料版も含めるならSpecctrが個人的には使いたいなぁと思いました。

制作をちょっとだけハッピーにしてくれそうなプラグイン

色の管理がしやすくなるSwatchy

tumblr_inline_ncpczdDu4m1s0wkgy
https://creative.adobe.com/addons/products/3198#.VHQ3Lcn1VI0

見た目通りですが色をフォルダに分けて管理することが出来ます。
サイトのテーマごとに使う色を編集すると違うプロジェクトで同時進行になっても困らないし地味に便利だと思いました。

イメージから色を解析してスウォッチに追加してくれるColor Parser

http://blog.kam88.com/en/parsing-colors-from-image-in-photoshop.html
このプラグインはイラストを描かれる方に向いてそうです。
気に入った色をスポイトから抽出して、いちいちスウォッチに登録するのがめんどくさいという問題をスクリプトがたったの2ステップで解決してくれます。
colorimage

文字数カウンター COUNT WORDS AND CHARACTERS

tumblr_inline_napdlkjfDs1s0wkgy
https://creative.adobe.com/addons/products/2862#.U_cW1UtjBFw
「何文字入るようにデザインしてほしいんだけど…」という指定はサイトを作る時には必ずつきものだと思います。適当にデザインを作って文字数数えるために画面を切り替えてたんですが、これがあれば画面移動しなくて済みます。

レイヤーを整理するときに使いたいLayrs Control2

スクリーンショット 2014-11-20 22.50.53
http://www.madebyvadim.com/layrs/
誰かにコーディングを依頼する際や、デザインを引き継いでPSDファイルを渡す時には
多分整理をすると思うのですが作り込めば作りこむほどいらないレイヤーが増えていくと思います。そんな整理の際にお勧めしたいプラグインです。

・レイヤー/フォルダーのリネームができる
・画像データをスマートオブジェクト化できる
・スマートオブジェクトをラスタライズ化できる
・使っていないレイヤー効果を削除してくれる
・選択したレイヤー効果をすべて削除してくれる
・使っていないレイヤーを削除してくれる

影響範囲も選択したレイヤー(フォルダー)またはすべてと選ぶことが出来ます。
使っていないものを自動で削除できるのは探す手間も省けて魅力的だと思いました。

ショートカットキーに登録して効率化を測るのもあり。

スマートオブジェクト化/解除ができるCell

7d6150c627dbc9e48fe3aa86d4edf01d
http://cell.chrometaphore.com/

先に紹介したLayrs Control2でスマートオブジェクト化はボタン1クリックでできてしまうのですが、スマートオブジェクト化は頻繁に使うのでマウスを使わずにショートカットキーで切り替えたいと思うことはないでしょうか。
Cellはスクリプトをショートカットキーに登録してキーボードのみでオブジェクト化/オブジェクト解除できるプラグインです。
a6fc8ac449f75100f8da48abcb0414f6
私はスマートオブジェクト化をCtrl+Shift+/ 、スマートオブジェクトの解除をAlt+Ctrl+Shift+/に指定しました。

またこのプラグインは画像の書き出しもできる素晴らしい機能があるそうなのですが書き出しの権限の問題でちょっと私はうまくできませんでした(…)権限の設定がわかる方いらっしゃいましたら教えて欲しいです。
ショートカットキーに登録して効率化をはかれるプラグインの一例としてCellを紹介させていただきましたが、他にも沢山あるので探してみてはいかがでしょうか!

番外編:wi-fiが使えるならこれ!PSで作業している画像をリアルタイムでスマホ/ipadで確認できるアプリ Ps Play

c3e1695559af92c6f75e196d5a3aad47
※iOS/Android/iPad対応です。同じwi-fi回線に接続してるのが前提条件です。
まずはサイトからアプリをダウンロードします。
Photoshopを開いてツール>編集>リモート接続…を選択します。
リモート接続を有効にするにチェックを入れてリモート接続用のサービス名、パスワードを設定してOKを押して保存します(※どちらも自由に決められます)
スクリーンショット 2014-11-16 21.58.48
これでphotohopの設定は終了です。

次にアプリを起動します。
test
起動すると自分が設定したサービス名(今回の場合はテスト)が出てくるので、タップしてパスワードを入力すれば準備完了です。

現在Photoshopで作業している画像ファイルがスマホに出てくるのでFTPでアップする作業をせずにスマホで確認することができます!
またスマホにある画像ファイルをPhotoshopにアップし、そのまま編集することが可能です。

app
【アプリ画面】スマホから画像を上げたい場合はUploadボタンをタップして画像を選ぶだけ。

スクリーンショット 2014-11-20 21.40.03
【PC画面】

画像のキャプチャをとってファイルをDropboxにアップロードして…PCからファイルを編集するという流れで作業をしてたので直接アップして作業できるのは時間の短縮につながるのではないでしょうか!ただしwi-fiが遅い環境ではあまり威力を発揮できません…!
wi-fiが使えるのであれば簡単ですので一度お試しあれ!

参考サイトhttp://madebyvadim.tumblr.com/

今回こちらのサイトからPhotoshopプラグインをご紹介させていただきました。
無料だけではなく有料プラグインも色々ありますね。見てるだけでも楽しいので覗いてみてはいかがでしょうか。
自分が必要なプラグインを選んでPhotoshop作業の効率化を図っていいデザインライフに近づけますように!