進化したPhotoshopでWEBデザイン効率アップの１０の奥義！

2016年5月17日

WEBデザイナーがデザインする際に使うツールはPhotoshopがベスト？

最近ではSketchやIllustratorでWEBデザインをされる方も増えているが（Fireworksの人口は減る一方）、Photoshopでデザインされている方がまだ大半を占めている。
以前Webクリエイターボックスさんが実施したアンケートでもこのような結果だった。

さらにPhotoshopは古くなっているわけではなく、Photoshopも他のツール同様にWEBデザインする為のツールとして進化を続けている！

しかし経費を抑えるために古いPhotoshopを頑張って使ってる方や、PhotoshopでWEBデザインする際の便利な機能や、Photoshopの新機能を知らずに作業を続けている人もまだまだ多いのも事実！特にベテランのデザイナーは過去のPhotoshopの機能を駆使して頑張っている方が見受けられる。

そこで今回はPhotoshopでWEBデザインする際に、効率がUPする１０の奥義をお届けする！もちろんご存知の機能もあるかと思うが、長年WEBデザインをしていて実際に知らない人もいたので、この機会に一度確認してみよう！

（Photoshop CC 2015で解説）

１．レイヤーロックのショートカットと５種類のロック

これは基本中の基本。レイヤーのロックにいちいちレイヤーパネルの鍵マークを押していませんか？
レイヤーロックのショートカットは[ / ]です。これを使わない手はありません。

またPhotoshop CC では現在５種類のロックが存在します。
図の左から順番に説明します。

ショートカットキーとして[ cmd + / ]を押す事で、上記の「全てをロック」が適用されることになるので、こちらもあわせて使いましょう！

２．ブラシサイズの変更・ボケ足（硬さ）の変更に超便利な方法

私も最近まで知らなかった技！ブラシツールや消しゴムツールを選んだ際にブラシのサイズやボケ足を簡単に変更する方法。

ブラシツールや消しゴムツールを選んだ状態で「[alt + control]を押しながらマウスを上下にドラッグ」すると図のようにブラシのサイズを変更できます。また、「[alt + control]を押しながらマウスを左右にドラッグ」でボケ足（硬さ）を変更できます。これは超便利な機能で是非使ってもらいたい！

２．「段落スタイル」を使ってテキストのスタイルを一気に変更する技

知らない人は絶対に覚えてほしい技！例えばPhotoshopでデザインカンプを作成する際、本文テキストを「色#333333、ヒラギノ角ゴW3、サイズ14px、行間22px」で統一して作ったとする。客先や上司から、本文を「メイリオに 変更して文字サイズをもう少し大きくして、行間を広くとって、色を#000000に変えてくれないかな？」などと言われてイラついた事はないだろうか？そんな短気なあなたに便利な技をご紹介！

「段落スタイル」を使う方法。これはまず「段落スタイル」ウインドウを表示した状態で「新規段落ススタイルを作成」ボタンを押す、ダブルクリックして出てくるウインドウで、必要なスタイルを作成してOKで閉じる。

この時任意の名前を「本文」「H2見出し」などと後から わかりやすい名前にしよう！そしてそのスタイルをアクティブにした状態で、段落テキストを入力してデザインカンプを仕上げる。

いくつか段落テキストが出来た時点で、さきほど作ったスタイルをダブルクリックでひらいて、文字サイズや色を変更してみると、そのスタイルを使った段落テキストが全て変更されるので超便利！

４．色調補正のベストプラクティス

今のところ一番良い方法は、対象のレイヤーをスマートオブジェクト化したうえで、「通常の色調補正」をかける方法だ。ショートカットで言うと[cmd + M(トーンカーブ)]、[cmd + U(色相・彩度)]、[cmd + L(レベル補正)]などです。
PhotoshopCCではスマートオブジェクトに対してこの操作をすると、「スマートフィルター」という形式で色調補正が記録されて、後で色調を編集する事もできるのだ！また、対象のスマートオブジェクトを削除すれば、同時にスマートフィルターも消えるので、消し忘れの心配も無い！

