- Photoshopにはどんなグラデーションツールがあるの？
- Photoshopでグラデーションする方法を知りたい
Photoshopとは、Adobe社が手がける画像編集・加工ソフトです。
機能性に優れており、あらゆる色を使ってグラデーションを演出することもできます。
本記事では、Photoshopに搭載されているグラデーションの種類や、基本的なグラデーションの作成方法をご紹介します。
Photoshop｜グラデーションツールの5つの種類
グラデーションを使ったデザイン制作といえば、Illustratorをイメージする方は多いと思います。
しかし、Photoshopでもグラデーションを使った演習ができます。
- 線状グラデーション
- 放射状グラデーション
- 円錐形グラデーション
- 反射形グラデーション
- 菱形グラデーション
それぞれ特徴が異なるので、ご自身の用途や目的にあうものを選びましょう。
線状グラデーション
線状グラデーションとは、開始点から終了点に向かって直線的に変わるグラデーションです。
放射状グラデーション
放射状グラデーションとは、開始点から終了点に向かって放射状に色が変わるグラデーションです。
円錐形グラデーション
円錐形グラデーションとは、開始点の周囲で反時計回りに円錐状のグラデーションを作成する方法です。
反射形グラデーション
反射形グラデーションとは、開始点を中心に同じ線形グラデーションを左右に反射させる方法です。
菱形グラデーション
菱形グラデーションとは、中心から四隅に向かって菱形のグラデーションを作成する方法です。
Photoshop｜基本的なグラデーションの作成方法
基本的なグラデーションの作成方法をご紹介します。
- パレットからグラデーションツールを選択する
- グラデーションをかける
①パレットからグラデーションツールを選択する
新規ドキュメントを作成後、パレットからグラデーションツールを選択します。
グラデーションツールがない場合は、パレットにある「ツールバーを編集」を開いてグラデーションツールを指定しましょう。
②グラデーションをかける
グラデーションツールを選択後、画面上部にあるオプションバーをクリックして「グラデーションエディター」を表示させます。
そして、上記画像の赤枠にある左右のアイコンをダブルクリックすると、カラーピッカー(ストップカラー)が出てくるので、好きな色を選択します。
カラーピッカー(ストップカラー)でカラーを変更しない場合は、パレットに指定されている「描画色」と「背景色」が適用されます。
「描画色」と「背景色」を変更する場合は、アイコンをダブルクリックしてカラーピッカーを表示させてください。
さまざまな方向にグラデーションをかける方法
Photoshopのグラデーションは、以下の方向にかけることができます。
- 横にかける
- 斜めにかける
- 縦にかける
- 中央から横にかける
グラデーションツールを選択後、グラデーションをかけたい方向にカーソルをスライドさせるだけで色が適用されます。
グラデーションカラーを反転させる方法
グラデーションカラーは反転させることもできます。上部メニューにある「逆方向」のチェックをONにしてください。
「逆方向」にチェックを入れたら、あとは【さまざまな方向にグラデーションをかける方法】と同様にグラデーションの方向を指定します。
2色以上の色を使ってグラデーションをかける方法
2色以上を使ってグラデーションをするときは、グラデーションエディターにあるスライドを移動させるだけです。
色の指定はメニュー下部にある「カラー」から選択します。
Photoshop｜テキスト・文字にグラデーションをかける方法
ここからは、テキストをグラデーションにする方法を紹介します。
- 新規ドキュメントを作成する
- テキストツールで文字を入力する
- レイヤーからテキストをダブルクリックする
- グラデーションオーバーレイにチェックを入れる
- 任意のカラーを選択する
※「新規ドキュメント」作成方法の解説は割愛します。
①テキストツールで文字を入力する
テキストツールを選択後、好きな文字を入力します。テキストツールは、縦書き・横書きどちらでも可能です。
②レイヤーからテキストをダブルクリックする
レイヤーからテキストをダブルクリックして、「レイヤースタイル」を表示させます。そして、「グラデーションオーバーレイ」にチェックを入れてください。
「グラデーション」の項目をダブルクリックすると、以下の項目が表示されます。
- 基本
- ブルー
- 紫色系
- ピンク
- レッド
- オレンジ
- グリーン
- グレー
- 雲
- 虹色
- パステル系
- 中間色系
これらの色から、さらにグラデーションの種類が分かれます。好きなグラデーションをクリックすると、以下の画像のようにテキストに反映されます。
再度グラデーションを編集したいと思ったら、テキストレイヤーをダブルクリックして、先ほどと同じ手順で操作します。
Illustratorのように文字をアウトライン化せずにグラデーションを適用できるため、後から編集するときもスムーズにおこなえます。
【Photoshop応用編】図形をグラデーションで塗りつぶす方法
ここからは、グラデーションの応用編として「図形をグラデーションで塗りつぶす」方法を解説します。
- シェイプで図形を作成
- 塗りをグラデーションにする
①シェイプで図形を作成する
はじめに、長方形ツールや楕円形ツールを使って図形を描きます。このとき、オプションバーで「シェイプ」を選んでおきましょう。
カーソルをドラッグして図形を作成します。後からグラデーションカラーを指定するため、この時点では何色でも構いません。
②塗りをグラデーションにする
「塗り」のアイコンをクリックすると、設定ボックスが表示されます。
右から2番目の「グラデーションアイコン」をクリックしてください。
グラデーションカラーから好きな色を選択してクリックします。
細かい色を変更したいときは、カラーピッカーの”つまみ”を調節してください。
また、【線形】と表示されている部分をクリックすると、【円形】や【反射】に変えることができます。
Photoshopでグラデーションをだんだん透明にする方法
フォトショップでグラデーションをかける際に、グラデーションは色だけでなく透明度に対してかけることもできます。
透明のグラデーションを使えるようになると、写真の端をだんだんと透明にしていくようなエフェクトをかけることが可能です。
透明グラデーションができると、画像と画像を重ねる際などに、自然に複数の画像を組み合わせることができます。
透明グラデーションを作るための手順は以下の2STEPです。
- レイヤーマスクを作成
- レイヤーマスクに黒→白のグラデーションを作成
以下で詳細を解説していきます。
透明のグラデーションをかけるには、まずはグラデーションをかけたい画像を選択して、レイヤーマスクを作成します。
レイヤーマスクの作成は、レイヤーパネルを表示し、マスクをかけたい画像を選択した状態で、レイヤーパネル下部のレイヤーボタンを押下します。
マスクボタンを押すと、画像の横に白いレイヤーが表示されます。
マスクレイヤーが作成できたら、マスクレイヤーにグラデーションをかけていきます。
ツールバーから選択するか、以下のショートカットキーでグラデーションツールを選択します。
ショートカット：G
グラデーションツールを選択すると、オプションバーにグラデーションの色を設定する画面が表示されます。
オプションバーから、グラデーションの設定を黒から白に切り替わる設定で作成しましょう。
グラデーションを作成したら、レイヤーパネルの横に作成したマスクレイヤーを選択した状態で、画面の横方向にマウスをドラッグします。
マウスをドラッグすると、マスクレイヤーにグラデーションがかかり、黒い部分が透明になるようにマスクがかかります。
このように、透明なグラデーションは、マスクレイヤーに対して、黒白のグラデーションをかけることでかけることが可能です。
Photoshopでドット（水玉模様）のグラデーションを作る方法
フォトショップでは水玉のグラデーションを作ることもできます。
水玉のグラデーションは、グラデーションツールと、フィルタのカラーハーフトーンの機能を使うことで作成可能です。
水玉のグラデーションは以下の工程で作成することができます。
- グラデーションの作成
- フィルタ＞ピクセレート＞カラーハーフトーン
- 選択範囲を反転して塗りつぶし
以下で詳細を、解説していきます。
まずはグラデーションを作成します。
黒と白で線状のグラデーションを作成しましょう。
グラデーションを作成したら、メニューバーから「フィルタ＞ピクセレート＞カラーハーフトーン」を選択します。
カラーハーフトーンパネルでは、チャンネルの値を全て同じ値に設定します。
今回は、半径100px、チャンネルの値を全て45で設定しましょう。
設定を完了すると白黒の水玉が作成されます。
最後に作成された水玉に色を塗ります。
チャンネルパネルの左下にある、「チャンネルを選択範囲として読み込む」のボタンをクリックして、チャンネルの範囲を読み込みます。
「チャンネルを選択範囲として読み込む」のボタンはチャンネルパネル下部の一番左下のボタンになります。
その後、メニューバーから「選択範囲＞選択範囲の反転」を実行します。
選択範囲を反転したら、「編集＞塗りつぶし」で水玉の色を塗って水玉グラデーションの完成です。
Photoshopでゴールド（金色）のグラデーションを作る方法
フォトショップでは、ゴールド（金色）のグラデーションを作ることもできます。
金色グラデーションは、お金やポイントの関わるバナーやデザインの見出しとして文字に使うことも多く、デザインの仕事をする上では知っておくと非常に有用なテクニックです。
金色のグラデーションは、以下の工程で作成することができます。
- テキストの入力
- レイヤースタイルを追加してグラデーションオーバーレイを適用する
- レイヤースタイルで光彩（内側）を設定する
以下で、詳細を解説します。
まずは、金色のグラデーションをかけるためのテキストを入力します。
テキストはツールボックスからテキストツールを選択するか、以下のショートカットキーで選択可能です。
ショートカットキー：T
テキストツールを選択したら、テキストを入力しましょう。
今回は、「Noto Sans JP」の「BlacK」のフォントファミリーを起用しました。
フォントは何でも良いですが、ゴールドなどのエフェクトをかける際は、ゴシック体のなるべく太いフォントを使うと良いでしょう。
また、色をかける際は「白い塗り」の文字で作成しましょう。
今回はわかりやすいように、背景も黒に設定しています。
続いて、テキストレイヤーにレイヤースタイルを追加してグラデーションオーバレイを適用します。
レイヤースタイルの追加は、レイヤーパネルでスタイルを追加したいレイヤーを選択した状態で、「fx」をクリックして追加可能です。
fxをクリックするとメニューがでてくるので、「グラデーションオーバーレイ」を選択しましょう。
グラデーションオーバーレイでは、金色のグラデーションを設定します。
金色のグラデーションは右から、色を6点指定していくことで作成できます。
点の追加は、バーの下でマウスをクリックすれば可能です。
使用する色味は右側から、以下の設定値で入力してみましょう。
（参考値なのでアレンジしてみてもOKです。）
- fee27a
- ffb500
- ab6504
- fefba3
- ffec69
- fbf5df
色の変更は、グラデーションオーバーレイの、グラデーションバーの下にある点を選択した状態で、画面下部のカラーを選択すると、カラーピッカーが表示されるのでそちらから表示可能です。
最後にOKを押せばグラデーションが適用されて完成となります。
せっかくなので、作成したグラデーションには、「金色」と名前をつけて新規グラデーションのボタンで色を登録しておきましょう。
色を追加すると、次回以降同じ設定を色選択から簡単に追加することができます。
グラデーションオーバーレイを適用しただけでも、ゴールド文字感はでますが、今回はより金色感をだすために、さらに「光彩（内側）」のエフェクトをかけましょう。
光彩（内側）のエフェクトは、グラデーションオーバレイと同様にレイヤーパネル下の「fx」のボタンを押下することで設定可能です。
ボタンを押下したら、メニューから光彩（内側）を選択します。
光彩（内側）を選択後表示される画面での設定は、グラデーションパネルとほぼ同様です。
光彩に関しては、右側の色を「fffec4」（薄い黄色）に設定しましょう。
光彩は光は、内側に向かって光っているかのようなグラデーションをかける機能なので、つかっている色味の薄い色を設定すると良いでしょう。
Photoshopでグラデーションができない場合は？
フォトショップで、グラデーションができない場合は、以下のいずれかの原因に該当している可能性があります。
- レイヤーがシェイプレイヤーorスマートオブジェクトになっている
- カラーモードがグレースケールになっている
- レイヤーマスクが選択されている
- レイヤーが空でない
- レイヤーの不透明度や塗りが0%になっている
以下でそれぞれの詳細について解説します。
レイヤーがシェイプレイヤーorスマートオブジェクトになっている
レイヤーがシェイプレイヤーorスマートオブジェクトになっている場合は、レイヤーを選択してもグラデーションをかけることができません。
解決策としては、メニューバーの「レイヤー＞ラスタライズ＞レイヤー」をしてレイヤーをラスタライズしてみましょう。
カラーモードがグレースケールになっている
カラーモードがグレースケールになっている場合も、グラデーションができなくなります。
グレースケールの状態を解決するには、メニューバーの「イメージ＞モード＞RGBカラー」を選択すると、問題が解決します。
レイヤーマスクが選択されている
レイヤーでなく、レイヤーマスクが選択されている状態もグラデーションをかけることができません。
レイヤーマスクとは、レイヤーの一部だけを表示するようにする際に使われるマスク機能です。
設定されている時は、レイヤーの横に白いパネルが表示されます。
こちらのパネルが選択されているときは、グラデーションが設定できないので、レイヤーの右側のパネルでなく、左側のパネルを選択した状態でグラデーションをかけてみましょう。
レイヤーが空でない
レイヤーが空でない状態も、グラデーションをかけることができません。
解決策としては、空のレイヤーを追加した上でグラデーションツールを使うようにしましょう。
レイヤーの不透明度や塗りが0%になっている
レイヤーの不透明度・塗りの設定が0%の場合も、グラデーションができません。
解決策として、レイヤーパネルの「不透明度・塗り」を100%に設定すればグラデーションの設定が可能になります。
まとめ
Photoshopのグラデーションツールの使い方をご紹介しました。
グラデーションは難しいイメージですが、Photoshopを使うことで初心者でも簡単に色の調整ができるとわかりました。
「線状・放射状・円錐形・反射形・菱形グラデーション」はあらかじめ搭載されているため、特別なスキルや知識がなくてもグラデーションの演出ができます。
YouTubeのサムネイルやWEBバナー、ロゴなどさまざまな用途で活用できるので、本記事の内容を参考にぜひグラデーションを試してみてください。
コメント