ブログ

フリーランスとして働くWebデザイナーの備忘録・メモ

Illustrator:文字数変更しても自動的に可変する文字背景をつける

文字のあしらいとして、テキストに囲み矩形を付けることがあります。
文字の大きさや長さが変更になった場合、矩形を別のオブジェクトで描いている場合、文字調整後にさらに図形の調整も必要になります。
そこで、テキスト自体にアピアランスを適用し、文字数が可変しても大丈夫な囲みの矩形(背景色)を付けてしまう方法です。

まず初めに、適用したい文字を選択し、ツールの文字の塗りと線をなしにしておきます。

「ウィンドウ」から「アピアランス」をだしておきます。
文字を選択した状態で「アピアランス」のメニューから「新規塗りを追加」。
これを2回行い、塗りを2つ追加しておきます。

上になっている方の塗りが文字色にしますので、文字色を決めます。
下になっている方の塗りを背景色にしたい色に決定します。

下になっている方の塗り(背景色になる色)を選択した状態で、「効果」→「形状に変換」→「角丸長方形」を選択します。
ここでは角丸にしていますが、長方形、楕円形でも大丈夫です。
形状オプションが出ますので、高さ、幅、角丸の大きさをプレビューをみながら変更します。

このままでは、文字が中央よりも上にずれています。
このずれを直します。

「効果」→「パスの変形」→「変形」を選択します。
「移動」の「垂直方向」の部分の数値を調整します。

これで、文字数が変更になっても自動で可変する背景ができました。