【動画解説】Webデザイナー愛用のPhotoshop基本機能5選

ロードマップ

「Webデザイナーになるのに必要なPhotoshopの機能だけ使えるようになりたい」

「Photoshopに画像を取り込んで、デザインを作成してすすめると聞いたけれど、暗くて使えない気がする…」

Webデザイナー目指して、Photoshopの勉強を始めたもののPhotoshopの機能が多すぎて何を使えるようになれば良いのかわからず、こんな悩みをかかえていませんか?

そこで本記事では、以下についてまとめました。

  • Webデザイナーが実際に使用するPhotoshopの機能
  • Photoshopで写真をキレイに加工する方法

この記事を見るだけでWebデザイン作成時に実際に使用する、写真をキレイに加工する方法やWebデザイナーが使用する基本機能が使えるようになります!

分かりやすく解説動画も一緒に貼っておきますので実際に手を動かしながらぜひ最後まで見てください。

Webデザインでよく使用するPhotoshop基本機能とは?

Designed by Creativeart / Freepik

Webデザインで使用するPhotoshopにはたくさんの出来ることがあります。

機能が多すぎて何から覚えればいいかわからないという方にむけて、よく使用する機能を以下の5つに絞りました。

  1. トーンカーブ
  2. 色相・彩度の調節
  3. 色調レベル補正
  4. レイヤーマスク
  5. クリッピングマスク

動画を見ながら、Webデザイナー愛用のPhotoshop基本機能5選を覚えてデザインを作成していきましょう!

トーンカーブ

上の左の写真は右の写真と比べると赤みがかっていますよね?

これを右の写真のように赤みを消したり、色味を変える機能がトーンーカーブです。

写真の明るさや暗さを調節したり、コントラストの補正に使う機能です。

Webデザインで使用する写真や画像が必ずキレイとは限りませんよね?

撮った写真が光の加減などで緑がかっていたり、赤っぽくなっていたりした際に、デザインイメージにあわせて写真の色味を変更できます。

画像補正では、なくてはならない機能が「トーンカーブ」です。

そして、「トーンカーブ」はデータの劣化をおこさずに細やかな補正ができるのも特徴です。

トーンカーブを使って写真に色味を変更しよう

上の画像の左にある写真の色味に、右の赤みがかった写真を近づける

  1. 調整したい写真レイヤーを選択
  2. 右下赤枠ないのマークを押す
  3. トーンーカーブを選択
  4. トーンーカーブのプロパティがでてくる
  5. 赤みをなくしたいので赤を調節するショートカットキーMac(option+3)・Windows(Alt+3)押す
  6. 赤い線をクリック押しながら下に(赤みを下げたいため)少しずつ引っ張る

赤みが引いて色味が左の写真に近づきましたよね?

色選択ショートカットを下に、記載してますので調整したい色味に合わせて使用してみてくさい。


Mac(option+3)
Windows(Alt+3)

Mac(option+4)
Windows(Alt+4)

Mac(option+5)
Windows(Alt+5)

↓↓「トーンカーブ解説動画は、以下で確認できます↓↓

【無料photoshop講座①】トーンカーブ

色相・彩度

「色相」とは赤・青・緑など実際の色味や色調のことです。

色相を調節することによって、人が色から受ける印象が変わってきます。

「彩度」とは鮮やかさのことです。彩度が0になると黒色や灰色、白色のように色味がなくなります。

画像内の特定のカラーのみや、全てのカラーの色相、彩度や明るさを同時に調整することができます。

上の画像のように、写真や画像の色味をかえたり、明るくしたり暗くしたりする際に使用する機能になります。

色彩・彩度を調整しよう

上の画像を参考に説明していきます。

  1. 色相・彩度を調整したい画像レイヤーを選択
  2. 右下の赤枠内マークを選択
  3. 色相・彩度を選択
  4. プロパティに色相・彩度が表示される
  5. 色相と彩度の白矢印を左右に動かして調節

↓↓「色相・彩度の解説動画は、以下で確認できます↓↓

