これからPhotoshopでWebデザインをしたい初心者さんのためのツールパネルとかいろいろ

Posted under - Web Design

46

Webデザインをするときにいつも使っている Photoshop ... あまりに高機能なので、ツールパネルだけでもボタンがいっぱい。はじめて Photoshop に触れる人にとってはちょっと難解なインターフェイスかもしれません。Photoshop を始めたばかりの初心者さん向けの、ツールパネルのまとめです。

Photoshop tools
Webデザインするときに、いつも使っている Photoshop。でも本当にはじめて Photoshop を使い始めた人にとっては、Photoshop の画面に並んだ、たくさんあるボタン類からして意味がわからないんだと思います…。そー思ってツールパネルのボタンを端から見ていくと、自分でもコレなんだっけ?っていうのがいくつか …。

実は最近友達が Photoshop を使い始めました。全く Photoshop を使ったことのない彼女に使い方を教えてあげるって約束しちゃったので …。

そんな訳で Photoshop のツールパネルに並ぶボタン類の使い方、Webデザインすることを前提に、コレは知っておいた方がいいかもということを、復習もかねてまとめてみました。

Photoshop のレイヤーは何となく分かるけど、ボタン、ツールの使い方がいまいち分からない … Photoshop 持ってるけどあんまり使ってないから持て余してるっていう、Photoshop 初心者さん向けの記事です。私は Photoshop CS5 を使っているので、他のバージョンでは画面がちょっと違ったり、機能で少し違う部分があるかもしれません。

Photoshop ツールパネル 目次

  1. Photoshop のツールパネル概要
  2. 移動ツール
  3. 長方形選択ツール、楕円選択ツール、一行選択ツール、一列選択ツール
  4. なげなわツール、多角形選択ツール、マグネット選択ツール
  5. クイック選択ツール、自動選択ツール
  6. 切り抜きツール、スライスツール、スライス選択ツール
  7. スポイトツール、カラーサンプルツール、ものさしツール、注釈ツール
  8. スポット修復ブラシツール、修復ブラシツール、パッチツール、赤目修復ツール
  9. ブラシツール、鉛筆ツール、色の置き換えツール、混合ブラシツール
  10. コピースタンプツール、パターンスタンプツール
  1. ヒストリーブラシツール、アートヒストリーブラシツール
  2. 消しゴムツール、背景消しゴムツール、マジック消しゴムツール
  3. グラデーションツール、塗りつぶしツール
  4. ぼかしツール、シャープツール、指先ツール
  5. 覆い焼きツール、焼き込みツール、スポンジツール
  6. ペンツール、パス選択ツール
  7. シェイプツール
  8. シェイプやスタイル、ブラシなどの整理 … プリセットマネージャー
  9. 手持ちのスタイルやグラデーションから、簡単Webデザイン

1. Photoshop のツールパネル概要

Photoshop は本当に高機能なソフトウェアで、写真のレタッチから Webデザインの作成など、いろんなことができちゃう優れもの。でもその操作の基本となる部分の多くがツールパネルに集約されています。

Photoshop の画面

Photoshop の画面

Photoshop の画面。左がツールパネル。ページ上部がツールオプションバー。

ツールパネルは向かって左側の縦長の部分。でもツールパネルとセットで、上にあるツールオプションバーも一緒に使います。ツールオプションバーという言葉がでてきたら、上の部分だなーって思い出してください。

それではツールパネルのボタンを、上から順番に見ていきます。

(私はWebデザインをしているので、基本的に単位は px です。Photoshop の単位は、環境設定の単位・定規で変更します。)

2. 移動ツール

移動ツールと整列ボタン

ツール – ショートカットキー:V。とにかく色んなものを移動させるのが移動ツール。レイヤーでも選択範囲でも、移動させるときにはこれを使います。マウスでドラッグしてもいいし、キーボードの矢印ボタンで上下左右に動かすこともできます。キーボードだと 1px ごとなので、ちょっとじれったいなーという時は shift + 矢印キーで 10px ずつ移動します。

押さえておきたいのは、ツールオプションバー(画面の上の所)にある、整列ボタン。上端揃えや中央揃えなど、かなり便利に使えます。言葉だと便利な感じが伝わりませんねー。

例えばボタンを作って、センターにテキストを持ってきたいなーというとき …

まずはボタンに対して、1のように適当な位置にテキストを書きますよね。そしたらボタン本体のレイヤーとテキストレイヤーを選択しておいて …

ボタンとテキストを選択

選択すると、こんな風に背景がブルーになります。複数選択する時は shift キーを押しながらクリックです。この状態で中央揃えボタン(水平方向と垂直方向ふたつあります)を押すと … 2のように一発できれいにセンタリングされます!

とにかく移動するだけでなく、揃えるときにもお役立ちなのが移動ツールです。名前が移動ツールだし、アイコンもあんなだから揃えるって感じはいないけど、揃えるのは移動ツールって覚えておきましょう。

