WEB業界で働く人や興味がある人に役立つ情報サイト“qam（カム）”

投稿者： とみー
カテゴリー： デザイン >Photoshop

今回は、「円とグラデーションを使用してスタイリッシュなグラデーションを作成する方法」をご紹介します。
今回はPhotoshopを使用してご紹介しますが、Figma・Illustratorなどのグラデーション機能が備わっているツールであれば実行できます。

制作方法

Photoshopを起動し、黒背景のカンバスを準備

Photoshopを起動し、黒背景（#000000）のカンバスを準備します。

楕円形ツールで正円を作成し、塗りにグラデーションを適応

楕円形ツールで正円を作成し、塗りに下記の方法でグラデーションを適応します。

1. 円の塗りの不透明度を0%に変更します。
2. グラデーションオーバーレイで「スタイル：角度」を使用します。
3. グラデーションには、最初の色は不透明度（100%）の青(#0000ff)、2番目の色は50%の位置で不透明度（100%）の緑(#00ff00)、最後の色は同じ緑色ですが、不透明度を0%にします。
4. 角度を-90度に変更します。

円を複製して下に移動（2つ目の円を作成）

円を複製して下に移動して、塗りを下記の方法でグラデーションの色を変更します。

1. 円を複製（Ctrl + j）して、下に円の半径分移動します。
2. グラデーションには、最初の色は同じ青(#0000ff)を使用し、2番目と3番目の色は緑(#00ff00)を赤(#ff0000)に変更します。
3. 角度を90度に変更します。

2つ目の円を複製して下に移動（3つ目の円を作成）

2つ目の円を複製して下に移動して、塗りを下記の方法でグラデーションの色を変更します。

1. 同じ手順を繰り返し、複製した3番目の円を下に円の半径分移動します。
2. グラデーションには、最初の色は不透明度（100%）の黄(#ffff00)、2番目の色は不透明度（100%）の黄(#ffff00)、3番目の色は不透明度（100%）の赤(#ff0000)に変更します。
3. 角度を90度のままにしておきます。

3つの円をスマートオブジェクトに変換してぼかす

1. 3つの円をスマートオブジェクトに変換します。
2. このレイヤーにスピンぼかし （フィルター>ぼかしギャラリー>スピンぼかし） を適用します。
3. ぼかしの値は好みで大丈夫です。（今回は15度）
4. ぼかしを適応したレイヤーの描写モードを「スクリーン」に変更します。

ノイズを加える

レイヤーにノイズを加える （フィルター>ノイズ>ノイズを加える） を適用します。
ノイズの値は好みで大丈夫です。（今回は4%）

完成（使用例）

こちらが完成したものを使用した例になります。
このように背景に使用するなど、色や大きさによって用途は様々だと思います。

まとめ

今回はPhotoshopを使用した「円とグラデーションを使用してスタイリッシュなグラデーションを作成する方法」をご紹介しました。
Photoshop以外のグラデーション機能が備わっているツールでも実行できるのでお好みのツールでチャレンジしてみてください。