Photoshop グラデーションの基本

フォトショップの練習問題

概要

Photoshopの使い方解説の基本の続きです。

Photoshop使い方解説① 基礎と文字ツール
この記事では、Photoshopの基本の使い方を解説します。 画面説明 最初にワークスペースの状態を初期化することをお勧めします。 ウインドウ > ワークスペース > 初期設定 ウインドウ > ワークスペース > 初期設定をリセット ツール...
Photoshop使い方解説② レイヤーと移動ツール
この記事では、Photoshopの基本の使い方を解説します。 上記の記事の続きです。 レイヤーを理解する レイヤーパネル レイヤー関連の操作はレイヤーパネルで行います。 出してみましょう。 ウインドウ > レイヤー  レイヤーの種類 レイヤ...
Photoshop使い方解説③ 図形描画とペンツール
この記事では、Photoshopの基本の使い方を解説します。 上記の記事の続きです。 図形を作成する WEBデザインでボタンを作成したり、文字の後ろに長方形を置いたりなど簡単な図形を作る機会はたくさんあります。 どのように図形を作成するのか...

この記事では「グラデーション」機能を紹介します。
グラデーションは色の選択、ツール、グラデーションレイヤーなど複数の要素があり、非常に説明が難しいです。
うまく説明するように頑張ってみたいと思います。

グラデーション使用例

使っているところを見てみましょう。

グラデーションレイヤー

「グラデーションレイヤー」というレイヤーを追加するレイヤーです。
レイヤーパネルのアイコンから作成できます。

クラシックグラデーション

まず通常のレイヤーを追加し、そこにグラデーションの着色をします。

グラデーションのレイヤーを作りたい→グラデーションレイヤー
グラデーションの色塗りをしたい→クラシックグラデーション

という使い分けです。

シンプルなグラデーションを作る

グラデーションはさまざまな使い方が想定されており、多くのパターンがあります。
まずはシンプルな使用例からマスターしていきましょう。

まずはシンプルな2色間のグラデーションを作成する方法です。
グラデーションレイヤーで作成していきます。

①塗りと背景の色を選ぶ

まずはツールバーの塗りと背景の色を選んでおきましょう。

②グラデーションレイヤーを追加する

レイヤーパネルのアイコンをクリックし「グラデーション」を選びます。
ダイアログが出てきたらグラデーションの色が出ている部分をクリックし「基本」の左上の配色を選択します。


この左上のものは特別な設定で、塗りと背景の色が使用されます。

ダイアログの設定の通りにグラデーションが作成されます。


線形、円形などや角度などが設定できます。
逆方向にチェックを入れれば、塗りと背景を逆にできます。

設定を変更する

後から設定を変更したい場合はグラデーションレイヤーのレイヤーアイコンをダブルクリックします。ダイアログから設定が変更できます。

 

 

③グラデーションツールを使用して直感的にグラデーションを引く

グラデーションツールというものがあります。
グラデーションレイヤーを選択している際に使えます。
画面をドラッグすることにより、グラデーションの方向、角度、変化の急さなどを編集できます。

動画では線形ツールのみ触っていますが、円形や菱形などで動きが違いますので触って試してみてください。

 

④グラデーションの色を変更する

規定のグラデーションから選ぶ

ダイアログを出し、グラデーションパターンを選べます。

任意の色でグラデーションを作成する

ダイアログを出し、どれか色を選択してください。
その後、下のバーの下のあたりをクリックすることで色の分岐点を追加します。

その後分岐点ごとに色を選んでいくことで任意のグラデーションが作成できます。

マスクと組み合わせて活用する

グラデーションレイヤーは一面に作成されてしまいます。
なのでマスクして、使いたい形にする必要があります。

Photoshopのクリッピングマスクを理解しよう
概要 Photoshopのレイヤーマスクについては以下の記事で紹介しています。 この記事では「クリッピングマスク」というレイヤーマスクと似た機能を紹介します。 こちらもしっかりと使い方を把握しましょう。 角丸長方形の画像を作成する クリッピ...
Photoshopの選択範囲とマスクを理解しよう
概要 Photoshopの選択範囲とマスクがどうしても理解できない・・・・という相談がありましたので詳しく説明してみます。 この記事を見ながら理解を深めてください。 Photoshopの結論:「選択範囲を作ってマスクするソフト」 Photo...

レイヤースタイルのグラデーション

レイヤースタイルのグラデーションも便利です。
こちらも活用しましょう。

(Web制作ではこの機能だけ使えればいいかもしれません。)

 

まとめ

グラデーションは慣れるまで使い越すことが難しいです。
いろいろ試してなれていきましょう!

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