簡単!イラストを使ったデザインの配色!覚えるべきは2パターンのみ。

こんにちは、読むだけでデザインを学べる!デザイン研究所です!

毎日デザインのポイントを解説するインスタアカウントを運営しております。

こちらのブログはインスタ投稿をより深く解説した記事になります!

今日のテーマ:イラストを使った配色

イラストを使ったデザインの配色は割と簡単です。なぜなら写真と比べて色数が少ないためです。そんなイラストを使った配色にもコツがあります!

2パターンのコツをサンプルデザインを使って詳しく解説しているのでぜひ記事を最後までご覧ください!

最も簡単な配色は、イラストの色をデザインで使うこと。

こちらが今回のデザインサンプルです。

イラストに使われている色で配色しています。

迷うことの多い配色をイラストを使って短時間でまとめるデザインポイントです。

それがイラストに使われている色をそのまま使用すること。

写真などは色数がかなり多意ですが、イラストの場合、単純な塗りで構成されている場合が多いかと思います!

そこでイラストの色をそのまま文字色や背景色に使うことで迷うことなくまとまり完成に近づきます!

 

今回のサンプルデザインでは、男性のイラストの服の色(淡い緑と紺色)と、右上に配置されている日光(黄色)を使っています!

タイトル文字にイラストと同じ淡い緑と紺色を、書籍風の帯デザインにも淡い緑。

 

▲上着の緑を文字色と下の背景色に

 

▲ズボンの青と文字色の青

 

▲帯の中の強調したい文字に日光の黄色を!

 

イラストを使ったデザインはシンプルがゆえに難しくもあるのですが、今回のように配色は時短ですまして、レイアウトなどの時間に充てることでシンプルでも見応えのあるデザインになります。

 

ちなみにレイアウトは過去投稿015「縦と横文字混ぜてインパクトをだす」だったり過去投稿053「魅せる吹き出しは余白で作り出す」などのポイントを使っています!

 

イラストは写真と比べて色数が少ないから便利!

イラストに使われている色を使って配色しよう!

すると統一感も自然とでてくるはずです。

 

イラレ・フォトショの簡単操作でイラストの配色を変更する!

前章ではイラストに合わせた配色でした。

今回は配色に合わせてイラストの色を変えるがテーマです!

特にWEBデザインなどでは色がそもそも決まっている場合が多いと思います。

そんな時に使えるポイント!

 

▲こちらがサイトカラーに合わせたイラスト

 

▲こちらは元画像になります。

このようにエメラルドグリーンのような元画像の色が青になっています。

 

イラレ・フォトショでイラストの配色を変える方法

イラストはベクターデータでDLできる場合、イラストレーターでパーツごとに色を変えることが可能です!

ベクターデータをイラレで開くとパーツごとにレイヤー分けされいるはずですので図形と同じように色を変更できます。

 

またベクターではなく画像でもフォトショップで色の変更ができます。

フォトショップでのイラスト画像の色の変更は色相・彩度が便利です!

そのまま彩度を変更するでも良いのですが、全ての色が変わるのでなかなか思ったようにいきません。

しかし、色相・彩度のパネルにある手のマークをクリックすると特定の色のみ変更することができます!

手のマークをクリック>変更したい色をクリック>commandを押しながらクリックし左右にスライド

すると特定のカラーの色相を変更することができます!

 

ちなみにこちらのイラストは無料のイラスト素材サイトであるイラストACからDLしています。

イラストACではベクターデータもDLできるのでおすすめです!

ベクターデータのイラストなら【イラストAC】

 

配色に合わせたイラストのカラーを変更しよう!

ベクターデータであればイラレで、イラスト画像であればフォトショで。

 

簡単!イラストを使ったデザインの配色!覚えるべきは2パターンのみ。まとめ

いかがでしたでしょうか?写真と比べて色数の少ないイラストは配色は割としやすいです。

そんなイラストの配色について

  1. イラストに合わせて文字色や図形の色を変える
  2. 文字色や図形の色に合わせてイラストの色を変える

2つのパターンを解説しました。どちらも時短でできるものですのでイラストをデザインで使う場合参考にしてみてください!

 

こちらの記事ではイラストをはみ出すデザインについて解説していますので合わせて使ってみてください。

関連記事

こんにちは、読むだけでデザインを学べる!デザイン研究所です!毎日デザインのポイントを解説するインスタアカウントを運営しております。こちらのブログはインスタ投稿をより深く解説した記事になります! […]

・イラストに使われている色を使って配色しよう
・配色に合わせてイラストのカラーを変更しよう

 

 

この投稿をInstagramで見る

 

デザイン研究所(デザ研)ほぼ毎日投稿(@designkenkyujo)がシェアした投稿


全国対応で短期で習得するグラフィックのデザインレッスンをやっております、詳しくはこちらをどうぞ。

>インスタでデザインを学ぶ

インスタでデザインを学ぶ

デザインの見る目を養うインスタアカウントを運営中!初心者から脱するデザインのポイントを解説しています。だいたい毎日更新です!

CTR IMG