こんにちは、読むだけでデザインを学べる！デザイン研究所です！
フォローするだけでデザインを学べるTwitterアカウントと
毎日デザインのポイントを解説するインスタアカウントを運営しております。
こちらのブログはインスタ投稿をより深く解説した記事になります！
アイコンを使うデザインは多いかと思います。そんな時にただアイコンを配置していませんか？アイコンデザインの完成度をグッと上げるずらした塗り手法を紹介しています。
これは近年特にWEBデザインでよく見る手法になります！簡単な基本操作で完成度がグッと上がるのでぜひ参考にしてみてください！
ちなみにこちらの記事はポップなデザインを作る33のテクニックを解説したまとめ記事にも含まれています。
こんにちは、読むだけでデザインを学べる！デザイン研究所です！デザイン特化のメディアでは国内最大級のTwitterとインスタグラムを運営しています。 ターゲットに合わせる、作りたいイメージを考える、そ[…]
WEBデザインのアイコンにトレンドを取り込もう
こちらが今回のデザインサンプルです。
アイコンに対してずらした図形を重ねています
これ初心者はきっと知らないであろう塗り手法です。
線のアイコンや線のイラスト、または線のボタンデザインなどの線に対してわざとずらした塗りを配置する手法です。
このずらした塗りで反復の要素にもなりデザインにリズムも生まれます！今回のデザインサンプルでは線でできたアイコンに正円の塗りをずらして配置しました。
このように簡単に作れてかつお洒落になっちゃいます！ちなみにアイコンの使い方は過去投稿113「文字情報プラスピクトグラム活用」をご覧ください。
こんにちは、読むだけでデザインを学べる！デザイン研究所です！フォローするだけでデザインを学べるTwitterアカウントと毎日デザインのポイントを解説するインスタアカウントを運営しております。こちらのブログはインス[…]
デザインサンプルでは正円でしたが、線の形そのままの塗りをずらすこともあります。webデザインでは線だけのボタンの下にずれた同じ形の塗りがあるなど。(次章で解説)
また最近のイラストレーターさんの絵でもずらした塗りを見ることがあります！
ちなみに今回のデザインではズレた塗りだけでなく、強調したい文の下にマーカーを引いてこれも反復の要素となっています。
他にもフォントが同じ、大きさが同じ、余白が同じなど、このように意識するだけでデザインに統一感とリズムを持たせる反復の要素ってかなりあります。
視覚的に認識できるものならなんでも反復できるのです。その反復を理解した上でデザインできると読み手も安心して読むことができます！
ちなみに今回のデザインサンプルでは上部の白い図形に対して大きくシャドウがかかっているかと思います。これもまた最近のトレンドですね。
過去投稿100「服やスイーツと同様、デザインにトレンド」でトレンドデザインについて投稿してるのでそちらも合わせてご覧ください！
こんにちは、読むだけでデザインを学べる！デザイン研究所です！フォローするだけでデザインを学べるTwitterアカウントと毎日デザインのポイントを解説するインスタアカウントを運営しております。こちらのブログはインス[…]
ずらした塗りで反復の要素を作ってみよう！
反復(繰り返し)はとても大切なデザインの基本理論です。
ちなみに今回の反復のようなデザインにおける基本の理論を学びたい方は、、、
デザイナーズブックが必読ですのでぜひ買ってみてください！自分はこれでめっちゃ変わりました。
またはこちらの本でも分かりやすく解説してあります。どちらも本当におすすめです！
簡単操作でできる！トレンドを取り入れたアイコンデザイン
前章では同じ色のずれた正円だったと思うのですが、他にずらした塗りのパターンを3種類作ってみました！
それぞれを解説していきます。
まず前章では同じ色でしたたが、図形は同じだけれど違う色で繰り返すことが考えられます！
色を変えることでアイコンも際立っていきます。ポイントはアイコンの色はモノクロのままということです。
そうすることにより色としてのメリハリはありながら統一感をたもっています！
こちらはよくみると、一番上から、三角形、四角形、ハート型と3種類の図形を使っています。
このように違う図形であったり、アイコンに合わせたずらしの塗りを加えることも1パターンとして使えますね！
アイコンに合わせたずらしの塗りをそれぞれ作るので少し難易度は上がります！
最後に曲線違いのずらした塗りを作りました。こちらは正円ではなく緩い楕円形となっております！
正円を使うよりもさらに緩く優しい印象を持たせられますね。
ちなみにこちらは曲線ペンツールで作った楕円形になります。(曲線ペンツールの使い方はこちらの記事で)
こんにちは、読むだけでデザインを学べる！デザイン研究所です！フォローするだけでデザインを学べるTwitterアカウントと毎日デザインのポイントを解説するインスタアカウントを運営しております。こちらのブログはインス[…]
アイコンを使ったデザインにずらした塗りを加えてみよう
ただアイコンを配置するよりも、もう一歩進んだデザインを作ることができます。
イラレは楕円形がL、長方形がM、フォトショは楕円形も長方形もUになります。
もっとずらした塗りのポイントを使ったデザインが見たい方！
この記事で解説したずらした塗りのデザインをもっと見たい方は、、、
デザイン研究所が運営する学べるギャラリーサイト「managary」へどうぞ！
WEBデザインのアイコンにトレンドを！記事まとめ
いかがでしたでしょうか？WEBデザインでアイコンはよく使われるかと思います。またチラシなどでも使うことがありますね。
そんな時にもう一歩デザインの完成度を上げるアイコンの新しい塗り手法の紹介でした！
このような細かい装飾で最終的な完成度は変わりますのでぜひチャレンジしてみてください。
しかもこのような細かい装飾って操作が簡単な場合も多いんですよね。ほとんどが基本操作で作れる。問題は基本操作をどう使っていけるかです。
初心者ほど実戦で全然使わないような難しい操作を知りたがりますが、クオリティの高いデザインも基本操作やその応用でできていたりします。
今回のような基本操作でできる細かい装飾を覚えられると良いですね！
こちらの記事では副標やフリーランスデザイナーになるための一歩を解説しているのでよかったらご覧ください！
今回の記事は特別編。デザイナーの初報酬の獲得について書いていきます！この記事ではデザインを学んでいる人が副業として仕事を獲得する初めの一歩を解説！デザイン研究所のインスタの方でよくこのような悩みを聞くのです,,,！[…]
・アイコンデザインにずらした塗りを加えてみよう
この投稿をInstagramで見る
全国対応で短期で習得するグラフィックのデザインレッスンをやっております、詳しくはこちらをどうぞ。