3. 長方形選択ツール、楕円選択ツール、一行選択ツール、一列選択ツール

いろんな選択ツール

色んな形の選択ツール – ショートカットキー:M。画面の中で範囲を選択するためのツールです。画面上では、選択している範囲は点線で囲まれます。長方形楕円の他に、一行、一列(横、縦)選択ツールがあります。これは説明いらないですね。直感的に分かると思います。shift キーを押しながらドラッグすると、正方形や正円になります。

一行、一列選択ツールは 1px で横、縦の細ーい選択範囲を作ります。そのまま塗りつぶせば 1px の直線が引けたりします。

選択ツールで覚えたいのが、選択範囲の追加や削除の仕方です。選択ツールを選ぶと、ツールオプションバーにはいろいろボタンが出ます。

左側の4つのボタン – 通常は一番左の新規追加が選択されています。その他のボタンはどんな役目をするかというのをおさえておきましょう。

3.1. 新規選択

まずは普通に四角く選択しました。これは説明いらないですねー。そのままドラッグして選択範囲をつくりました。

3.2. 選択範囲に追加

ふたつ目の選択範囲を追加

さっきの選択範囲に、ふたつ目の選択範囲を追加します。わざわざツールオプションバーのボタンを押さなくても、shift キーを押しながらドラッグしてもOKです。追加のときにはカーソルが + に変わります。

3.3. 現在の選択範囲から一部削除

現在の選択範囲から一部削除

これはさっきのと逆で、もともとある選択範囲から、次に選択した部分を削除します。option キー(Windows は alt キー)を押しながらドラッグして選択範囲を作ってもOKです。カーソルは - に変わります。

3.4. 現在の選択範囲との共通の選択範囲

共通部分を選択

今度は先に選択した方と、あとから選択した部分の共通部分だけを選択する場合です。shift キー + option キー(Windows は alt キー)を押しながらドラッグしても同じです。カーソルは × に変わります。

以下、選択範囲関連のツールが少し続きます。選択範囲の追加、削除などの操作が、キーを押しながらドラッグじゃなくて、クリックするだけのものもありますが、使うキーは同じです。

4. なげなわツール、多角形選択ツール、マグネット選択ツール

これらも前述の選択ツールと同じように、選択範囲を作るためのツールです。ショートカットキー:L。上の選択ツールだと、四角や丸しかできないので、それ以外の形はこっちで選択します。

4.1. なげなわツール

なげなわツールは、フリーハンドで選択範囲を作るときに使います。はじめのうちは使う事もないと思いますが、Photoshop に慣れてくると使う機会も増えてくると思います。選択範囲が大雑把でいいときなどに、よく使います。

4.2. 多角形選択ツール

三角形を選択

これはよく使うツールのひとつです。長方形以外の多角形を選択するときに使います。例えばリボンのような形を作るとき、まず普通に長方形選択ツールで四角を作ってから、三角の選択範囲を作って削除します。

上の例では左右対称になるように、センターを軸にして、三角形の選択範囲を反転させています。もちろん多角形選択ツールを使えば、三角だけでなくいろんな多角形のを選択範囲をつくることができます。でも複雑な形ならペンツール(後述)でパスを作ってから選択範囲にした方がいいかも(私は多角形ツールだとよく失敗してやり直しが多いので… )です。

4.3. ちょっと寄り道:ガイド

上の例ではセンターを出すのに、目安の線を使いました。Photoshop には、ガイドという実際の画像には含まれない、あくまでも目安に使う線を表示させることができます。このガイドは、縦、横、自由に引くことができるので、とっても便利です!メニュー → 表示 → 新規ガイド から数値で指定して引いてもいいし、目盛りの部分をドラッグして引くこともできます(option キーを押しながらだと、水平/垂直が入れ替わります)。

ガイドの引き方

一度描いたガイドは、移動ツール(V)で移動できるし、削除したい時は画面の外に移動すれば削除されます。また、command(Windows は Ctrl) + : キーで、表示、非表示を切り替えられます。

4.4. マグネット選択ツール

名前の通り、画像の境界線(輪郭)に磁石が吸い寄せられるような感じで選択範囲を作っていきます。ざーっとトレースしていくと、画像の対象物に選択範囲が吸い寄せられていきます。

マグネットツール

ちょっと上の画像では分かりにくいかもしれませんが、コーヒーカップの縁をざーっとトレースしていくと、カップの縁に吸い寄せられるようにして、選択範囲を形成する線が吸い寄せられていきます。でも、コントラストのはっきりした部分じゃないと、思うようにいかないので注意が必要ですね。私は全然使ってないです …。

サンプルがちょっと悪いのですが、実際はもっとカクカクしたもの – 例えば四角いビルとかを選択するときには重宝しそうですね!どちらかというと、多角形選択ツールをもっと楽に使いたいって感じのツールです。

5. クイック選択ツール、自動選択ツール

クイック選択ツールと自動選択ツール

