テロップの文字間を調整 -カーニングとトラッキング-

今回は、文字をデザインする時に欠かせない文字間調整のテクニック、カーニングとトラッキングについてご紹介します!

目次

カーニング

PCでテキスト(文字)を打つと、テキスト前後の余白が文字ごとに異なっているため、不自然な余白のできる部分があります。この「不自然な余白」を詰めていく作業を「カーニング」と呼びます

上がカーニング前、下がカーニング後

特にデザインが縦長な「し」「り」や、小書き文字の「っ」「ゃ」などの前後は余白が空きがちなので注意してカーニング調整してあげる必要があります

動画編集では、グラフィックデザイン制作ほどシビアなカーニング調整は求められませんが、さすがにベタ打ちのままではあまり見た目が良くないのでできる限りカーニング調整するクセは付けた方がいいですね!

トラッキング

カーニングが文字ごとの感覚を調整していくのに対して、文字列全体の文字間隔を一斉に調整するのがトラッキングです

上:トラッキングを狭く 下:トラッキングを広く

トラッキングを広くするとスッキリしたデザインになり、狭くするとちょっと窮屈な印象になります。トラッキングを広げるのはオープニングやチャプタータイトルなどスッキリ見せたい場面で重宝します。また、トラッキングを狭めるとテロップの横幅を短くできるので、画面下に表示するフォローテロップがギリギリセーフマージンに収まらない時などに便利です

実際に調整してみよう

では、Photoshopを使ったカーニングとトラッキング調整の方法を見ていきましょう

まず、Photoshopで適当なテキストを打ちます。今回は、スッキリしたデザインを作ろうと思うのでフォントはM+ 1cのレギュラーを選んでみました

Photoshopでテキストを作成

はじめにカーニング調整から

文字ツールで調整したい文字と文字の間にカーソルを合わせて「文字」パネルの「V/A」に左矢印が付いている項目(下の画像参照)に数値を入れて調整、または調整したい箇所にカーソルを合わせた状態でショートカット:option +左・右キーでも調整できます。頻繁に使うことになるのでショートカットを覚えた方が良いと思います

Photoshopでカーニングを調整

今回は以下の数値で調整してみました。漢字部分の調整があまりありませんが、漢字は基本的にほとんどの文字が正方形に組まれているのであまりカーニング調整する必要はありません

カーニングの調整値

調整後はこんな感じです。ムダなスペースが削れてイイ感じですね!

カーニング調整後

次にトラッキング調整です

トラッキングを調整したい文字レイヤーを選択するか、文字レイヤー内の調整したい部分だけを選択し、「文字」パネルの「V/A」に数値を入れて調整します

Photoshopでトラッキングを調整

今回は数値を「500」に設定して文字間にゆとりを持たせオープニングタイトルっぽいデザインにしてみました。また、フォントサイズがちょっと大きかったので80に変更しています

トラッキング調整後

僕は、間隔が開いてしまうと調整しづらいと感じてしまうため、先にカーニング調整してからトラッキング調整という順番で使っていますが、先にトラッキング調整してからカーニング調整という方が正しいそうです

完成形はコチラ

完成デザイン例

ラインとテキストを追加しドロップシャドウを入れてオープニングタイトルっぽくしてみました

まとめ

こんな感じで、今回はカーニングとトラッキングを使った文字間調整の方法をご紹介しました

カーニングはカナリ地味な作業ですが、丁寧に調整してあげると見た目の印象が全然違ってくるので、手間でもぜひ毎回調整してみてください。ちなみに、文字サイズが小さい場合はあまり意味がない(気にならない)ので自分の目で見て気になる範囲で調整していってみるといいですね!

それでは、みなさんよきクリエイティブライフを!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次