Adobe Photoshop

【Photoshop】!(ビックリマーク)や?(はてな・クエスチョンマーク)の大きさを調節して、テキストを見やすくする方法

更新日:




この記事では、Adobe Photoshop というソフトを使用したテキストの調整について図解を入れて解説します。

テキストについてくる!(ビックリマーク)や?(はてな・クエスチョンマーク)の大きさを調節して、テキストを見やすくする方法です。

LPのタイトルや画像のタイトルなど、文字自体の高さが整えられるので、一つのブロックのように見やすくすることができます。

スポンサーリンク

完成イメージ

最初に完成イメージを見て下さい。

Beforeだと!(ビックリマーク)がテキストから少し離れているし、テキストとの高さも違って見えます。

Afterだとテキストに!(ビックリマーク)が近づき、高さもそろっているのでひとかたまりに見えますね。

!(ビックリマーク)を調整する前と後の図

!(ビックリマーク)を調整前と後の図

 

テキストの調整方法

新規レイヤーを用意する

Photoshopの新規カンバスを開きます。まずはPhotoshopを開きましょう。開くサイズは特に気にしなくて大丈夫です。

 

 

 

 

 

!(ビックリマーク)を入れたテキストを打つ

続いて文字を打っていきます。

今回も使用しているフォントはWindowsでは8.1から導入されている「游ゴシック」というフォントです。

ご自分のパソコン内にあるフォントで大丈夫ですし、デザインの途中でこの記事にたどり着いた方は、そのデザインに合わせたフォントで大丈夫です。

 

 

!(ビックリマーク)を選択し、そこだけフォントサイズを大きくする

!(ビックリマーク)のフォントサイズを2px大きくする次に、!(ビックリマーク)のフォントのサイズだけを大きくします。

文字パレットではもともとのテキストが「50px」となっていましたので、!(ビックリマーク)だけを54pxに変更します。

文字パレットの状態はこのようになっています。

 

!(ビックリマーク)のフォントの高さを1pxだけ下げる

!(ビックリマーク)のフォントの高さを1pxだけ下げる!(ビックリマーク)が大きくなりましたが、このままでは高さが少しだけ他のテキストより高くなってしまいます。

そこで、次はこの!(ビックリマーク)の高さを1pxだけ下げます。高さを調節するのは、文字パレットの図の部分です。

文字パレットの状態はこのようになっています。

 

全体を見て、文字詰めを調節する

オプティカルに変更後、「様」と「!」の行間のみ狭める

最後は、全体の文字詰めを調節します。まずは「V/A」となっているところを「オプティカル」に変更してください。

これだけだとまだ「!」が離れているので、「様」と「!」の間を選択して「V/A」をパレットの位まで変えてみて下さい。

文字パレットの状態はこのようになっています。

 

日本語フォントの場合は、「オプティカル」に変更するだけで、ある程度文字の間隔が整理されます。

しかし、!(ビックリマーク)や?(クエスチョンマーク)はそれだけでは離れているので、個別に行間を整える必要がありますので注意してください。



この工夫を使ってテキストを調整する方法は、どんな風に見えるか?

今回のように!(ビックリマーク)や?(クエスチョンマーク)を調整すると、テキストと合わせてひとかたまりに見えるため、よりユーザーに向けて見やすさを追求できたデザインとなります。

細かい工夫ですが、この細かい工夫がユーザーさんの見やすさにつながると思います。

ぜひ使ってみて下さいね(*´ェ`*)

 

こんな記事も読まれています

使用ソフト:AdobePhotoshop テキストの見せ方「」(かぎかっこ)を工夫しよう編
【Photoshop】テキストの調整でできるデザイン!「」(かぎかっこ)を工夫して、中身のテキストが見やすいデザインにする

この記事では、Adobe Photoshop というソフトを使用したテキストの調整について図解を入れて解説します。 普段よく見る「」(かぎかっこ)を工夫して、中身のテキストが見やすい用に調節する方法で ...

続きを見る

ちょっとで差がつく小ネタ:記号の部分を工夫するだけで、 テキストがとっても見やすくなる デザインの方法
【ちょっとで差がつく小ネタ】記号の部分を工夫するだけで、テキストがとっても見やすくなるデザインの方法

WEBデザインをしていても、「なんだか違う・・・」「でも、どこを直したらしっくりくるのかわからない・・・」と思うことはありませんか? 今回は、そんな「しっくりこないデザイン」を記号の部分を工夫すること ...

続きを見る







  • この記事を書いた人
akitashiromaru_A7RKcJhZpnPE

あきた しろまる

20代前半までは教職を目指し中高の数学免許を取得するも、「もっと世の中知ってみたい」という気持ちから、世界一周の船旅へ。帰ってからは派遣社員しながらお金をためて、WEBの勉強をし、WEBデザイナーへ。20代後半からでもWEBデザイナーは目指せる!楽しい!ってことを伝えたい、という気持ちで記事を書いています。

おすすめ記事はこちら

WordPressプラグイン 「WP CSV Exporter」 1

前回、スプレッドシートを使った方法で、ブログが30記事を超えたところで、現状把握・改善点メモを行うと、リライトすべきポイントがわかってきた!というブログを書かせていただきましたが、記事の一覧を出力でき ...

-Adobe Photoshop

Copyright© しろまるカフェ , 2018 All Rights Reserved.