境界線の効果的な使い方!枠と同色の境界線をかけて文字を飛び出させる!

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

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

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

 

今日のテーマ:文字に太めの境界線、枠と同色で飛び出す

基本操作である境界線ですが、境界線を効果的に使ってデザインを作ることもできます。

今回の記事では2つのデザインサンプルを通して、境界線を使った文字を飛び出すデザインについて解説していきます。

文字に太めの境界線で枠と同色で飛び出すデザインサンプル

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

4つのWEBサービスという文字の境界線と白い背景が同化しています。

文字に境界線を加えることは多いですが、今回はもう一歩進んだ境界線のポイントです!

白い背景を枠と記載していますが、そんな枠(背景)と同じ色の境界線を加えることで

文字が飛び出したようなデザインにすることができます。

こうすることで視覚性もUPし、なおかつ目立たせることもできる。

なので見出しなどで使われることも多いデザインです!

 

デザケン
枠内の文字で一部(数字とか)だけ大きくしてそれに枠と同じ色の境界線つけて飛び出すデザインもありますね!

 

ちなみにサンプルデザインのタイトルの”で”という平仮名が小さくなっていますが、それらに関してはこちらの記事をどうぞ!

関連記事

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

 

デザインポイントとは関係ないですが、今回のサンプルでは4つのWEBサービスから下の文章の要素が反復しています。

具体的には、、、

  • 重要な部分がピンクになっている
  • 文章の間にアイコンマークがある

になります!反復に関してはこちらの記事が参考になるかと思いますので合わせてどうぞ。

関連記事

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

 

1部分の文字だけ境界線を使って飛び出させてみる

上のデザインサンプルでは縦文字のタイトルを背景と同じ青の境界線をつけて飛び出したデザインになってます!

また下の枠では部分的にグレイの境界線で飛び出してます!

このように、、、

1部分の文字だけ飛び出すことも可能です!

飛び出した文字で強調することができます!

 

デザ研
ポップなデザインにもってこい!

 

ちなみに写真の鳥を切り抜いて使っていますが、こちらの記事でも切り抜いたデザインポイントを解説しています。

関連記事

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

 

飛び出す文字で気をつけるべきポイント

これはあとから気づいたのですが、、、、

分かりますかね?最初のサンプルデザインの”ビ”と”ス”の間に背景(黄色)が見えちゃってます。。。

境界線で飛び出す場合、このような小さく間ができてしまうことがあります。

小さな間ができてしまったら上から図形で隠してしまいましょう!

今回のミスでは白い図形で隠せば良かったですね。。。気をつけます。。。

 

文字の境界線をかける注意点は内側から外側に

境界線をつける上で気をつけるべき点は境界線を文字の外側に設定することです!イラレとフォトショそれぞれで解説します。

イラレの場合

イラレではアピアランスを使って線を追加すると分かりやすいです。
文字に対して直接線を追加するのはおすすめしません、アピアランスで追加すると良いです!
これだと内側になってしまいます。
アピアランスパネルの文字の下に線を移動することで外側になります!

フォトショの場合

フォトショではレイヤースタイルを使って境界線を追加。
位置を外側にすることで、外側になります!

文字に太めの境界線で枠と同色で飛び出すデザインまとめ

いかがでしたでしょうか?

2つのサンプルを通して、境界線を使った飛び出すデザインを解説しました。

ポップなデザインに使える境界線。逆にいえばポップでないデザインには境界線はあまり使わない方がいいです!

初心者はなぜか境界線を使いがち!!

 

境界線を使ったデザインをサンプルとした記事もあるので合わせてご覧ください!

関連記事

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

 

・背景と同じ色の境界線を使って文字を飛び出したようなデザインを作る
・1部分だけ文字を飛び出して強調させることも可能!

 

 

この投稿をInstagramで見る

 

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

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

>フォローしてデザインを学ぶ

フォローしてデザインを学ぶ

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

CTR IMG