【最大99%オフ】商用利用可能なデジタルデザイン素材集が期間限定販売中!→

重ねるだけでカンタン!パターン+テクスチャ+カラーの3レイヤーでつくるおしゃれなイラスト背景

(Disclosure:記事内のリンクの一部はアフィリエイトリンクです。詳しくはプライバシーポリシーをお読みください。)

  • 背景素材やパターン素材を試してみたけど、イラストとなんだかうまく合わなくて結局使わなかった
  • 以前購入したデザイン素材がそのまま眠ってしまっている
  • 気になるパターン素材があるけど、イラストと一緒に使うイメージがわかない

という経験はありませんか?

本記事ではパターン+テクスチャ+カラーの3レイヤーを重ねて、おしゃれなイラスト背景を作る方法をご紹介します。

BEFORE(パターンのみ)
AFTER(パターン+テクスチャ+カラー)

レイヤーを重ねてつくるので、パターンの位置や大きさを後から微調整しやすいのが嬉しいポイント。カラーやテクスチャの変更で、ガラリとイメージをかえることができます。

パスやブラシは使わないので、画像の合成なんて難しそう…と感じている方でも、気軽に挑戦できますよ。

もちろんお手持ちのデザイン素材で簡単に応用可能です。

では、早速みていきましょう。

もくじ(クリックした項目に移動します)

重ねるだけでカンタン!3レイヤーでつくるおしゃれなイラスト背景

イラストとパターンの組み合わせに違和感
パターンだけの状態。イラストとパターンの組み合わせに違和感が。

柄やテクスチャだけ見ると素敵なのに、実際にイラストと重ねると違和感を感じたことってありませんか?

上の画像の場合は、色の明るさや鮮やかさの違いが大きな原因です。

  • イラストは明るくて、鮮やか(軽い)
  • 背景(パターン)は暗くて、くすんでいる

なので、イラストまたは背景の色をどちらかに寄せるとなじむはずです。

今回は背景の色をより明るく鮮やかにして、イラストとの違和感を消していきます。

チュートリアル内で利用したデザイン素材とアプリケーション

▼デザイン素材はこちらを利用しました。

Boho Geometric Textured Patterns
パターン:Boho Geometric Textured PatternsのTealandRed.jpg
Outer Space Digital Paper
テクスチャ:Outer Space Digital Paperの1.jpg

イラストはコスプレ男女(赤)を拝借しました(作者様ありがとうございます!)。

▼レイヤーを利用できる基本的なグラフィックアプリケーションなら、この記事で紹介している背景が作れます(このチュートリアルではAffinity Publisherを利用しています)。

  • Photoshop
  • Affinity Suite
  • CLIP STUDIO PAINT など

3レイヤーで簡単!イラスト背景のつくりかた

上にのせるレイヤーの描画モード(クリスタでは合成モード)を「スクリーン」「ピンライト」などに設定して、レイヤーが重なるたびに背景が明るく、鮮やかになるようにするのがポイントです。

  • 上レイヤー:カラー(画面と同サイズの図形)を配置、描画モードを設定
  • 中レイヤー:テクスチャを配置、描画モードを設定
  • 下レイヤー:パターンを配置

▼描画モードについて知りたいかたは、こちらの動画が参考になりますよ。

①パターンをいちばん下に配置

まずはパターンの設定を「描画モード:標準、不透明度:75%」に。これだけでもイラストとのミスマッチ感は少し減ります。

①パターンをいちばん下に配置

②パターンレイヤーの上にテクスチャレイヤーを重ねる

テクスチャをパターンの上に「描画モード:ピンライト、不透明度:100%」で重ねました。描画モードは画面全体が明るく、鮮やかになるものならお好みでOK!

同じテクスチャでも、描画モードが違うと雰囲気がガラリと変わります。ぜひ色々試してみてください。

②パターンレイヤーの上にテクスチャレイヤーを重ねる
②パターンレイヤーの上にテクスチャレイヤーを重ねる
テクスチャのみだとこんな感じ
②パターンレイヤーの上にテクスチャレイヤーを重ねる
②パターンレイヤーの上にテクスチャレイヤーを重ねる

