デザイン全体をポップに仕上げる!簡単操作でできる塗りと線のビジュアル!

塗り+細い線で全体を統一する

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

デザイン特化のメディアでは国内最大級のTwitterインスタグラムを運営しています。

今日のテーマ:塗り+細い線

塗り+線を文字や図形、イラストに使うデザインの紹介です!ポップなデザインを統一感をもって制作することができます!

やり方は説明不要なほど簡単ですが、注意点などもありますのでぜひブログ記事を最後までご覧ください。

 

 この記事で得られること
 塗り+線のデザインを知れる!

 塗り+線を使う際の注意点が分かる!

 

ボタンデザインのまとめ記事を作りました。こちらの記事も含まれています。ぜひご覧ください!

関連記事

こんにちは、読むだけでデザインを学べる!デザイン研究所です!デザイン特化のメディアでは国内最大級のTwitterとインスタグラムを運営しています。 WEBデザインやバナーでよく使うボタンのデザイン。[…]

ポップなデザインは細い線と塗りの両方で作れる!

ポップなデザインは細い線と塗りの両方で作れる!

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

タイトルと図形が塗り+細い線となっています。

タイトルは黄色の塗りに青い線、図形は白い塗りに青い線です!

文字に細い境界線、図形は白い塗りに細い線

このように文字や図形を塗り+線のデザインで全体をまとめることにより統一感が増します。

そして塗り+線のデザインを採用することでとてもポップに仕上げることができます!

塗り+線のデザインは最近のWEBサイトでもよく見られるデザインです。

 

もちろん塗りだけ、線だけのデザインも良いです。むしろそちらの方がシンプルかつ簡単にまとまったりします!

ですのでこのデザインを使うときはポップなデザインを作りたいときですね。

過去記事では線だけのボタンを解説しています。

関連記事

こんにちは、読むだけでデザインを学べる!デザイン研究所です!フォローするだけでデザインを学べるTwitterアカウントと毎日デザインのポイントを解説するインスタアカウントを運営しております。こちらのブログはインス[…]

 

塗り+線のデザイン注意点

塗り+線のデザインの特徴は細い線であるということです!

これ太い線になると途端に難易度が上がります!

塗り+線のデザインの特徴は細い線

また太い線であると文字が読み辛くなるのです。(枠の中の余白が少なくなるため)

そういった理由からおすすめは塗り+細い線です!

 

塗り+細い線で全体を統一しよう!

ポップで今っぽいデザインが完成します。

 

簡単操作でできるポップなデザインを作ってみよう!

塗りと線の両方加える

こちらのデザインでも塗り+線のデザインを多用しています。

このようにイラストや図形、文字に対して塗り+線は使うことができます!

それらによって統一感もUPされているかと思います。

統一感UPのコツは色フォント装飾

統一感UPを図るために色とフォントを同じにして繰り返すことはイメージしやすいですが装飾を繰り返すことも要素の1つとなります!

今回の場合でいえば、塗り+線という装飾を繰り返し使うことによって統一感が上がっていると言えますね。

 

操作方法は簡単で、、、

図形の線を追加するにはイラレでもフォトショでもオプションバーにある右側部分に色を追加、太さを設定してあげるだけです!

 

文字の境界線のやり方が分からない方はこちらの記事をご覧ください!

関連記事

こんにちは、読むだけでデザインを学べる!デザイン研究所です!フォローするだけでデザインを学べるTwitterアカウントと毎日デザインのポイントを解説するインスタアカウントを運営しております。こちらのブログはインス[…]

 

前章ではありませんでしたが、イラストも塗りと線ありや塗りだけのパターンなどあります。

それらはこのようにイラストと図形や文字のスタイルを合わせてあげると統一感もUPします!

ちなみに今回のイラストはイラストACを使いました。

無料イラストなら【イラストAC】

塗りと線に関しておすすめの使い方

初心者の状態で今回のデザインポイントである塗り+細い線はどうしても初心者ぽくなってしまう場合があります。

ですのでまずは塗りだけか線だけのどちらかを使うと覚えると良いでしょう。

これは文字の境界線も同じで、文字の境界線も初心者ぽくなる一因です。

ポップなデザインを作りたい時、あるいはステップアップとして今回の塗り+細い線にチャレンジしてみてください!

 

塗り+細い線のデザインは線のあるイラストを加えてみよう!

この塗り+細い線は90年代のデザインを表現したいときなども使えます!

 

もっと塗り+細い線のポイントを使ったデザインが見たい方!

この記事で解説した塗り+細い線のデザインをもっと見たい方は、、、

デザイン研究所が運営する学べるギャラリーサイト「managary」へどうぞ!

もっと塗り+細い線のポイントを使ったデザインが見たい方!

 

デザ研
クリックすると塗り+細い線を使ったデザイン”だけ”が表示されます!

デザイン全体をポップに仕上げる!簡単操作でできる塗りと線のビジュアル!まとめ

いかがでしたでしょうか?塗りプラス細い線で作るデザインを紹介していきました!

この選択肢があるとグッとポップなデザインを作りやすくなるはずです。文字にも図形にもイラストにも使える今回のデザインポイントをぜひ押さえといてください!

 

こちらの記事は線のまとめ記事にも含まれています!合わせてご覧ください。

関連記事

シンプルなデザインを作るときに線を使うという選択肢は絶対に覚えておきたいポイントです。今回の記事ではそんな線に関してのデザインポイントを18種類紹介!塗りのない線を使うこと、そしてその使い方を知ることでデザインの幅は[…]

 

ちなみにこちらの記事はポップなデザインを作る33のテクニックを解説したまとめ記事にも含まれています。

関連記事

こんにちは、読むだけでデザインを学べる!デザイン研究所です!デザイン特化のメディアでは国内最大級のTwitterとインスタグラムを運営しています。 ターゲットに合わせる、作りたいイメージを考える、そ[…]

・塗り+線でデザインを統一してみよう
・線のあるイラストを加えてみよう

 

 

この投稿をInstagramで見る

 

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

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

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

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

CTR IMG