【覚えておいて損は無い!】Webデザイナーとして文字のアンチエイアリス調整を身につけておこう!




中の人
こんにちは。
coffeebreakの中の人です。

またまたここの記事にやってきましたね。
ということは、photoshop(フォトショップ)をもっと勉強したい!と思い次は「文字をしっかり見せる」にはどうしたらいいか悩んでいるのではないでしょうか?

テキストのサイズ変更以外で表現する場合フォントの太さを変更したり、斜体やアンダーラインを付けたりします。

それでも、

「なんかパッとしないな」とか

「ちょっとフォントがぼやけてるな」とか、

フォント自体にくっきりとした強さを感じないのではないでしょうか?

それを解決する方法がアンチエアリスです。
こいつを効かせると、文字がシャキッとクッキリと見えてくるのです。

中の人
アンチエイアリスはWebデザインを勉強している人におすすめです。
見落としがちなデザインノウハウだから早めに身につけてね。
ご注意
独学出身という事もあり私のデザインノウハウはセオリーと違う場合が多々あります。
そんな時は、やっぱり変な人だなと思いながら記事を読んでいただければ幸いです。

アンチエイアリスを身につけておくべき理由

文字がシャキッとクッキリとするのはお伝えしました。
文字調整の知識はWebデザイナーなら絶対身につけておいた方がいいスキルです!
太い赤文字で強調する位、現場で頻繁に使っています。

【関連記事】
【Webデザイン上達のコツ5選】普段の生活の中で、デザイン力を身につける方法!

極端に言いいますが、裏を返すと身につけていないと「本当に何も知らないのね」と先輩デザイナーや同僚に印象付けされてしまいます。

中の人
キツい言葉で書いたけど勉強したらすぐ身に付くスキルだから!大丈夫だよ!

それぞれのアンチエイアリスについて


フォトショップのオプションバーから調整ができます。
さっそく文字がどのように変化するのか見ていきましょう。

ご注意
ここからは、それぞれのアンチエイアリスを効かせて比較していきますが、微妙な変化の文字もあるので目をこらして見ていただくか、スマホで拡大して違いを確認する事をおすすめします。

滑らかに

通常の状態はこの「滑らかに」です。

拡大してみると、文字が滑らかできれいに表示されていますね。

シャープ

シャープを加えたフォントです。

拡大した文字を比べてみるとピシッとした印象がありますね。「滑らかさ」でちょっとぼやけてる場合は「シャープ」でちょうどいいかもしれません。

鮮明

鮮やかを加えたフォントです。

通常の文字と見分けがつかないかもです。なので鮮やかの出番は少ないと思う人も多いかもしれません。

強く

強くを加えたフォントです。

見た目の変化もよくわかるので、アンチエイアリスの調整で使う頻度が一番高いのではないでしょうか?
拡大した文字はくっきりとした印象をうけますね。より力強さを感じますがこれ以上小さくすると太すぎな文字になりそうです。

基本的には、文字が弱いと感じたらまず「強く」を加えて徐々に太さをおさえる調整をすればバランスが取れると思います。

なし

なしを加えてみました。

なぜこの機能があるのか分からないくらいドット風の文字に変化します。
でも、MSフォントで16ptに変更してみるとこうなります。

どうでしょうか。実は、一昔前のPCサイトにアンチエイアリスのなしを活用してテキスト打ちの部分をデザインしてました。
今はスマホデザインが増えドット文字でデザインカンプを用意する事が減っているので、優先して身につける技ではないですが、頭の隅っこに記憶しておき、年上のデザイナーさんと話すネタとして活用するといいですよ!

他にも、小さいサイズのバナーに無理矢理テキストを打ち込む時にも活躍します!
もしかしたら「お!昔やっていた技術を知ってるだ!」みたいに思ってくれるかもしれません。多分。

フォントのボールド調整と併用する事で微妙な太さを再現

アンチエイアリスとフォントボールドを掛け合わすとさらに細かく文字の太さをコントロールできます。
コツは、フォントボールドで一番気に入った太さを設定してからアンチエイアリスで少しずつ調整すると良いです。

さらに文字組みにもこだわってみましょう!
【簡単!】気持ちのよい文字組み(カーニング)をマスターしてWebデザインスキルを磨こう!
これであなただけの独特な太い文字が完成に近づきます!

さらに文字ツールの太さを掛け合わせてより太い文字を表現


そもそもの文字の美しさが損なわれる場合が多いので使いづらいですが、とりあえずものは試しで太くしてみましょう。
もしかしたら、ちょうどよい太めのフォントに仕上がるかもしれません。

ボールド調整の注意点

アンチエイアリスは打ち込んだテキストレイヤー全体に効果がかかります。フォントのボールド調整は文字ごとに効果がかかります。
なぜこの仕様なのかわかりませんが、仕様だとおもうので文字ごとにアンチエイアリスを加える時は注意してください。

本日のまとめ

  • アンチエイアリスは頻繁に使うので絶対覚えておくとよい!
  • アンチエイアリスでフォントをより強調できる
  • 「なし」はPCのテキスト打ちで使っていた
  • フォントボールドと併用してさらに太さをコントロールできる
  • アンチエイアリスはテキストレイヤー全体に加える効果なので、文字ごとに加える時は注意する

私の記事はヘタクソなので上手くノウハウを受け取ってもらえないかもですが、最後まで読んでいただいて感謝いたします。

この記事はここまで!
ここからはよく読まれる記事をまとめてご紹介します。ひとあじ違うデザインに出会えるかもしれません。

【簡単!】気持ちのよい文字組み(カーニング)をマスターしてWebデザインスキルを磨こう!

2018.11.24

化粧品・コスメで訴求がしっかりしているランディングページ(LP)のデザイン6選

2018.01.28

【第1回】未経験でも大丈夫!Webデザイナー志望の方へデザインノウハウをアウトプットします!

2018.10.15

【第5回】未経験でも大丈夫!Webデザイナー志望の方へデザインノウハウをアウトプットします!

2018.11.13

【Webデザイン上達のコツ5選】普段の生活の中で、デザイン力を身につける方法!

2018.11.23


お気に入りの情報
が無かったでしょうか?
この記事の最後にデザイン情報やノウハウをレコメンド形式でご紹介しています。

お求めの記事に出会えますように。



スポンサード広告 by google