複雑な形を選択するときには、クイック選択ツール/自動選択ツールを使います。ショートカットキー:W(私はあんまり使わないようにして、訓練のためにペンツールを使うようにしているので、詳しく説明できないかもです。)

5.1. クイック選択ツール

境界線がはっきりしているときには、クイック選択ツールが使えます。ドラッグしていくだけで、ずらずらーっと選択範囲を作ってくれます … これはらくちんですねー!

クイック選択ツール

5.2. 自動選択ツール

自動選択ツールはクイック選択ツールと違って、境界線を検出するのではなくて、同じような色や明るさのところを選択してくれます。これもほとんど使った事はないのですが …。

自動選択ツール


以上ここまでが、選択範囲に関連するツールでした。でも上記以外でも選択範囲を作る方法は Photoshop ではたくさん用意されています。切り抜きをする場合は、過去記事:Photoshopの切り抜き、選択範囲いろいろ:で、結局どれがいいの? も読んでみてください!

5.2. おまけ:選択範囲のぼかし

ぼかし

選択範囲はぼかすことができます。ぼかす場合は、ツールオプションバーのぼかしの所に 20px など、ぼかす範囲を指定します。1は普通に選択範囲を作って、円を描いたもの。2は 20px だけ選択範囲をぼかしてから塗りつぶした状態。もちろん塗るだけじゃなくて、削除したりいろいろできます。

MEMO

選択範囲を作って必要なくなったら、command(Windows はCtrl) + D キーで選択範囲を解除できます。

6. 切り抜きツール、スライスツール、スライス選択ツール

切り抜きツール、スライスツール

これらもよく使うツールです。ショートカットキー:C。でもスライスツールは今回は省略しますね。

6.1. 切り抜きツール

トリミング

切り抜きって聞くと、複雑な形を切り抜くみたいに聞こえますけど、切り抜きツールはそういう切り抜きではなくて、トリミングするためのツールです。

基本的に四角く切り抜きます。ドラッグでトリミングする部分の大きさは変えられますし、回転させて斜めにトリミングしたりすることもできます。

6.2. スライスツール、スライス選択ツール

スライスツールは、1枚の画像をバラバラに分割するためのツールです。Webサイトのデザインを作って、それを HTMLCSS におこすときに、Webサイトのパーツごとに切り出したりするときに使います。他にはあんまり使わないかも … なので今回はちょっと省略して別の機会に紹介します!

7. スポイトツール、カラーサンプルツール、ものさしツール、注釈ツール

スポイトツールやものさしツール

スポイトツールも頻繁に使うツールです。ショートカットキー:I

7.1. スポイトツール

描画色と背景色

スポイトツールは直感的に分かりやすいと思います。カーソルがスポイトの形になって、画像などの上でクリックしたところの色を 2描画色にします。option キー(Windows は alt キー)を押しながらクリックすると、背景色に適用されます。

スポイトツールは画像の上だけじゃなくて、スウォッチ(後述)から描画色に色を持ってくるときにも使います。また、ショートカットキーは I ですが、キーを押し続けている間だけ利用することも可能です。他のツールを使っているときでも、I キーを押している間は、スポイトツールになる … といった具合です。他のツールでも、この「押しっぱなし」は使えるので、試してみてください!

7.2. カラーサンプラーツール

カラーサンプラーツールは、画像の中のある場所(普通は複数指定します)の色の情報を可視化するツールです。言葉だと難しいですね …。どんな場面で使うかというと、画像のホワイトバランス、色かぶり(黄色い光の下で撮ったら、全体的に黄色くなったような感じ)を補正するときなどに使います。

試しにやってみた方が分かりやすいと思うので、試しに色かぶりを調整してみます。手持ちにあんまり色かぶりした写真がなかったんですけど、下記の写真はどことなく赤っぽいですよね。

1. 3カ所から色をサンプリング

色をサンプリング

まずはこの写真の中で、1一番白っぽい部分2中間のグレーの部分3一番黒っぽい部分をカラーサンプラーツールでクリックします。すると、下の画像のような情報ウインドウが開いて、それぞれの場所の色の情報を見る事ができます。

2. 色情報を確認

色情報

黒は RGB(レッド、グリーン、ブルー) でいうと 00 00 00 です。白は 255 255 255 です。とてもバランスがとれてるって感じです。上の画像の色のサンプルを取ったところ – 3黒だなーって思ってクリックした部分を見ると、9/15/4 と、数値がバラバラですね …。他の部分も同様にバラバラの数値になっています。なので選んだ 3つのポイント全ての RGBの数値を、全部同じ数字 … 3つの数値の平均に合わせてみます。

上の画像で色情報の見方、画面をクリックした部分は下記の通り。

  • 1 #1 黒いと思ったところ
  • 2#2 白いと思ったところ
  • 3#3 グレーだと思ったところ