【無料photoshop講座②】色相・彩度

色調補正

色調補正とは?

写真、画像全体の色合いを変えたり、画像を明るくしたり暗くしたりすることを色調補正と言います。

色調レベル補正は、画像のシャドウやハイライトの照度レベルを調整することによって、画像の色調範囲やカラーバランスを簡単に明るくしたり暗くしたりできる便利な機能です。

Webデザインの勉強をはじめたばかりの方に、おすすめする一番簡単に写真をキレイに編集できる方法です。

色調レベル補正

上の画像を参考に説明していきます。

  1. 色調レベル補正をしたいレイヤーを選択
  2. 右下赤枠内のマークを選択
  3. レベル補正
  4. レベル補正のプロパティがでてくる
  5. 真ん中の赤枠内矢印を左に動かすと明るくなる

↓↓「色調レベルの解説動画は、以下で確認できます↓↓

【無料photoshop講座③】色調補正

レイヤーマスク

まず、マスクとは?

Photoshopでのマスクは、画像の一部を隠して見えなくする機能のことをいいます。

マスクは画像を直接加工するのではないのであとから元に戻すこともできます。

レイヤーマスクは、グレースケール(白、グレー、黒)の画像を使って、画像の一部を隠して見えなくするマスクのことです。

  • 白い部分は見える
  • 黒い部分は隠されて見えなくなる
  • グレーの部分はその濃さに応じた半透明になる

簡単なものから複雑なものまであらゆる形に対応ができます。

データが重くなりやすいので注意

レイヤーマスクをかけてみましょう

上の画像を参考に説明していきます。

  1. 左赤枠の選択ツール
  2. 画像の残したい部分を囲う
  3. 右下赤枠内のマスクマークを押す
  4. 選択した所以外の場所が見えなくなります。

やっぱりやめたくなった場合も簡単にリセットできます!

  1. 二枚目画像の画像レイヤーの赤枠内の所を右クリック
  2. レイヤーマスクを使用しない

↓↓「レイヤーマスクの解説動画は、以下で確認できます↓↓

【無料photoshop講座⑨】クリッピングマスク

クリッピングマスク

下のレイヤーの透明部分を利用してレイヤーを切り抜く事ができるマスクの機能の事をいいます。

実際に切り抜いているわけではないので、あとから表示部分を移動することも可能です。

クリッピングマスクは、2枚のレイヤーを使用して作成するマスク方法です。

作り方が簡単で、レイヤーが分かれているので画像の差し替えも簡単にできます。

クリッピングマスクをかけてみましょう

上の画像を参考に説明していきます。

  1. マスクしたい形のオブジェクトを作成
  2. オブジェクトを塗りつぶす
  3. 塗りつぶしたオブジェクトレイヤーを画像レイヤーの下に配置
  4. オブジェクトレイヤーと画像レイヤーの間にカーソルを持っていく
  5. Mac(option+クリック)・Windows(Alt+クリック)
  6. 上に置いてあるレイヤーから矢印がでて二枚目の画像のようにマスクがかかります。

↓↓「クリッピングマスクの解説動画は、以下で確認できます↓↓

【無料photoshop講座⑧】レイヤーマスクとは

まとめ|Webデザイナー愛用のPhotoshop基本機能5選

Designed by Creativeart / Freepik

本記事ではWebデザインでよく使用するPhotoshop基本機能について以下の内容をご紹介しました。

  • Webデザイナーが実際に使用するPhotoshopの機能
  • Photoshopで写真をキレイに加工する方法

Webデザイン作成時に実際に使用する基本機能を手を動かしながら作成してみていかがでしたでしょうか?

最初は難しく感じるかもしれませんが、Webデザインで使用する機能はそんなに多くありません。

基本機能を使いこなせるようになれば、スムーズにデザインが作成できるようになります!

Webデザイナー目指して、基本機能をスムーズに作成出来るようにたくさんのデザインを作成してみてください。

コメント

タイトルとURLをコピーしました