モノクロデザインのコツを解説!白黒にする超速ショートカットキーも!

最もシンプルに作るノウハウはモノクロデザイン

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

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

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

 

今日のテーマ:最もシンプルに作るノウハウとはデザイン

シンプルでも寂しくないデザインを作るにはどうすればいいか?その答えは無彩色を使うことです。無彩色とは白黒グレイのこと。

そんな無彩色のデザインの紹介と、白黒にする超速ショートカットキーについて解説しているのでぜひ最後までご覧ください!

 

ノンデザイナー 向けのまとめ記事を作りました。ぜひご覧ください!

関連記事

デザイナーではない、つまりノンデザイナーの方でも知るだけで今すぐ使えるデザインポイントというのは存在します。今回の記事ではそんな知れば今すぐ使えるデザインのポイントを紹介!ノンデザイナーの方もブログのアイキャッチ画像[…]

最もシンプルに作れるモノクロのデザインをおしゃれにするコツ

最もシンプルに作れるモノクロのデザイン

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

白と黒のみを使ったシンプルなデザインになっています。

最もシンプルに作れるモノクロのデザイン解説

最もシンプルに作るノウハウは無彩色で作るということです。無彩色とは白・黒・グレイのこと。これらを使うことでシンプルなデザインが作れます。

ただそれだけを意識すると単調なデザインになりがちですが、、、、

デザインサンプルにあるように文字色も白と黒の両方使ったり、図形も黒い塗りと黒い線の図形を使うことで単調すぎないデザインとなってます。

白文字と黒文字の両方使うデザインについてはこちらの記事で解説しています。

関連記事

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

 

また背景は白ではなくグレイに。真っ白にしない理由は白というのはwebサイトなどに貼り付けるときに背景と同化するためです。

そのために白から少しずらした白に近いグレイや枠線を加えたりします。

グレイについては過去投稿085「デザイナーが選ぶ最強の色とは?」で解説してます。

関連記事

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

 

またタイトルやその上の文章が曲線に沿った文字になっています。これは過去投稿061「ペンツールで作る曲線に沿わす文字」のポイント。

関連記事

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

 

そして文章の1文字目が大きくなっていますがこれは過去投稿048「文章の1文字目を大きくするデザイン」のポイントです!

関連記事

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

 

白黒デザインでも単調にならないために

無彩色で作るデザインを寂しいデザインにしないためにはこのような多くのポイントを使うことです!

そしてそんなポイントはこのデザ研メディアで多く紹介しています。

 

デザケン
今回のように1つのデザインの中に上手く組み込んでいきましょう!

 

モノクロを使った他のデザイン例


デザイン提供:フリーナンス

こちらのバナーデザインも小さなロゴ以外は白黒で作られています!

図形を使う事でシンプルながらメリハリのあるデザインになっていますね。

 

フォトショとイラレで白黒にするショートカットキー

フォトショとイラレで白黒にするショートカットキー

上のデザインサンプルでは基本を無彩色(白黒グレイ)で作ることで、PhotoshopとIllustratorのグラデがより映えてます!

最もシンプルに作るノウハウは無彩色のみで作ることですが、このように

無彩色を基本として色をアクセントで加えてあげるとGOOD

 

デザ研
有彩色を使う範囲は小さく抑えてあげるとシンプルで作りやすいです!

 

ここからはそんな無彩色の白と黒を適用するショートカットキーをお伝えします!

 

白と黒を適用するショートカットをイラレとフォトショで教えます!

白と黒がかなり使いやすいというのはこの記事からも理解できたかと思います。

ここからは白と黒を超速で適用するショートカットキーをお伝えしていきます!

イラレの白と黒の適用ショートカットキー

イラレの白と黒の適用ショートカットキー

ポイントはツールバーの下に位置する塗りと線の設定部分になります!

ここの操作は白と黒を適用するときにかなり使うのですが、ショートカットキーを使うことで劇的に変わります!

イラレの白と黒の適用ショートカットキーGIF

こちらの図形を黄色→白色にしたい場合、、、

  1. Dを押すことで初期設定の塗りが白、線が黒に
  2. 黒線がいらないのでXで切り替え
  3. /を押して線を無しに

このようにショートカットキーを使っています!

 

イラレの白と黒の適用ショートカットキーGIF2

今度は図形を黄色→黒色にしたい場合、、、

  1. Dを押して塗りを白、線が黒の初期設定に
  2. shift + Xで塗りと線を入れ替え
  3. /を押して線を無しに

このようなショートカットキーを使っています。

特に使う、このD、Xとshift + X、/の4つのショートカットキーを練習していてください!複数選択しても適用できます!

 

フォトショの白と黒の適用ショートカット

フォトショの白と黒の適用ショートカット

イラレと同じようにツールバーの下に位置する描画色と背景色の設定部分のショートカットキーになります。

イラレよりももっと単純です!

フォトショの白と黒の適用ショートカットGIF

文字を青→白or黒にしたいときは、、、

  1. Dを押して描画色と背景色を初期設定の白と黒に
  2. option(alt) + deleteで描画色での塗り潰し、cmd(ctrl) + deleteで背景色での塗り潰し

このように使うことができます!

Dの初期設定と、option(alt) or cmd(ctrl) + deleteを覚えておくだけでOK!

ただし、フォトショのこれは複数のレイヤーを選択した状態ではできません…

 

もちろんこれらは文字だけじゃなく図形にも使えます!

頻繁に使う白と黒の適用ショートカットキーを使いこなす

白と黒は頻繁に使うので、これで作業スピードは劇的に変わるはずです!

イラレでは塗りと線、フォトショでは描画色と背景色という違いに要注意!

最もシンプルに作るノウハウとはデザインまとめ

いかがでしたでしょうか?最もシンプルに作るための無彩色の紹介。そして頻繁に使う白と黒の適用ショートカットキーを伝えてきました。

色の基礎である白と黒をマスターすることは、そのままデザインをマスターすることに繋がりますので白黒に関してのノウハウはチェックしていきましょう!

 

こちらの記事は背景デザインまとめ記事にも含まれています!

関連記事

背景のデザインに迷わないためのまとめ記事を作りました。ずばりデザインの背景には基本的には3種類のパターンで構成されます!この3種類のパターンにてそれぞれ自分の引き出しを増やせば迷うことはかなり少なくなると思います。[…]

・最もシンプルに作るには無彩色を使う
・頻繁に使う白と黒の適用ショートカットキーを使いこなす

 

 

この投稿をInstagramで見る

 

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

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

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

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

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

CTR IMG