それでは数値を合わせるために、トーンカーブを使ってみます。トーンカーブは、メニュー → イメージ → 色調補正 → トーンカーブ、またはショートカットキー、 command(Windows は Ctrlキー) + M です。
(ちょっとツールパネルからはなれちゃいましたが、カラーサンプラーツールの使い方の説明なので …)

それでは R(レッド)、G(グリーン)、B(ブルー)の各数値を揃えてみます。まずは メニュー → イメージ → モード を、 16bit/チャンネル にしてから作業します(画像の劣化を最小限にするため)。

3. トーンカーブで調整する

補正後の色情報

トーンカーブでそれぞれの色を開き、調整していきます。少しややこしいですけど、基本的にはさっきの情報ウインドウを見ながら、スライダーやカーブを調整して 3つの色の数値を合わせていきます。

右の情報ウインドウの数値は、全ての色を補正し終わった状態のもの。数値が大体揃っているのがわかると思います。こんな風にするのが目標です。

R(レッド)は暗い部分(黒いと思った部分)の 10 を、 もう少しさげて平均(7くらい) にするので、トーンカーブの左下のスライダーを右にスライドさせていきます。右にスライドさせると数値は小さくなり、上にスライドさせると大きくなります。

赤が終わったら、続いてG(グリーン)。各スライダーは、矢印の方向に動かしています。グリーンはハイライト、シャドウ、中間調も大きく変化させました。

B(ブルー)はハイライトを大胆にカットしなくちゃいけませんでした。RGB の数値を揃えた画像は、下記のような感じになりました!

4. 補正後の写真
補正前の写真補正後の写真
<<Prev
Next>>

黄色っぽかった写真がすっきりしました!今回は色かぶり補正でしたけど、他にもカラーサンプラーツールを重宝する場面が出てくると思います。こんな風に使うんだということだけチェックしておきましょう。

(上記のようなやり方で色かぶりを補正するのが、いい方法なのかどうかはちょっと分かりません … 私はこんな風にしています … 教えていただけるとうれしいです …)

7.3. ものさしツール

角度補正

名前の通り、ある場所からある場所までの距離を、幅と高さで教えてくれます。また、斜めの場合は角度を調べるのにも使えます。CS5からは写真の角度修正が簡単にできるようになっています!

微妙に垂直じゃないので、ものさしツールで真っすぐにしてみます。やりかたはとっても簡単。

対象のライン、1の例では、電柱に沿ってものさしツールでラインを引きます。するとツールオプションバーに角度補正ボタンが出てるので、それをクリックするだけです。

すると 2のように、簡単に真っすぐに補正されました。角度変更によってできてしまう余白も自動でカットされます。何気に便利です!

7.4. 注釈ツール

画像に注釈、メモをつけることができます

名前の通り、画像に注釈、メモをつけることができます。注釈ツールを選択して、画面上をクリックするだけです。もっと活用したい機能ですねー。

8. スポット修復ブラシツール、修復ブラシツール、パッチツール、赤目修復ツール

スポット修復ブラシツール、修復ブラシツール、パッチツール、赤目修復ツール

ショートカットキー:J。これらは特に、写真に写ったゴミやシミ、人の顔ならホクロやしわなどを修復する(消す)ツールです。

8.1. スポット修復ブラシツール

スポット修復ブラシツールは、とっても便利なツール。写真にちょっとしたゴミとか、消したいものがあるときに、簡単に消してくれます。ホクロやシミなんかも消せちゃいます。

スポット修復ブラシツール

スポット修正ブラシツール

サンプルはホクロじゃないんですけど、ケーキのお皿の上に汚れ 1を書き込んじゃいました。それではこの汚れを消してみましょう。

スポット修復ブラシツールを選択後、上記の画面のように、ツールオプションバーで、コンテンツに応じる(これは CS5 からなので、近似色に合わせるでも OK)にチェックを入れます。

あとはブラシのサイズをゴミの大きさに合わせて、2消したいものところでクリックするだけです!ちょっと写真がわざとらしいですけど、こんな感じにきれいに消せました!

8.2. 修復ブラシツール

修復ブラシツールも同じように、ゴミ取り、シミ消しなどに使います。スポット修復ブラシツールとの違いは、まずはサンプル(ほとんどの場合はすぐ近くの類似色)を取ってから、そのサンプルで消したいものを覆い隠すって感じです。まずは option キー(Windows は alt キー)を押しながら、とりたいサンプルの上をクリック。サンプルを取ってから、今度は消したいものをクリックします。そうするとさっきのスポット修復ブラシツールのときみたいにきれいに消せます。

8.3. パッチツール

パッチツール

パッチツールも消したいものを消す機能ですが、修復ブラシツールとはちょっと違って、あとからサンプルを探すっていう感じです。1まずは消したいものをフリーハンドで選択します(他の選択ツールで選択しておいても OK です!)。

そしてそのままドラッグします。2ドラッグした部分の色で消したいものの上を覆うので、違和感なくしっくりきたところでドラッグをやめます。

