【Photoshop】グラデーションマップを使った幾何学模様背景の作り方

Webデザイナー、UI/UXデザイナーの@sdesignlaboです。

Photoshop（フォトショップ）のグラデーションマップを使って描く幾何学模様背景の作り方をフォトショ初心者の方に詳しく解説します。グラデーションマップ、ワープ、ゆがみ等を活用してグラデーションで構成された幾何学模様がゼロから作れるテクニックです。

スマホの壁紙やバナーの背景、Webサイトや広告のメインビジュアル等に活用可能！
フォトショ初心者の方でも5分程度で作成できる内容ですよ。

この記事の目次

何ができるの？

上図のようなグラデーションで構成された壁紙の様なグラフィックが作れます。
フォトショをより高度に使いこなしたい方向けのコンテンツです。

異なる時間の絵を作る方法

Photoshopのグラデーションマップを使った幾何学的な壁紙の作り方を解説します。
フォトショップ初心者の方でも再現可能な内容です！

Photoshopを導入しましょう

当記事の内容を実践するにはPhotoshop（フォトショップ）が必須です。
未導入の方はフォトプラン公式サイトから入手可能。（月額は最安の1,180円、7日間の無料体験が可能）
なお、AdobeCCのプランはコチラの記事で徹底解説しています。

グラデーションマップを設定

STEP.1

ブラシツールで描く

レイヤーパネル下部の [ 塗りつぶしまたは調整レイヤーを新規作成 ] → [ べた塗り ] を開き、画面を真っ黒に塗りつぶします。

新規レイヤーを作成し、[ ブラシツール ] で左図の様なフチがボケた円を描きます。
汎用ブラシ内の [ ソフト円ブラシ ] でクリックすると描けます。

STEP.2

グラデーションマップを追加・編集

レイヤーパネル下部の [ 塗りつぶしまたは調整レイヤーを新規作成 ] → [ グラデーションマップ ] を開きます。
レイヤーパネルが非表示の場合は [ F7 ] で表示可。

プロパティパネルが開くのでグラデーションの設定を行います。グラデーションエディターを開き、お好みのグラデーションを設定します。

サンプルは左から順に下記カラーを設定。
①#191d23　②#287f91
③#f5b081　④#e93d4e
⑤#1f1623

STEP.3

グラデーションマップの完成

以上でグラデーションマップによるグラデーションが完成しました。

白色のブラシで描いたレイヤー内にカラーのグラデーションが適用されるような表現ができます。

グラデーションカラーを変更した例です。色を少し変えるだけで全く印象の違うグラフィックが作れます。

モチーフを変形する

白色のソフト円ブラシで描いたレイヤーを変形し、幾何学模様を作成してみましょう。

STEP.1

スマートオブジェクトに変換

レイヤーパネルを開き、ソフト円ブラシで描いたレイヤーを右クリックメニューから [ スマートオブジェクトに変換 ] しましょう。

※スマートオブジェクトはコチラの記事で詳しく解説しています。

STEP.2

ワープ変形する

Photoshop画面上部の [ 編集 ] → [ 変形 ] → [ ワープ ] をクリックします。

スマートオブジェクトに変換したレイヤー周辺にワープのバウンディングボックスが表示されます。
アンカーポイントやハンドルを操作して形状を編集しましょう。

FINISH

完成

左図はワープを使って変形された例です。（分かりやすい様にグラデーションマップを非表示にして白黒にしています。）

グラデーションマップを表示オンにすると幾何学模様の背景が作れました。

ノイズテクスチャを作成し、レイヤーの描画モードを [ ソフトライト ] に変更。更に不透明度を下げて調整(サンプルは15%)すると質感のある表現が追加できます。

※ノイズテクスチャの詳しい作り方はコチラの記事で完全解説しています。

完成した壁紙をiPhoneのモックアップにはめ込んでみると更に雰囲気のある作品が作成可能ですよ。

