カーニングしないヤツは素人 色とフォントを決めたら、実際にPhotoshopやIllustratorに入力してみます。 このとき、入力したそのままだとバランスが良くありません。一番の理由は文字間隔がおかしいこと。特にカタカナや、ひらがなと漢字、英数字の混合などでは絶対に調整が必要です。 どんなにかっこいいグラフィックが作れても、文字のカーニングがまるでダメだと、全体的にダメさが漂ってしまいます。最近ではアプリケーションが自動調節してくれますが完璧ではありません。文字のサイズや文字の並びによっては手動調整が必要。機械任せにせず、自ら「この文字間隔はおかしい」と気づけるセンスを磨きたいものです。 上段が普通に入力した状態。下段は手動でカーニングを調整した後。素人臭さが抜ける。 カーニング機能はほとんどのグラフィックアプリケーションに装備されています。 PhotoshopとIllustratorではテキストツールで文字を入力しているときに、文字間隔を調整したい部分にカーソルを入れて、optionキーを押しながら左右の矢印キーを押します。 【Point】 134：グラフィックスに文字を使うなら、まずカーニング！ タイトル作成工程 ではポイントを踏まえて、簡単なタイトル画像を作ってみましょう。 文字のサイズやフォントを変えて配置します。文字は適度に別レイヤーにするのがコツです。 完成予定図。よくありがちです。 １）Photoshopで新規書類を作成 タイトルのサイズを入力します。今回は300×70ピクセルで。 ２）背景レイヤーをタイトルを貼り付ける地の色で塗りつぶす ページに張るときの背景色を見ながら作業すると、微調整がしやすいです。今回は#0033CCを使用。 ３）テキストツールで文字を入力 今回はサイズや位置を変えたいので、文字ごとに別レイヤーにします。 まずはメインとなる和文を「プロデューサーへの」で入力しフォントとサイズ調整。さらに「道」だけを同じフォントでサイズを大きくして入力。 次に「weekly」「WEB」をそれぞれ別レイヤーで入力。フォントとサイズ調整をしておきます。 文字の入力が終わった段階。 ４）文字修飾 「WEB」の文字を輪郭線だけにします。Illustratorでは「塗りと線の入れ替え」で一発ですが、Photoshopは一手間かかります。 　　（１）新規レイヤー「WEB OL」を作成。 　　　　 OLはアウトラインという意味なのですが、これは各自で分かりやすい略号をつけて構いません。 　　（２）「WEB」レイヤーを非表示にし、「WEB OL」レイヤーをアクティブにします。 　　（３）コマンドキーを押しながら「WEB」レイヤーをクリック。 　　　　 これで「WEB」レイヤーの塗りつぶされている部分が選択できます。 文字だけでなくレイヤーにあるグラフィックの選択範囲が取れる便利な機能。 　　（４）「WEB OL」レイヤーがアクティブになっていることを確認して、編集＞境界線を描く... を選択。 　　　　 線幅：1pixel、カラー：#FFCC66、位置：内側でOKをクリック。 元の「WEB」レイヤーを残しておくのは、あとで修正するときにフォントやサイズなどで悩まないようにするため。意外にもあとからの修正作業は多いのです。 また「weekly」が目立ちすぎるので、レイヤーの透明度を50%に下げます。 ５）Photoshop形式で保存 きちんとレイヤーを残して保存しておきます。 ６）Web用に保存、でgif形式で書き出す ７）htmlに貼り付ける 【Point】 135：タイトル制作に使う文字データは、ラスタライズ（or アウトライン化）しないデータも残しておけ！ タイトル作りのキモは、色とフォント選択にあると言っても過言ではありません。 あまりにもイメージとかけ離れたデザインは、本文にユーザーを引っ張ってこれません。内容に興味を持たせるためにも、デザイナーにかかる使命は大きいですよ。 文字画像 （１） 　終わり [ ←BACK ]