消したい対象物の形やサイズによって色んな修復ツールを使い分けてくださいね。

8.4. 赤目修復ツール

これはフラッシュ撮影などでよくある、瞳の赤目を修復するツール。瞳の部分をクリックするだけなので、直感的に操作できると思います。

9. ブラシツール、鉛筆ツール、色の置き換えツール、混合ブラシツール

ブラシツール

ショートカットキー:B。Photoshop で頻繁に使うのが、このブラシツール。ブラシツールは奥が深くて、それだけで記事が書けちゃうくらいなので、今回は簡単な説明だけにしますね。

9.1. ブラシツール

ブラシツールは名前の通り、ブラシ(色んな種類があります。)でいろいろ書いたりします。でもブラシは他のツールと組み合わせて、いろんな場面で使います。前述した修復ブラシツールの中でもブラシは使うし、これから出てくる消しゴムツールぼかしツール覆い焼きツールの中でも使います。

また、ブラシは単なる筆先だででなく、色んな形のブラシがあります。よくインターネット上で Photoshop ブラシセットみたいなのを見かけると思いますが、それらを使えばいろんな形を簡単に描くこともできます。

Photoshop ブラシがたくさん配布されてるサイト

ブラシについては本当にいろいろありすぎるので、今回は簡単な紹介だけ。初心者の頃、ブラシについて分かりにくかったのが、不透明度流量の違い。ブラシツールを選択すると、ツールオプションバーで不透明度と流量を変更できます。不透明度は透けて見えるかどうかということ。では、流量っていうのは何でしょう?

不透明度と流量

流量とは、普通のペンでいうところのインクの量みたいな感じです。不透明度を50%にすると、そのまま向こうが透けて見えるだけですが、流量を少なくすると、線を折り返した部分がはっきり分かるようになったり、かすれた感じがでるようになったりします。手書きっぽい感じ、エアブラシの感じを強調したい時にはいい感じですね!

9.2. 鉛筆ツール

鉛筆ツールは線を引くツール。ブラシと違ってハッキリした線を引きたいときに使います。ブラシツールで引いた線とは見た目が明らかに違うので、説明いらないですね!

9.3. 色の置き換えツール

色の置き換えツール

色の置き換えツールは名前のとおり、色を置き変える(色だけ上塗りする)ツールです。操作も至って簡単で、新しい色を選んでおいてから、普通のブラシと同じように塗りたいところをドラッグするだけです。ツールオプションバーで輪郭検出を選んでおくとはみ出さずに塗れるようですが、境界線がはっきりしないものは選択範囲を作っておいてから塗った方がよさそうです。私はほとんど使ったことがありません … 。

9.4. 混合ブラシツール

これは Photoshop CS5 からの新しい機能です。キャンパス上の色を混ぜながら使えるブラシ …。 何ていうか、油絵とかって前の絵の具が乾いてないうちに上塗りすると、筆運びに沿って、色が混ざりますよね。そんな表現を実現するブラシが混合ブラシツール … らしいです。なのでリアルな水彩っぽい絵や、油絵っぽい絵が書けるようです。

