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

文字に太めの境界線を枠と同色で飛び出す

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

フォローするだけでデザインを学べるTwitterアカウント
毎日デザインのポイントを解説するインスタアカウントを運営しております。

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

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

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

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

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

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

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

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

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

白枠と白い境界線で飛び出したデザイン

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

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

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

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

 

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

 

ちなみにブタのイラストは無料イラスト素材サイトのイラストACを使っています!

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

 

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

具体的には、、、

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

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

関連記事

こんにちは、読むだけでデザインを学べる!デザイン研究所です!デザイン特化メディアでは国内最大級のTwitterとインスタグラムを運営しています。 今日のテーマ:2分割のデザイン2つの要素を対比させた、○[…]

 

枠と同色の境界線を使って文字を飛び出させてみる

境界線を使って文字を飛び出させてみる

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

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

このように、、、

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

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

 

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

 

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

関連記事

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

 

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

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

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

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

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

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

 

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

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

Illustrator(イラレ)で境界線を加える方法

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

Photoshop(フォトショ)で境界線を加える方法

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

もっと枠と同色の境界線のポイントを使ったデザインが見たい方!

この記事で解説した枠と同色の境界線の中央揃えのデザインをもっと見たい方は、、、

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

枠と同色の境界線のデザイン事例

 

デザ研
クリックすると枠と同色の境界線を使ったデザイン”だけ”が表示されます!

 

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

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

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

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

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

 

ただし文字の上に背景と同じ色の境界線をつけることで重ねるこの下の手法はどんなデザインにも使えます!

文字を重ねることで周りの余白を生むことができます!情報量の多いデザインなどで使える手法になります。

 

こちらの記事では境界線を使ったポップなタイトルデザインについて解説しています!合わせてご覧ください。

関連記事

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

 

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

 

 

この投稿をInstagramで見る

 

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

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

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

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

CTR IMG