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

2016年5月17日

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

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

やっぱりまだまだPhotoshop強し！みなさん、ご協力ありがとうございました！ぐっない? pic.twitter.com/ajGy0wb46g

— Webクリエイターボックス (@webcreatorbox) 2016年2月19日

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

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

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

できるだけ早くWEBデザイン・プログラミングスキルを習得し、すぐに仕事を始めたい方は、コスパの良いスクールの受講がオススメなので、実際私がスクールを受講した体験を踏まえたおすすめのスクールをご参考に↓

▶ 現役プロ比較！短期｢WEBデザインスクール12校｣おすすめランキング！

現役デザイナーが実際にスクールを２校受講した経験を元に徹底比較調査した、WEBデザインスクールランキング！まず最初に実際…

ちなみにクリエイターの方に朗報！「Adobe CCコンプリートプラン1年版」が約45%OFFでちゃんとした正規方法で購入できる！実際私も３年連続購入しているのでこちらの体験記事を読んでおいて損はない↓

▶ Adobe Creative Cloud [約21%OFF]学生価格で｢社会人｣が安く買う方法！(コンプリートプラン)

AdobeCreativeCloudのコンプリートプランが高すぎる！もっと安く買う方法をないかな？AdobeCC（…

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

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

lock

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

透明ピクセルをロック	ラスターデータのレイヤーにおいて透明部分に描画する事を防ぐすでに描画している部分には描画可能移動や変形も可能
画像ピクセルをロック	ラスターデータのレイヤーにおいて透明部分と描画部分への描画を防ぐ移動や変形は可能
位置をロック	移動や変形を防ぐ描画することはできる（ラスターデータのレイヤーのみ）
アートポート内外への自動ネストを防ぐ	カンバス上でのアートボード間をドラッグアンドドロップでのデータ移動を防ぐ
全てをロック	上記の全てをロックする

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

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

brash

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

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

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

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

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

danraku0

danraku

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

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

danraku3

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

以前の記事（PhotoshopでWEBデザインする方法～Fireworksから乗換え編～）でも書いたが、写真などの色調補正に「調整レイヤー」を使うのはもう古い！調整レイヤーだと対象のレイヤーを削除した時に調整レイヤーだけが残り、調整レイヤーも削除しないと下のレイヤーに影響するので面倒！

smart_f

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

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

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

layer

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

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

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

group

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

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

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

nuri

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

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

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

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

sentaku

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

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

text

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

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

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

line_tool

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

line_tool

まとめ

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

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

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

PhotoshopのWebデザインにおける基本のテクニックや設定について知りたい方はこちらもどうぞ↓

▶ PhotoshopでWEBデザインする基本の設定とテクニック

今回はPhotoshopでWEBデザインに慣れていない方や、他のツールでWebデザインをしていた方に向けて、Photos…

▶ 現役プロ比較！短期｢WEBデザインスクール12校｣おすすめランキング！

現役デザイナーが実際にスクールを２校受講した経験を元に徹底比較調査した、WEBデザインスクールランキング！まず最初に実際…

▶ Adobe Creative Cloud [約21%OFF]学生価格で｢社会人｣が安く買う方法！(コンプリートプラン)

AdobeCreativeCloudのコンプリートプランが高すぎる！もっと安く買う方法をないかな？AdobeCC（…