ワンランク上のデザインにはかかせないPhotoshopの文字詰め「カーニング・トラッキング」のまとめcreativememomemoWebデザインtips,Photoshoptips,クリエイティブでステキなものをまとめているブログ。tips0323534こんにちは。今日も元気にPhotoshopと戯れます井畑です。今回はPhotoshopの文字詰めに使うツールについてちゃんと調べてみました。基本的なことがほとんどなので、知ってる人にとっては当たり前のことですが、おさらいによろしければご覧ください。メトリクスとオプティカルについて文中に出てくるメトリクスとオプティカルについて僕の認識が違っていたので訂正いたしました。待って文字詰めって何?まずは文字詰めが何か分からない人の為に軽く説明しておきますね。ワンランク上のデザインにはかかせない文字詰め文字詰めとは読んで字のごとく、文字と文字の間を詰めてバランスをとる作業のことです。通常文字を打っただけでは「ベタ組み」と呼ばれ、基本的に文字と文字の間が空きすぎています。それを詰めてデザインのバランスをとります。WEBの性質上テキストデータの文字詰めは難しいので基本的にやりませんが、(CSSの「letter-spacing」で調整できないこともないけど)バナーの見出し文字、ロゴ、タイトルなど画像としてデザインしたものは必ず文字詰めをおこなった方がいいでしょう。文字詰めはデザインの基本であり、奥義でもあります。どのくらい詰めたらいいかなど、文字詰めのポイントやコツを話し出すと、とーーーーっても長くなりそうなので、この記事では割愛...。Stocker.jpPhotoshopの文字詰めについてさて、長くなりましたが本題。Photoshopでの文字詰めの仕方ついて説明していきます。使用するのは文字パネルにあるカーニングとトラッキングです。カーニングとトラッキングについて2つとも文字間を調整する時に使い、似ているのですが、微妙に役割が違います。カーニングは、特定の文字の組み合わせに対して文字間のアキを調整するものです。対して、トラッキングはテキスト全体や選択したテキストに対して等間隔のアキを調整するものです。カーニングは部分的、トラッキングは全体的な文字間の設定と覚えておくと良いでしょう。カーニングとトラッキングの文字詰めの仕方カーニング・トラッキングともに、右側の数値を増減させることで、文字間隔の空け・詰めが調整できます。どのくらい数値を動かせば、どのくらい詰まるかは...実践あるのみです!!(どーん)まだやったことない方はぜひ試してみてください;Dカーニングは変更したい文字と文字の間にカーソルを合わせてから、調整。トラッキングは変更したいテキストの範囲やテキスト全体やを選択してから、調整します。覚えておくと便利なカーニング時のショートカットここでワンポイント。カーニングは文字一つずつに設定することが多いのでショートカットを覚えておくと非常に便利です。詰めたい文字と文字の間にカーソルを合わせて[alt]+[←]or[→]で調整できます。これを知ってるのと知らないのとでは文字詰めのスピードにかなりの差が出ますので是非覚えてください:)ちなみに、数値はカーニング・トラッキングともに「-100~200」まで選択することができますが、直接数値を打ち込めばなんと「-1000〜10000」まで入力することができます。10000って...設定することあるんですかねw僕も今回試してみて初めて知りましたXD(CS6の場合です。したら他のバージョンでは違うかも知れません)カーニングの自動設定「メトリクス」と「オプティカル」ここで、カーニングのオプションにあるメトリクスとオプティカルについて説明しておきます。2つの存在は知ってはいるものの、細かい事はよく分からない人が多いのではないでしょうか?どちらも文字組みに対して、自動で文字間を調整してくれるステキな設定なのですが、文字詰めの基準が違います。メトリクスカーニングメトリクスはペアカーニングを含む情報のみ文字を詰める設定です。ペアカーニングとは特定の文字の組み合わせに対する文字間情報の事です。欧文だと「P.」「To」「Tr」「Wa」「We」「Ya」「Yo」などがあります。これらの文字列になった時、ベタ組みでなく文字を詰めるようにするのがペアカーニングです。日本語フォントは組み合わせが膨大すぎて欧文フォントほどペアカーニングが設定されているフォントがありません。ちなみに、ヒラギノや小塚はペアカーニング情報を含む数少ない和文フォントです。メトリクスカーニングを上のような文章に適用すると、ペアカーニング情報を含む箇所、つまり「W」と「e」の間のみカーニングが適用されますが、他のところはカーニング「0」のまま変わりません。メトリクスについて訂正です。メトリクスはフォント内部の情報(ペアカーニング情報を含む)によりプロポーショナルに文字間が調整される自動設定です。ペアカーニングだけでは無くフォント内の情報を読み取ってるんですね。フォント内部に情報が無ければ詰まりません。メトリクスをしっかり理解するには、その前にOpenType機能のプロポーショナルメトリクスを理解する必要があります。コメントをいただいた、おじんさんのブログ記事に詳しい説明がありますので、知りたい方は是非ご覧ください。オプティカルカーニング対して、オプティカルカーニングは文字の形状に基づいて、隣接する文字間全てが調整されます。ペアカーニングの有無に関わらず自動でカーニングしてくれるので、文字詰めの初心者の方はオプティカルに設定しておくことをオススメします。オプティカルについて訂正です。オプティカルはアプリケーション(Photoshop)が独自に判断して、文字間を調整する自動設定です。フォントの情報が無いものをアプリケーション(今回はPhotoshop)側でカバーして調整する設定なんですね。オプティカルカーニングの自動調整は便利なのですが、やはり完璧ではありません。文字詰めに慣れてくれば、自動調整にまかせず、文字一つずつ手動で行うのが基本になってきますが、初心者の方はオプティカルカーニングでどのくらい文字が詰めればいいのか参考にしてみても良いでしょう。Photoshopの文字詰めオススメの手順とか組み合わせ僕が個人的に良いと思う、Photoshopの文字詰めの手順とか組み合わせを紹介します。手動カーニング→トラッキングをオススメ僕の文字詰めのスタンダードな手順です。カーニングの設定とトラッキングの文字詰め設定は共存できるので、まず手動で文字一つ一つのカーニングをして、バランスをそろえてから、テキストブロック全体の文字間を調整します。すると、文字間の相対的なカーニングを保持したまま、調整できるのでオススメです。(違うやり方のが良いよって方がいましたら是非コメントかツイッターで教えていただけると嬉しいです!!)タイトルは手動カーニング、細かい文字はオプティカルカーニングが良い感じタイトルや見出しの文字は大切な部分なので、一つずつ手動でカーニングした方が絶対に良いです。先ほども書きましたが、自動調整にまかせると違和感のある部分がでてきますし、デザイン上意図的に詰めたり空けたい部分もでてくるので手動で一つずつ調整します。文字量が多かったり、細かい文字だった場合はオプティカルカーニングにまかせて、さくっと文字詰めしてしまうのが良いでしょう。自動調整を有効に使った手です。初心者にはオプティカルカーニング+手動カーニングもオススメ文字詰めに慣れていない方にオススメなのがオプティカルカーニング+手動カーニング。オプティカルカーニングで自動に文字を詰めてから、気になる部分を手動カーニングで修正するというやり方です。ある程度自動で詰めてくれるので失敗も少なく、短い時間でそれなりのクオリティができるので、時間が無い時などにもオススメです:)最後に以上で、Photoshopの文字詰めについての説明を終わります。PCを2週間使ってみた感想Photoshop初心者は絶対に覚えてほしい!!画像を劣化させずに調整できるPSDデータの作り方iPhoneで使える特殊文字を使って動物のかわいい顔文字を作ってみた最近覚えた便利すぎておしっこちびるかと思ったPhotoshopの小技/ショートカット11こ努力の過程は家庭が見つけてくれる話(ダジャレ)2018/08/18転職します2018/02/28Chromeで画像を縮小表示すると文字がなんだかぼやける現象を回避するTips2018/01/09SNSと検索の最適化を目指してWordPressで記事タイトルを投稿後一定期間で自動的に変わるようにしてみた2017/09/21【CSS】見出しが変に改行しない!スマホのfont-size指定にvminを使ってみよう2017/05/08creativememomemoクリエイティブメモメモはWebデザイン技術や,クリエイティブでステキな作品を紹介するメモブログです。Ihata綺麗なものと、美味しいものをこよなく愛するひよっこです。名古屋でWebデザインしてます。あと個人でイラストなんかもやっています。