Photoshop Web制作

【フォトショップのテキスト調整】カーニング・トラッキングの方法まとめ

2021年11月2日

【フォトショップのテキスト調整】カーニング・トラッキングの方法まとめ

Photoshop(フォトショップ)の文字の間隔調整がうまくできない!という方に、カーニング・トラッキングについて詳しく紹介します。

フォントの設定の種類が多すぎて、いつもややこしくて悩んでしまう...
カーニングとトラッキングがどっちなのか分からなくなる...

そんな悩みを解決します。

この記事を読むと、Photoshopのテキストの間隔調整についてマスターできるようになっています。

それでは、実例を見ながらフォトショップのカーニング・トラッキングの使い方について詳しく見ていきましょう。

フォトショップのカーニングとは?

カーニングとは、テキストとテキストの間隔を調整することです。一方トラッキングとはカーニングの一種で、テキスト全体の間隔を調整することです。

例えば、こちらの写真のタイトル部分をもう少し綺麗なデザインにしたいと思った時を例に見てみましょう。

before:カーニング前

after:カーニング後

ほんの少しの差かもしれませんが、カーニングにこだわるとデザインのオシャレ度が増すのがわかると思います。

では実際にテキストの間隔調整の方法を2種類ご紹介していきます。

テキストの間隔調整の方法2種

テキストとテキストの間隔を調整したい場合:カーニング

1. フォトショップの[ウィンドウ]から、[文字パネル]を表示させておきます。

2. 調整したい文字と文字の間にカーソルを置きます。

こちらの写真では、n と a の間にカーソルを置いています。

3. 正の値かマイナスの値を入力する

先ほど表示させておいた[文字パネル][V/A]と書いてあるアイコンがカーニングの調整ボタンです。

ここに正の値を入れると文字の間隔が広くなります。数値が大きければ大きいほど間隔が広くなります。逆に、マイナスの値を入れると文字の間隔が狭くなります

テキスト全体の間隔を調整したい場合:トラッキング

1. フォトショップの[ウィンドウ]から、[文字パネル]を表示させておきます。

2. 調整したいテキスト全体、もしくはテキストを一部ドラッグして選択しておきます。

3. 正の値かマイナスの値を入力する

先ほど表示させておいた[文字パネル][塗りつぶしのV/A]と書いてあるアイコンが、文字全体の調整ボタンです。

ここに正の値を入れると文字の間隔が広くなります数値が大きければ大きいほど間隔が広くなります。逆に、マイナスの値を入れると文字の間隔が狭くなります

数値を200に設定した場合だと、間隔が均等に広くなりました。

ショートカット紹介

ショートカットは下記の表でお使いのOSの方を試してみてください。

OS キーボードショートカット
mac optionキー (⌥) + 矢印キー(←、→)
Windows Alt + 矢印キー(←、→)

まとめ

テキスト間の間隔の調整はカーニングで、テキスト全体の間隔の調整はトラッキングです。どちらも文字パネルを表示させてから、正の値を入れると間隔が広がり、負の値を入れると間隔が狭くなります。

これらの文字の間隔の調整を使いこなして、フォトショップでの作業を時間短縮しちゃいましょう!

  • この記事を書いた人

suzunari

Webデザイナー・プログラマー科の職業訓練校 ▶︎ フロントエンジニア/20代で3回転職経験/転職・Web制作・デザイン・プログラミング情報を読者の方の参考になるように発信しています。

-Photoshop, Web制作
-