Photoshopでグラデーションを簡単につける方法【初心者向け】

Photoshopでデザインを作るテクニックの1つに「グラデーション」があります。これを覚えることでデザインのレベルも上がるでしょう。

 

そこで今回は、初心者でも簡単にグラデーションを描く方法を解説します。

 

なお本記事は、TechAcademyのWebデザインオンラインブートキャンプのPhotoshopのカリキュラムをもとに執筆しています。

(※今回の作業はすべてAdobe PhotoShop CCのバージョンで行っています)

 

グラデーション機能の簡単な使い方

グラデーションとは簡単に言うと色を徐々に変化させながら塗る機能です。

早速、基本からやってみましょう。

 

まず作業用の画像を新規に作成します。ファイルメニューで新規を選びます。

ファイル新規

 

新規作成のダイアログが出ますので、幅、高さを適当に入力し(ここでは幅640,高さ480とします)OKを押します。

新規作成

 

白紙の新規画像が表示されます。

白紙

 

次にPhotoshop画面の左側のツールボックス(図の←)でグラデーションツールを選択します。そうするとツールバー部分がグラデーション選択のツールバー(図の↑)に変化します。この上矢印2か所を確認してください。

グラデーションツール

この画像では、表示色(黒)から背景色(白)に円形に色が変化する設定になっています。

 

この状態で画像上でドラッグ&ドロップをして2点(これが開始点と終了点になります)を指定します。

ドラッグ&ドロップ

 

 

すると開始点と終了点を半径とする円状のグラデーションができます。

円状グラデーション

 

 

グラデーション選択のツールバーから他にもいろいろなグラデーションを作ることができます。

例えば、2番目の矢印ではグラデーションの種類の選択ができます。矢印のところを押すと候補が表示され、その中から選ぶことができます。

また、3番目の矢印の部分では、直線的なグラデーションか、円状のグラデーションかを選ぶことができます。

グラデーションの種類

 

青矢印の項目を選ぶと、下記のように表示が変わります。

青矢印

 

 

先ほどと同様にマウスのドラッグ&ドロップで、2点を指定しました。

ドラッグ&ドロップ2

 

 

すると、虹色のグラデーションが描けます。

虹色グラデーション

グラデーションの基本はわかりましたか?

 

 

グラデーションのデザインへの応用

グラデーションの簡単な操作は理解できても、どうやってデザインに使うのかイメージしにくいと思いますので、ここから3つの例を紹介します。

  • 陰影をつけて立体的に見せる
  • 文字の色を虹色に変化させる
  • 青色のグラデーションで空のようなイメージを描く

それでは見ていきましょう。

 

陰影をつけて立体的に見せる

先ほど作った白黒の円形のグラデーションの一部を切り取って、他の画像に張り付けてみると、このようなデザインが完成します。

手順は、ツールボックスで領域指定を円形に変え、先ほどの画像で切り抜きたい領域を円形で指定してコピーし、新規画像を作成し、ペーストで切り取った部分を重ねるだけです。

陰影

 

 

文字の色を虹色に変化させる

書いた文字を文字レイヤーのグラデーションオーバーレイを先ほどのグラデーション設定の要領で設定すれば文字にグラデーションを付けられます。

まず文字ツールで文字を書きます。

文字を書く

 

次にレイヤーツールを表示させ、文字のレイヤー(Tと表示のあるところ)をダブルクリックします。

文字レイヤー

 

レイヤースタイルダイアログが表示されるので、カラーグラデーションオーバーレイをチェックして、グラデーションの詳細を設定します。

レイヤースタイル

 

下記のように、グラデーションの種類を虹色にし、角度に0を入力します。

虹色設定

 

OKボタンを押すと文字にグラデーションがかかりました。

虹色グラデーション完成

 

青色のグラデーションで空のようなイメージを描く

青色を微妙に変化させて空のイメージを作る方法は、背景レイヤーに対してグラデーションをつけることで実現できます。この場合、表示色を薄い水色、背景色をやや暗い青に予め設定しておく必要があります。

先ほどの続きで、レイヤーツールから背景レイヤーを選びます。

背景レイヤー

 

表示色を薄い水色にするには、ツールボックスの一番下の表示色設定ボタンを押し、色指定で薄い水色を設定します。

色指定

 

OKを押し表示色を確定し、同様に背景色をやや暗い青に設定します。数字の順に設定してください。

色指定3

 

あとはグラデーション位置を2か所ドラッグ&ドロップで指定します。

ドラッグ&ドロップ3

 

2点の指定が終わると結果が表示されました。

完成

 

例も含めてやり方は理解できましたか?

ぜひ自分で試してみてください。

 

Photoshopをもっと使いこなすには、Photoshopで写真をモノクロにする方法も合わせてご覧ください。

[お知らせ]TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。Photoshopを使った画像加工も学ぶことができます。