③テクスチャレイヤーの上にカラーレイヤーを重ねる

パターン、テクスチャレイヤーの上にカラーレイヤー(画面と同サイズの四角形)を「描画モード:スクリーン、不透明度:100%」で重ねます。カラーは人物の服の色と合わせてボルドーの#6D203Aにしました。

描画モードは画面全体が明るく、鮮やかになるものならお好みでOK!

③テクスチャレイヤーの上にカラーレイヤーを重ねる
③テクスチャレイヤーの上にカラーレイヤーを重ねる
③テクスチャレイヤーの上にカラーレイヤーを重ねる

④微調整して完成!

あとは各レイヤーを好みで微調整すれば背景は完成です。イラストやパターンに合わせて描画モード、不透明度やカラーを調整してみてください。

④微調整して完成!

カラーレイヤーの色を調整し、境界線をボルドー(#6D203A)に、塗りつぶしをマスタードっぽい色(#F79921)にしてフレームのようにしました。

レイヤーをもっと重ねてもいい?
レイヤーをもっと重ねてもいい?
上が2レイヤー、下が3レイヤー。下の方が模様が薄くなっています

レイヤーを重ねれば重ねるほど、下にあるレイヤー(パターンやテクスチャ)のディテールが失われていきます。イラストとのバランスを見ながら調整してみてください。

3レイヤーで背景のバリエーションもラクラク作成

ベースはこのイメージです
ベースはこのイメージです

パターン、テクスチャ、カラーのいずれかを変更するだけで、画面の印象がガラリと変わります。

カラーレイヤーのみ変更

カラーレイヤーのみ変更
カラーレイヤーのカラーを#2B28FFに
カラーレイヤーのみ変更
カラーレイヤーのカラーを#D23F71に

テクスチャレイヤーのみ変更

テクスチャレイヤーのみ変更
テクスチャをOuter Space Digital Paperの2.jpgに変更
テクスチャレイヤーのみ変更
テクスチャを60 Sunlight Bokehs OverlaysのLight-Bokeh-3.JPGに変更

パターンレイヤーのみ変更

パターンレイヤーのみ変更
パターンをVintage Japanese FlowersのWateryFloral_Vignette1R.jpgに変更し、レイヤーの不透明度を50%に
パターンレイヤーのみ変更
パターンを36 Painted Desert & Cactus GraphicsのSpikes Pink Blue New Cream.jpgに変更

2つ以上の変更でバリエがさらに広がる

2つ以上の変更でバリエがさらに広がる
パターンをVintage Japanese FlowersのWateryFloral_Vignette1R.jpgに変更&レイヤーの不透明度を50%にし、カラーを#D23F71に
2つ以上の変更でバリエがさらに広がる
テクスチャを60 Sunlight Bokehs OverlaysのLight-Bokeh-3.JPGに変更し、テクスチャレイヤーをイラストの上に移動
重ねるだけでカンタン!パターン+テクスチャ+カラーの3レイヤーでつくるおしゃれなイラスト背景
ピンタレストで保存しよう

この記事が気に入ったら
いいね または フォローしてね!

よかったらシェアしてね!

【無料体験版あり】面倒くさがりでも続けられる!CleanMyMacでパソコン内部を簡単メンテナンス

CleanMyMac X

パソコン内部にたまっている不要なファイルの削除をはじめとした定期メンテナンスは、やらないといけないのはわかっているけど、実際にやるとなると面倒ですよね。

CleanMyMac Xなら不要なファイルやアプリの削除、セキュリティ保護、パフォーマンスの高速化がわずか数クリックでかないます。Windows版のCleanMyPCもあります。

わたしも1年以上CleanMyMacを利用しています。メンテナンスが必要なタイミングになったらアプリから通知がくるので、面倒くさがりのわたしでも忘れずに不要ファイルをクリーニングできます。

もくじ(クリックした項目に移動します)
閉じる