gurad

【Photoshop】これでわかる!グラデーションかけかた&応用テクニック


デザインをするにあたって外せないのがグラデーションです。
色を変化させるだけではなく、光沢などを表現できますので、グラデーションでワンランク上のデザインをしましょう。
Photoshopには様々なグラデーションの機能がありますので、基本的な描き方とコツをご紹介します。

グラデーションの基本操作

グラデーションの準備

グラデーションをかけたいレイヤーを選択し、メニューからグラデーションを選択します。
画面上部にグラデーションのパネルが出てきたら、準備は完了です。

grade01

グラデーションの色を設定

グラデーションパネルからグラデーションエディターを開き、お好みの色へと変更します。
以下の画像の青色矢印の箇所をダブルクリックし、色を設定しますが、この時、始点と終点を確認しましょう。
例として、色を赤に変えてみました。

grade03

線形グラデーション

一般的によく用いられるグラデーションの基本です。
ドラッグアンドドロップでグラデーションをかけることができます。
線形なので、直線しか引くことはできませんが、ななめなどの角度をつけることは可能です。

線形グラデーションの方法

グラデーションができました。
始点よりも上は始点の色に、終点よりも下は終点の色になります。

線形グラデーションの完成

円形グラデーション

始点を中心に円形のグラデーションをかけることができます。
線形グラデーションとは違い、ドラッグアンドドロップで引いたラインが円の半径となりますのでご注意ください。
きれいなグラデーションを作るポイントは、始点が円の中心となることと、ラインが半径になることをしっかり理解しておくことです。

円形グラデーションの方法

始点を中心にグラデーションができました。

円形グラデーションの完成

円錐形グラデーション

名前の通り円錐形にグラデーションをかけることができます。
ドラッグアンドドロップで引いたラインが、円錐の始まり・幅になります。
ラインを囲むようにグラデーションをする少し変わったグラデーションです。

円錐形グラデーションの方法

グラデーションができました。
上記の開始ラインから円を描くようにグラデーションが描いてあります。

円錐形グラデーションの完成

反射形グラデーション

ドラッグアンドドロップで引いたラインと反対側に反射するようにグラデーションをします。
2倍の幅のグラデーションができるため、注意が必要です。

反射系グラデーションの方法

反射形グラデーションが出来ました。
始点を中心に反対側に反射していることがわかります。

grade10

菱形グラデーション

名前の通り、始点から終点に向かって菱形にグラデーションをします。
ドラッグアンドドロップで引いたラインが半径となりますので、始点の色が中心の菱形ができます。

菱形グラデーションの方法

始点を中心に菱形のグラデーションができました。

菱形のグラデーションの完成

 グラデーションの応用

グラデーションの色の使い方

グラデーションのいろの使い方によって、光沢を表現することができます。
ポイントは、グラデーションの色を近い色に設定することです。
例として赤色のグラデーションで高級感と光沢を表現してみます。

グラデーションの色の使い方

上記の設定で線形グラデーションをしました。
光を当てたかのように色を調整することで様々な表現が可能です。

grade14

透過をさせる

グラデーションを透過させることも可能です。
グラデーションエディターで色を設定する際に、透明度を調整します。

透過の設定

透過の設定02

上の画像で白色を、不透明度0%に設定し、カラーを背景に設定しました。
レイヤーを緑に塗りつぶし、グラデーションをかけます。
黒から白ではなく、黒から透明になっていることがわかるでしょうか。

透過グラデーションの完成

まとめ

グラデーションについて、紹介しましたがいかがだったでしょうか。
ドラッグアンドドロップで引くラインが、グラデーションの幅になるのか、半径になるのか、しっかりと覚えて
実践することが大切です。
まずは、直線の線形グラデーションをマスターして、ワンランク上のデザインを目指しましょう。

本サイトが運営するWebデザインのオンラインスクールが公開中!
以下のリンクからお申込みで、特別料金の70%OFF!

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
こちらのコースは全くの未経験の方が、プロのWebデザイナーとして働けるレベルになることを目的としたコースです。
・全422レッスン & 42時間! 通学スクール80万円相当の内容
・授業×チャレンジ課題で実践的なスキルが身につく!
・過去1100名以上のスクール卒業生を輩出した、 Webサービス運営企業・デザイナー輩出企業だからこそ作れるプログラム

Webやアプリの最新デザインツール Sketch3 |100レッスンの完全マスターコース
Sketch3未経験からプロレベルを目指す、充実したコースです。
Sketch3の単なる機能説明をするような、つまらないコースではなく、アイコン制作、ボタン作成、メインビジュアル制作、Webページの制作など、実際の制作をしながら実践力を身につけます。
1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


NESTonlineBlog編集部

NESTonlineBlog編集部です。ご寄稿頂いた記事などを公開していきます。

Next Article【これから Web制作をする人向け】Photoshopを使う前にしてほしい設定