またゼロから書くのではなくて、写真をもとにして油絵っぽくレタッチしてしまうこととかもできちゃいます。 … だけど、絵心ない私は全然使いこなせてません … X(

下記のリンクでは、混合ブラシツールを使って写真を油絵っぽくレタッチする手法が、動画で紹介されています!

10. コピースタンプツール、パターンスタンプツール

スタンプツール

ショートカットキー:S。スタンプツールは、修復ツールと同じ様に、不要なものを消したりする使い方がよく紹介されています。でも本来は、複製・コピーや、パターンをスタンプ(はんこ)みたいに貼付けるツールです。

10.1. コピースタンプツール

コピースタンプツールは、前述した修復ブラシツールのように、ゴミやシミを消すのに使ったりします。でも本来は前述したように、コピーを作って、それをスタンプみたいにぺたぺた貼るっていうツールです。

まずは option キー(Windows はalt キー)を押しながら、1サンプリングしたいところをクリックします(大きさなどはブラシツールで調整)。2そして新しく貼付けたい所でクリックするだけです。下の画像は赤いフルーツソースをサンプリングして、お皿の上に貼付けました。

スタンプツールの使い方 1

スタンプツールの使い方 2

コピースタンプツールの使い方としては、ゴミやシミのない所をコピーして、ゴミの上に貼付けて画像を修正する … というやり方がよく紹介されてます。上記の例とは全く逆のアプローチですけど、工夫次第でいろいろ使い道があるツールですね!

10.2. パターンスタンプツール

パターンスタンプツールは、コピースタンプツールと同じように新しい部分にスタンプして貼付けるツールですが、貼付けるものをサンプリングする訳じゃなくてパターンパレットから選びます。パターンというのは、下の画像みたいなもの。

基本的にはシームレス – 繰り返して表示しても継ぎ目が分からないものが多いです。このようなパターンをスタンプします。パターンはインターネット上でたくさん見つけることもできるし、自分で作ることもできます!

Photoshop のパターンのまとめ … 最近のツイッターのつぶやきから

11. ヒストリーブラシツール、アートヒストリーブラシツール

ショートカットキー:Y。まず、ヒストリーっていうのはなんでしょう … Photoshop は一度行った作業をやり直したり、さかのぼったりすることができます。その作業をひとつひとつ記録しているのがヒストリーです。ヒストリーはメニュー → ウインドウ → ヒストリーで確認できます。

11.1. ヒストリーブラシツール

ヒストリーブラシツール

ヒストリーブラシツールは、ブラシで描いた部分だけヒストリーをさかのぼることができるツールです。ちょっと言葉では分かりにくいので …

カラーの写真を白黒にして、ケーキの部分だけ、白黒にする前(ヒストリーでさかのぼる)の状態に戻しました。ヒストリーブラシツールでなぞって塗っただけです。

ヒストリーウインドウ

どこまでさかのぼるかはヒストリーウインドウで指定します。

今回は白黒にする前の、ファイルを開いた状態(カラー)の状態に戻しただけですね!

11.2. アートヒストリーブラシツール

アートヒストリーブラシツールについては、全く使ったことがありません X( なので全く分からないので参考になりそうなリンクを貼っておきます。

12. 消しゴムツール、背景消しゴムツール、マジック消しゴムツール

消しゴムツール

ショートカットキー:E。これもとってもよく使うツールですね!普通に消しゴムとして使えるので、直感的に分かると思います!

12.1. 消しゴムツール

消しゴムツールは説明いらないですね。普通に消しゴムとして使います。サイズなどはブラシで調整します。

12.2. 背景消しゴムツール

背景消しゴムツール

背景消しゴムツールは、普通の消しゴムと違う所がふたつあります。まずは背景レイヤーで使った時の状態が違います。背景レイヤーで普通の消しゴムツールを使用すると、画像が消えて背景色が出てきます 1。一方背景消しゴムツールでは、背景色も一緒に消えて透明になります 2

背景消しゴムツールでの切り抜き?

それから、背景消しゴムツールは、消しゴムツールと違って、カーソルの中心にバッテン(+)があります。この中心部分の近似色だけを消してくれるので、はっきり色が違う場合などは切り抜きみたいに使うこともできます。

試しにコーヒーカップを残して、背景だけ消してみましょう。カップに中心のバッテン(+)が被らないように注意しながら消していきます。

コーヒーを残して、背景だけ消せました。サンプルでは切り抜きみたいにしちゃいましたが、実際は切り抜きとして使うという訳ではなくて、ちょっとした微調整に使ったりします。

12.3. マジック消しゴムツール

マジック消しゴムツールは、ワンクリックでクリックした所の色と同じ色の部分を一気に消し去ってくれる消しゴムです … なので複雑に色が混在する写真などにはちょっと不向きな感じです。べた塗りのイラストなどなら、同じ色の所を一気に消せますが … あまり使ったことがありません。

13. グラデーションツール、塗りつぶしツール

グラデーション/塗りつぶしツール

ショートカットキー:G。これは名前の通り、グラデーションを作ったり、塗りつぶしたりするツール。グラデーションはレイヤースタイルで指定することもできるので、意外と使用頻度は低いかも。

13.1. グラデーションツール

名前の通りグラデーションを作るツールです。クリック、ドラッグでグラデーションを簡単に描けるので、難しくありません。グラデーションの形自体は、次の 5つ用意されています。

  1. 線形グラデーション
  2. 円形グラデーション
  3. 円錐形グラデーション
  4. 反射型グラデーション
  5. 菱形グラデーション

ツールオプションバーで、どのタイプを使うか選びます!またグラデーション自体は自分で作ることもできますし、インターネット上でいろんなグラデーションを見つけることができます。

13.2. 塗りつぶし

これもそのまま、選択した範囲を色やパターンで塗りつぶします。描画色で塗りつぶす場合は、ショートカットキー option(Windows は alt キー) + delete キー、背景色で塗りつぶす場合は command(Windows は Ctrl キー) + deleteキー が便利です。

14. ぼかしツール、シャープツール、指先ツール

ここからは、画像を部分的に加工するツールです。同じような効果を全体的につけるフィルター機能とうまく使い分けていきましょう。

14.1. ぼかしツール

部分的にぼかしたいときはこのぼかしツールを使います。ぼかす範囲などはブラシで調整します。またぼかしの強さも指定できます!

MEMO

全体的にぼかすときは、メニュー → フィルター → ぼかし を使います。

14.2. シャープツール

シャープツール

これはさっきのぼかしツールと反対で、部分的にシャープにしたい時に使います。範囲などはぼかしツールと同じようにブラシで調整します。

2こんな感じで、少しぼやけた顔を簡単にシャープにできます …。

MEMO

全体的にシャープにしたい場合は、メニュー → フィルター → シャープ を使います。

シャープツールを選択しているとき、option(Windows は alt キー) キーを押してる間はぼかしツールに、ぼかしツールを選択しているときは、シャープツールになります。

14.3. 指先ツール

指先ツール

これはなんというか、指先で引っ張ったような感じにするツール … 言葉だと伝わりにくいので画像で見るとこんな感じです。

2画像のように、指でなぞったような感じがでます。どんなところで使うかというと、アイデア次第でいろいろ使えると思うのですが … ブラシサイズを 1px などにしてまつげを延長させたり、切り抜きした髪の毛の仕上げに使ったりしてます。

15. 覆い焼きツール、焼き込みツール、スポンジツール

覆い焼きツール、焼き込みツール、スポンジツール

ショートカットキー:D。これらのツールを使って、画像の全体ではなく、部分的に明るさを変えたり、彩度(鮮やかさ)を変えたりできます。

15.1. 覆い焼きツール

覆い焼きツールは部分的に画像を明るくするツール。使い方は簡単で、まず効果を適用させたい明るさの範囲を選びます。

明るさの範囲を選ぶ

シャドウというのは暗い部分、ハイライトというのは明るい部分、中間調はその間。乱暴な言い方をすると、シャドウは黒、ハイライトは白、中間調はグレーっていうイメージです。

覆い焼きツール

明るくしたい部分のハイライト部分(白に近い部分)をより明るくしたければハイライトを、明るくしたい部分のなかの暗い部分(黒っぽい部分)を明るくしたいならシャドウ、中間なら中間調といった感じです。試しにやってみましょう。

もとが暗めの写真がなかったので … 中間調を指定して、露光量(強さみたいなもの)を50%で、2野菜を明るくしてみました。

15.2. 焼き込みツール

焼き込みツールは覆い焼きツールの反対で、明るすぎる部分を暗くするツールです。焼き込みツールを選択しているとき、option キー(Windows は alt キー)を押してる間は覆い焼きツールに、覆い焼きツールを選択している時はその反対、option キー(Windows は alt キー)を押してる間だけ焼き込みツールになります。さっきのぼかしツールの時と同じです。

全体的に明るくしたり暗くする場合は、メニュー → イメージ → 色調補正 から行います。この辺の画像補正は、過去記事:Photoshop初心者さんが写真のレタッチ(色調補正)などをするために覚えたい機能を読んでみてくださいね!

15.3. スポンジツール

スポンジツールは部分的に彩度(鮮やかさ)を上げたり下げたりするツールです。キッチンにある食器を洗うスポンジを想像してみてください。スポンジって乾くと鮮やかな色ですけど、水に濡らすと色がくすみますよね。あのイメージです。

スポンジツール

使い方は簡単で、ブラシでサイズなどを調整して、彩度を上げるのか、下げるのかを選択。流量(ブラシの所で出てきました)などもお好みにして、補正したい所をなぞるだけです。2サンプルは、サラダの部分だけスポンジツールで彩度を上げてみました。

やっぱりサラダは色鮮やかな方がおいしそうに見えますね!全体的に彩度を変更する場合は、メニュー → イメージ → 色調補正 から行います。

16. ペンツール、パス選択ツール

ペンツール

ショートカットキー:P。ペンツール、パス選択ツールについては過去記事:Illustrator(Photoshop) のペンツールできれいなパス、ベジェ曲線を描くためのコツ(私流)で書いているので、そちらを読んでみてください!

17. シェイプツール

シェイプツール

ショートカットキー:U。これは Webデザインをするのにとってもよく使うツールです!まずはシェイプというのは何かを、きちんと把握しましょう。

シェイプツールは、四角や円、角丸長方形などのシェイプを簡単に作れるツールです。でもシェイプって何でしょう …。シェイプというのはパスで作られた形です(パスについてはもうちょっと後で …)。シェイプについて、初心者さんにとって分からないのは、選択ツールで作った形と、シェイプはどこが違うの?ってことだと思います。確かに同じ形は選択ツールで塗りつぶしてもできますよね。

でもシェイプはパスで描かれているので、解像度を変えたり、変形をさせても劣化しません。もっと分かりやすくいうと、選択ツールで作った形は拡大すればぼやけてしまいますよね 1。でもシェイプで作った形は拡大してもぼやけたりしません 2。いろんな大きさで使い回すこともできます。それがパスで作られた形、シェイプのすごいところです!

選択範囲とシェイプ

パスは編集できます

また、シェイプはパスでできているので、ペンツールを使って簡単に編集することができます。

自分で作った形、シェイプは、どんどんカスタムシェイプとして登録して、いろんなところで使い回しちゃいましょう。時間の節約にもなります!

パスってなんだろうっていう人は、過去記事:Illustrator(Photoshop) のペンツールできれいなパス、ベジェ曲線を描くためのコツ(私流)を読んでみてくださいね!

18. シェイプやスタイル、ブラシなどの整理 … プリセットマネージャー

ツールパネルをずっと見てきましたが、自分で作ったパターンやブラシ、シェイプなどは、登録して貯められるとも書きました。これらは メニュー → 編集 → カスタムシェイプを定義 などで簡単に登録することができます。

スウォッチ

また、作ったカラーはスウォッチに、レイヤースタイル(後述)もスタイルにどんどん名前を付けて登録しておけば便利です。

ブラシやパターンなど、インターネット上で見つけられるって紹介しました。世界中のデザイナーさんが、自分の作品をインターネット上で公開してくれています。ありがたいことに、中には無料でダウンロードできるものもたくさんあります。それらを使わせてもらうのもアリですね!

18.1. どんどん追加してしまいがちだけど、整理整頓を忘れずに!

ブラシやシェイプなど、最初のうちは訳も分からず、気に入ったものをインターネットで見つけると、どんどんダウンロードして追加してしまいがち。気付いたときにはものすごい数になってしまって、Photoshop のパフォーマンスも悪くなっちゃったりします。

特にインターネットでダウンロードしたものは、セットになってたくさん入ってるものが多いので、使わなそうなものは削除したり、使うものだけをまとめた方がいいですね。

シェイプやブラシなどの整理、管理はプリセットマネージャーというもので行います。プリセットマネージャーは、いろんなところからアクセスできますが、分かりやすいのは、メニュー → 編集 → プリセットマネージャー です。

プリセットマネージャー

プリセットマネージャー

削除する時は、色でもブラシでも、リストから選んでから削除ボタンを押すだけです。

また気に入ったものだけ集めて、セットとして保存しておくこともできるので整理整頓しておくことが大事です。頻繁に使うものだけメインのプリセットにしておいて、その他の捨てるに捨てられないもの、などをまとめて別のセットとして保存しておくなど、セットはいくつも作ることができます。

セットの作り方

セットを保存

上の画像はスウォッチですが、ブラシやパターン、シェイプでも同じです。セットにするものだけ shift キーを押しながらクリックして選んでいきます。選び終わったらセットを保存ボタンをクリック。分かりやすい名前を付けて保存しておきます。

セットはいつでも読み込みボタンを押せば読み込めるので、たくさん貯まってしまう前に整理整頓しておきましょう。

19. 手持ちのスタイルやグラデーションから、簡単 Webデザイン

どうして気に入ったシェイプやパターンなどを貯めておくかというと、次に使う時に作業がとっても効率的になるからです!貯めておいたシェイプ、グラデーション、スタイルなどを使えば、簡単、効率的に作業をすることができるようになります。

試しに過去に作って貯めておいたスタイルなどで、ボタンをひとつ作ってみます。

19.1. シェイプツールでボタンを作って、スタイルを適応

シェイプにスタイルを適応

まずはシェイプツールで、ボタンの形になる角丸長方形を描きます 1。次に、以前作っておいたレイヤースタイルをシェイプに適用します 2


ワンクリックでスタイルいろいろ

たったのワンクリックでこんな風にボタンらしくなりました!レイヤースタイルというのは、レイヤーパネルの効果の図の部分のことです。

レイヤースタイルの中味は、以下のように作ってあります。

  • ドロップシャドウ – ボタン全体の影
  • シャドウ内側 – ボタン上部の白いハイライト
  • グラデーションオーバーレイ – ボタン全体のグラデーション
  • 境界線 – ボタンの 1px の縁、グラデーション付き

スタイルの中で使っているグラデーションやパターンも、以前作って登録しておいたもの。貯めておけば、こんな風に使い回しがききます!

19.2. テキストを入れて、スタイルを適用

テキストを入れて完成

最後にボタンにテキストを入れて、テキストにも以前作っておいたレタープレスっぽいスタイルを適用します1。もちろんワンクリックです。たったこれだけの作業でボタンを新しく作ることができました!

やっぱりもっと丸くしよーって思ったら、2シェイプの形をちょっと変えてあげるだけで OK です!

こんな風にスタイルやグラデーションなどを作って貯めておけば、作業はとっても効率的になります。

前述しましたけど、インターネット上には、こんな風に簡単にデザインを作るためのパターンや、グラデーション、ブラシやシェイプ、スタイルなどたくさん公開されています。世界中のデザイナーさんたちが作ったものを、中には無料で提供してくれています。とってもありがたいし、うれしいですね。

でもそのままそれを使わせてもらうだけでは、何の勉強にもなりません。特にスタイルはとっても勉強になると思うので、ダウンロードして気に入ったら、どんな風にして作ってあるのか見てみることをおすすめします。こんな風にやってるんだーと、勉強になること間違いなしです :D

そして自分でも作ってみましょう!そうやってひとつひとつ慌てないで覚えていけば、きっと Photoshop をもっと使いこなせるようになると思います!あけちゃんがんばって XD

Comments

Thank you for the comment.