※商用可能なiPhoneモックアップ素材はコチラの記事で解説しています。

OMAKE

ゆがみを使ってみる

他にも [ ゆがみ ] を使って変形させた例です。[ 前方ワープツール ] で適当にドラッグする事でぐにゃりと対象レイヤーを歪ませる事ができます。魂を可視化したような形状で面白い表現が可能ですよ。

ゆがみフィルターを使った全身整形

【Photoshop】肥満体を10分でスリム体形にする方法【パネマジの作り方】

ゆがみフィルターを使った人物の全身整形テクニックを解説しています。フォトショ初心者の方でも出来るレタッチテクですよ！

高品質なエフェクト素材

先に解説した時間帯を変えるレタッチを更に発展させた高度なエフェクトPSDです。
全て商用利用可能なので安心して活用できますよ。

#01 Fall Adjustments Photo Effect

先程解説した秋に変える方法を更に発展させたエフェクトモックアップです。
設定済みのPSDなので後は写真や画像を放り込むだけ。

ダウンロード

#02 Adjustment Photo Effect

夏感、リゾート感を一気に高めてくれるエフェクトモックアップです。
曇った景色も一瞬で晴れた日のリゾートカラーに！

ダウンロード

#03 Fluorescent Color Manipulation Effect

緑などの自然物を蛍光色にできるエフェクトPSDです。
まるで異世界のような雰囲気にできます。

ダウンロード

#04 Before and After Photo Effect

曇りや暗い写真を一瞬でアート感溢れる色味の調整できるエフェクトモックアップです。
ピンボケも補正してくれるのでレタッチ作業がはかどりますよ。

ダウンロード

#05 Cyberpunk Color Grading Photo Effect Mockup

写真を近未来のサイバーパンクのような世界観にできるエフェクトPSDです。
銃夢に登場するスラム街のような雰囲気ですね。

ダウンロード

#06 Dramatic Hdr Portrait Photo Effect Mockup

普通の写真をまるで映画のような質感にできるエフェクトPSDです。
非常に高級感のある質感表現が可能です。

ダウンロード

商用利用可能なエフェクトPSD

商用利用可能で高品質なエフェクトモックアップPSDです。
ノンデザイナーの方でもあっという間に写真を大変身させられますよ。

【Photoshop】写真を全く違うグラフィックに変える高品質なエフェクト50選【商用可】

【Photoshop】写真を超短時間で大変身させる高クオリティなエフェクト51選【商用可】

フォトエフェクトの作り方まとめ

フォトエフェクトの完全自作方法、そして超高品質なフォトエフェクトPSDについて解説しています。
Webサイトやバナーデザイン、各種DTPやUIデザイン等、様々なクリエイティブに使えるテクニックです。

1分で作れるエフェクトPSD素材

商用利用可能で超高品質なエフェクトが1分で作れるPSD素材の使い方と作例です。
気になるサムネイル画像をクリックすれば解説記事にジャンプします。

様々なエフェクトPSD

商用利用可能で高品質なフォトエフェクトPSDを厳選しました。クリエイティブを劇的に効率化できる素材を併せてチェックされてみませんか？

【Photoshop】写真を全く違うグラフィックに変える高品質なエフェクト50選【商用可】

【Photoshop】写真を超短時間で大変身させる高クオリティなエフェクト51選【商用可】

フォトエフェクトを自作

Photoshopを使いこなして様々な質感のフォトエフェクトを作る方法を解説しています。
気になるサムネイル画像をクリックすればメイキング記事にジャンプします。

おわりに

以上、Photoshop（フォトショップ）のグラデーションマップを使った幾何学模様背景の作り方でした。
白く塗った個所に適用されるグラデーション機能を使う事で複雑なグラデーションが表現可能です。

Webバナーの背景、サイトやチラシのメインビジュアル、ポートフォリオ制作等。
様々なクリエイティブに応用できるテクニックなので是非ご活用ください！

ではまた！