５．レイヤーの上下移動に便利な方法

Photoshopではレイヤーの管理が命だが、ついつい放置して作成してしまう人もいるだろう。そんな時に長〜いレイヤーパネルの上の方にあるレイヤーと、下のほうにあるレイヤーを隣同士にしたい時はないだろうか？そんな時に便利な技がこちら。

２つのレイヤーを選択した状態で、「移動先のレイヤー」を少し上下にズラすと、もう一方のレイヤーが隣に来てくれる！！これも便利ですね！

６．全てのグループフォルダを一気に閉じる方法

レイヤーをグループ化して名前をつけて管理するのはいいが、レイヤーを触るだけでフォルダは展開してしまいます。展開したフォルダを全部一気に閉じたい時ってありませんか？

そんな時に「全てのグループフォルダを一気に閉じる」方法は、開いているフォルダを「[cmd]を押しながらクリック」するだけ！この技は最上位にあるフォルダだけだが、むしろそれで十分！
フォルダだけを一覧して整理したい時に使える技です。

７．背景色を自動で伸ばす方法

新規ファイルを作成した場合、カンバスカラーを白にして作成したとして、カンバスサイズを伸ばす時、その時点の背景色が反映される事になる。カンバスサイズを広げる時に背景色を白にすれば良いだけなのだが、もうひとつ方法がある。

上部メニューの「レイヤー > 新規塗りつぶしレイヤー > ベタ塗り」を選んで色を選ぶだけ。こうするとカンバスサイズを変えても選んだ色も同時に伸びてくれるので色を継ぎ足す必要がない！このレイヤーを何色か用意して背景色を色々試したい時などは便利ですね！

ちなみに初期の「背景」レイヤーのロックを簡単に外す方法は、「背景レイヤー」をダブルクリックして出てくるウインドウにOKを押すだけ。

８．矩形の選択範囲を作成中に選択範囲を移動する方法

矩形の選択範囲をつくる時、一度引いた範囲はリサイズすると写真の対象が切れてしまう。選択範囲を一発で上手にひければいいが、少しずらしてからリサイズしたい時はないだろうか？

そんな時便利な技は、「選択範囲を作成中に（マウスはドラッグしたままで）スペースキーを押す」と選択範囲の開始位置を移動する事ができる！これは地味に便利な技ですね。

９．テキストツールのまま、テキスト入力モードを簡単に抜ける方法

テキストを入力してる時に次のテキストを打つ為に、いちいち「移動ツール」など別のツールに変えてからまた、テキストツールに戻るのは面倒！そんな時テキストツールのままテキスト入力モードを抜ける方法は、[cmd + Enter]を押すだけ！これでつづけて別のテキストを打つ事ができます！

１０．Photoshopのラインツールで矢印を簡単に引く方法

個人的にPhotoshopのラインツールはFireworksに比べるととても使いにくいと感じてます。しかしそんなラインツールも矢印を引いて、デザインカンプの説明などに使う便利な方法がある。

ラインツールを選んだ状態で上部の歯車を押して、「開始点」か「終了点」を選んで幅や長さを決めるだけ。これも地味だが覚えていて損はない！

まとめ

Photoshopの細かい技やショートカットは紹介しきれないくらいまだまだある！普段使い慣れた機能だけで満足せずにどんどん新しい機能を調べて試してみる事をおすすめする！

また、WEBデザイナーがデザインする際に使うツールでベストは何か？そこにはっきりした答えはありません。デザインする内容やテイスト、またはツールの好みで変わるからだ。

私の場合WEBデザインをする際は、写真などをイジる機会が圧倒的に多いと感じるので、メインのツールとして基本的にはPhotoshopを使い、アイコンなどで細かいパスで書く時だけIllustratorで作業します。もちろん逆の方もいるかと思うが、このようにツールを使い分けて作業するのが現時点でのスタンダードではないだろうか。