こんにちは、読むだけでデザインを学べる!デザイン研究所です!
フォローするだけでデザインを学べるTwitterアカウントと
毎日デザインのポイントを解説するインスタアカウントを運営しております。
こちらのブログはインスタ投稿をより深く解説した記事になります!
どんなデザインにも使える文字の可読性UPの方法を知りたくないですか?小さな違いなのですが、これを知っているか知らないかで完成度はグッと変わります。
写真に文字をのせる場合など文字が読みにくいデザインを多くみます。そんな初心者が知らない可読性をUPする方法を解説します!
こちらの記事は落ち着いたデザインまとめ記事にも含まれています!
こんにちは、読むだけでデザインを学べる!デザイン研究所です!デザイン特化のメディアでは国内最大級のTwitterとインスタグラムを運営しています。 今回の記事では落ち着いたデザインにするテクニックを[…]
初心者が知らない文字の可読性を上げる方法!
こちらが今回のデザインサンプルです。
光彩(外側)を使って文字を読みやすくしています!
背景によって文字が読みにくい場合ありますね?特に写真背景の場合よく見受けられます。その場合どうしてますか?
初心者がやりがちなのは境界線をかけたり、ドロップシャドウをかけたり。しかしそれらはとても初心者ぽくなり、ポップではないデザインでは通用しません。
世界観を壊さずあくまでも自然に文字の可読性UPさせるのが光彩(外側)のナチュラル使いです。
今回のサンプルデザインの文字にも使用してますが自然に溶け込んでますよね?これはイラレもフォトショも使えます!
イラレとフォトショで自然に文字の可読性を上げる光彩(外側)の使い方
ここからはイラレとフォトショそれぞれで光彩(外側)の操作方法を解説します!
イラレで効果的に使う光彩(外側)
やり方はイラレではアピアランスパネルの新規効果を追加>スタイライズ>光彩(外側)でできます。
描画モードは通常でOK、不透明度とぼかしを背景と馴染むようにナチュラルにかけてください!
フォトショで効果的に使う光彩(外側)
そしてフォトショではレイヤースタイルの光彩(外側)で可能です。レイヤースタイルはメニューのレイヤー>レイヤースタイル>光彩(外側)を選択。
白系の文字を目立たせたいなら光彩(外側)の黒を描画モード通常で。不透明度とサイズの設定を変えてナチュラルにかけてください。(スプレッドは0%でOK)
イラレもフォトショもこの方法ですとひと目見ただけでは加工してるとわかりません!
あくまでも自然に溶け込みつつ可読性をかなり上げてくれます。
光彩という単語から光を出すような加工を想像してるためか、光彩の黒を使って可読性を上げるテクニックを知らない人かなり多いです!
今回のような光彩やフィルター加工、調節レイヤーなど初心者はやりましたっ!感が強いので
これら加工は自然に溶け込むような形がベストです!
フィルター加工を自然にする方法はこちらの記事で解説しています。
こんにちは、読むだけでデザインを学べる!デザイン研究所です!フォローするだけでデザインを学べるTwitterアカウントと毎日デザインのポイントを解説するインスタアカウントを運営しております。こちらのブログはインス[…]
ちなみに光彩で黒が使えるならドロップシャドウとの違いはなんだ?となりますが、
光彩は全体的に、ドロップシャドウは角度がかかり局部的に適用されます。文字の可読性を上げるなら全体に適用する光彩を使うのが良いです!
このテクニックはかなり頻繁に使えます!
光彩(外側)はナチュラルに可読性をUPしてくれるデザインポイント!
光彩(外側)を使った他のデザイン例
こちらのデザインもよく見ると、「学べ。今の自分を変えるなら。」という文字に光彩(外側)の黒がかかっています!
おそらくそのまま白字でも読めますが、より可読性をUPさせるために効果を適用しているのだと思われます。
文字の可読性を上げる際の注意点を解説します
上のデザインサンプルでは光彩(外側)をなし・かけすぎ・自然にかけるという3つの比較となっております!
ちなみにタイトルの白文字にもかかっています。
↑こちらが光彩(外側)をかけているタイトル
↑こちらは光彩(外側)をかけていないタイトル
このように見ると違いますよね?
このように光彩(外側)かけるかけないの多少の調節で違いが生まれます!
ここからは注意点を踏まえて解説していきます!
まずこちらの文字は光彩(外側)をかけていません。何もなしだと読みづらい場合がかなりあります!
そしてこれかなりよく見るパターンですが、、、光彩(外側)あるいはドロップシャドウをかけすぎているパターンです。
いかにもかけました感がダサいですよね…
そしてこちらがナチュラルに光彩(外側)をかけたパターンです。一見光彩(外側)がかかっているか分からないくらいがベストです!
このように意識することでナチュラルに可読性を上げるテクニックを使いこなすことができます。
まずは光彩(外側)をかけることを覚える、次にかけすぎないように注意する!!
かけすぎの場合は、大抵は不透明度が濃すぎる、あるいはぼかしまたはサイズの値が小さすぎる場合が多いです。
イラレもフォトショもTになります。テキストのT!
もっと可読性上げる光彩のポイントを使ったデザインが見たい方!
この記事で解説した可読性上げる光彩のデザインをもっと見たい方は、、、
デザイン研究所が運営する学べるギャラリーサイト「managary」へどうぞ!
初心者が知らない!文字の可読性を上げるやり方まとめ
いかがでしたでしょうか?この光彩(外側)のテクニックはかなり頻繁に使うことができます。
また媒体を選ばすに、バナーやチラシ、WEBデザインなどなんでも使えるノウハウです。
小さな差ですが、積み重なって大きな差となります!
このような部分も意識できると良いですね。
可読性をUPさせるデザインポイントはこちらの記事でも紹介しています。ぜひ合わせてご覧ください!
こんにちは、読むだけでデザインを学べる!デザイン研究所です!デザイン特化メディアでは国内最大級のTwitterとインスタグラムを運営しています。今日のテーマ:文字ギリギリの枠で視覚性を高める枠があることで複雑な背景や[…]
・かけすぎている人を多く見る。かけすぎずにあくまでも自然に!
この投稿をInstagramで見る
全国対応で短期で習得するグラフィックのデザインレッスンをやっております、詳しくはこちらをどうぞ。