Photoshopでグラデーションを簡単につける方法【初心者向け】
Photoshop（フォトショップ）で、初心者でも簡単に【グラデーション】をつけられるようになる解説記事です。単純な図形のグラデーションの付け方から紹介します。また、陰影で立体的にする、空のようなグラデーションの応用もあります。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
Photoshopでデザインを作るテクニックの1つに「グラデーション」があります。
これを覚えることでデザインの幅も広がるでしょう。
そこで今回は、初心者でも簡単にグラデーションを描く方法を解説します。
目次
※今回の作業はすべてAdobe Photoshop CCのバージョンで行っています。
田島メンター！！画面内にグラデーションで色を入れたいのですが、何かいい方法はありませんか～？
Photoshopにはグラデーション作成専用の「グラデーションツール」があるので、色や方向・範囲を指定するだけですぐにグラデーションができあがるよ。
グラデーションツールというのはどこにあるんですか？
グラデーションツールは、ツールウィンドウから選択するんだ。実際にやってみよう。
グラデーション機能の簡単な使い方
グラデーションとは簡単にいうと、色を徐々に変化させながら塗る機能です。
さっそく、基本からやってみましょう。
まず作業用の画像を新規に作成します。
Photoshopのトップ画面の新規作成、またはファイルメニューで新規を選びます。
新規作成のダイアログが出ますので、幅、高さを適当に入力し（ここでは幅640、高さ480とします）「作成」を押します。
白紙の新規画像が表示されます。
次にPhotoshop画面の左側のツールボックス（図の←）でグラデーションツールを選択します。
そうするとツールバー部分がグラデーション選択のツールバー（図の↑）に変化します。
この上の矢印2ヶ所を確認してください。
この画像では、表示色(黒）から背景色(白）に円形に色が変化する設定になっています。
あれ？メニュー内にグラデーションツールが見当たらないんですが・・・
もしかして「塗りつぶしツール」が選択された状態になってないかな？そういうときは塗りつぶしツールアイコンを右クリックするとグラデーションツールが表示されるよ。
あ！選択できました！
それではグラデーションを描画してみよう。いろいろな種類のグラデーションが作成できるよ。
この状態で画像上でドラッグ&ドロップをして2点（これが開始点と終了点になります）を指定します。
すると開始点と終了点を半径とする円状のグラデーションができます。
グラデーション選択のツールバーから、他にもいろいろなグラデーションを作ることができます。
例えば、2番目の矢印ではグラデーションの種類の選択ができます。
矢印のところを押すと候補が表示され、その中から選ぶことができます。
また、3番目の矢印の部分では、直線的なグラデーションか、円状のグラデーションかを選べます。
黄色矢印の項目を選ぶと、下記のように表示が変わります。
先ほどと同様に、マウスのドラッグ&ドロップで2点を指定しました。
すると、紫と白のグラデーションが描けます。
グラデーションの基本はわかりましたか？
グラデーションをデザインへ応用する
グラデーションの操作は理解できても、実際にどうデザインに利用していくのかイメージしにくいと思います。
ここからは、グラデーションを使った3つのデザイン例を紹介します。
- 陰影をつけて立体的に見せる
- 文字の色をグラデーションに変化させる
- 青色のグラデーションで空のようなイメージを描く
それでは見ていきましょう。
陰影をつけて立体的に見せる
円に円形グラデーションを設定すると、立体的な円にすることができます。
手順は、レイヤーパネルの「新規レイヤーを作成」アイコンをクリックし、新規レイヤーを作成します。
次に、追加されたレイヤーにだ円形選択ツールを使って、カンバス上に円形の領域（点線で囲まれたエリア）を作成します。
グラデーションの色を「レッド」の中から選びます。
円形の領域の中をドラッグ&ドロップするとグラデーションが設定されます。
文字の色をグラデーションに変化させる
色を変更したい文字レイヤーに、先ほどグラデーションを設定した要領で、「グラデーションオーバーレイ」を設定すると文字にグラデーションを付けられます。
まず、文字ツールで文字を書きます。
文字のレイヤーが選択された状態で、下の「レイヤースタイルを追加」アイコンをクリックします。
すると、レイヤースタイルダイアログが表示されます。
カラーグラデーションオーバーレイをチェックし設定画面を表示します。
グラデーションの詳細を設定します。
（スタイル：線形、角度：90、比率：100）
グラデーションの種類を「グリーン」の中から選びます。
OKボタンを押すと、文字にグラデーションが設定されます。
青色のグラデーションで空のようなイメージを描く
青色を微妙に変化させて空のイメージを作る方法は、背景レイヤーに対してグラデーションをつけることで実現できます。
今回は、表示色を水色、背景色を透明にします。
描画色をクリックし、カラーピッカーで水色を設定します。
次に、グラデーションパネルの「基本」を開き、描画色で設定した水色が設定されたグラデーションを選びます。
レイヤーパネルで背景レイヤーを選択し、カンバス上にドラッグ&ドロップします。
背景にグラデーションが設定されます。
例も含めてやり方は理解できましたか？
プリセットのグラデーションを使って、それぞれのオプションを適用させたとき、どのような効果が出るか練習してみよう。
球型にしたり、複数の色を指定したりすることもできるんですね。
グラデーションはレイヤーマスク内でも使えることを覚えておこう。透過と組み合わせてうまく使えば表現の幅が広がるよ。
なるほど、ありがとうございます！
Photoshopをもっと使いこなすには、Photoshopで写真をモノクロにする方法も合わせてご覧ください。
執筆してくれたメンター
| メンターOM
Webデザインの勉強のためロサンゼルスに留学。 現在もロサンゼルスで働く傍ら、フリーランスのWebデザイナーとして、アメリカだけでなく日本からのWeb制作も請け負う。 |
Photoshopを学習中の方へ
これで解説は終了です、お疲れさまでした。
- Photoshopを調べたけど分かりづらい
- 副業や転職後の「現場で使える」知識やスキルを身につけたい
Photoshopの学習や情報収集をしていて、このように思ったことはありませんか？
テックアカデミーのPhotoshop講座では、第一線で活躍する「プロのWebデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。
合格率10%の選考を通過した、選ばれたWebデザイナーのチャットサポートを受けながら、初心者でもフォトレタッチをマスターできます。
