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制作も請け負う。 |
コスパとタイパ、両方結果的に良くなる良くなる学び方とは？
「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。
もちろん、時間も費用もかかることは間違いありません。
ただ
結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。
コスパ・タイパ最適化の参考として、
テックアカデミー卒業生がスクールを選んだ理由
をご紹介します。
- ・困ったときに、質問や相談できる相手がいるため挫折しなかった
- ・プロとして必要なスキルのみを深く学べたので無駄がなかった
- ・副業案件の提供と納品までのサポートがあったので目的を達成できた
安価・短期間で広く浅く学んでも意味がありません。
本当に自分の目的が達成できるか、それが重要です。
自分にどのスキルや学び方が合っているか、どんな学習方法かなど、お気軽に
無料相談
に参加してみませんか？
カウンセラー・現役のプロへ、何でも気軽に無料相談可能。
30分か60分お好きな時間が選べて、かつ3回まで
すべて無料で
ご利用できます。
無理な勧誘は一切ない
ので、お気軽にご参加ください。
Photoshopを学習中の方へ
これで解説は終了です、お疲れさまでした。
- Photoshopを調べたけど分かりづらい
- 副業や転職後の「現場で使える」知識やスキルを身につけたい
Photoshopの学習や情報収集をしていて、このように思ったことはありませんか？
テックアカデミーのPhotoshop講座では、第一線で活躍する「プロのWebデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。
合格率10%の選考を通過した、選ばれたWebデザイナーのチャットサポートを受けながら、初心者でもフォトレタッチをマスターできます。
プログラミングを独学で学習していて、このように感じた経験はないでしょうか？
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
カウンセラーやエンジニア・デザイナー
があなたの相談に真摯に向き合います。
「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）
