京都・滋賀を拠点にWEB制作とWEBデザインに関する情報発信を手掛ける STAND4U

STAND BLOG

HOME > 進化したPhotoshopでWEBデザイン効率アップの10の奥義!

進化したPhotoshopでWEBデザイン効率アップの10の奥義!

2016年5月17日

waza

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

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

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

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

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

(Photoshop CC 2015で解説)

※追記:当記事が想像以上にバズったので、その時やった方法と結果を記事にしました。
またいくつかメディアに掲載頂きましたので、是非こちらもご覧ください。
初心者のブログが1日30PVから2630PVに跳ね上がった時にやった、たった3つの事。

1.レイヤーロックのショートカットと5種類のロック

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

lock

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

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

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

2.ブラシサイズの変更・ボケ足(硬さ)の変更に超便利な方法

brash

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

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

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

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

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

danraku0

danraku

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

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

danraku3

4.色調補正のベストプラクティス

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

smart_f

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

5.レイヤーの上下移動に便利な方法

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

layer

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

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

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

group

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

7.背景色を自動で伸ばす方法

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

nuri

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

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

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

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

sentaku

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

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

text

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

10.Photoshopのラインツールで矢印を簡単に引く方法

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

line_tool

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

line_tool

まとめ

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

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

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

もっと知りたい方はこちらもどうぞ「PhotoshopでWEBデザインする方法 ~Fireworksから乗換え編~


ABOUT

京都・滋賀・大阪を拠点にWEB制作とWEBに関する情報を中心に、その他ライフハックや思う事などを発信しています。
制作会社に所属しており、夜な夜な少しずづ書いております。その他、WEBデザイン、HTMLコーディング、jquery、wordpress、イラスト作成、写真撮影など。通勤時間を最大限に活かすのが目下の課題。

Twitter @stand_4u_

新着記事

カテゴリー