creatersnest

【Illustrator】縁取った文字を作れるアピアランス機能とは?


Illustratorのアピアランス機能を使えば、簡単に縁取り文字を作成することができます。
デザインのアクセントに使い勝手の良い機能ですので、ぜひお試しください。

複数のオブジェクトを作って重ね合わせたりせずに、一つのオブジェクトで作れます。
色々な設定が出来るので便利です。
(この記事では「Adobe Illustrator CS6」を使用しています。)
では、アピアランス機能を使ってみましょう。

STEP1 加工用の文字を用意します。

まず、テキストを作りましょう。今回はわかりやすく太めのフォントを使用しました。
見本は英文を使用していますが、和文にも対応しています。)

 

step1

 

STEP2 アピアランスパレットを表示させましょう。

次に、上部にあるメニューの「ウインドウ」から「アピアランス」をクリックして
アピアランスパレットを表示させます。
(すでに「アピアランス」の欄にチェックマークがついている場合、
画面上にアピアランスパレットが出ています。)

 

step2

 

STEP3 「新規線を追加」で文字の周りに線を加えましょう。

文字を選択した状態で、アピアランスパレットの右上にある三角のボタンを
クリックするとメニューが出てきます。「新規線を追加」を選びましょう。

 

step3.3
「線」をクリックして線の色を変えてみましょう。
この例では赤い縁取りにしてみました。
線の設定はまだ変更していないので細くなっています。

 

step3.2

 

STEP4 文字を見えやすく、微調整しましょう。

このまま線の設定を太くしてしまうと、文字が潰れてしまいます。
これでは文字として見えにくく、格好悪いので微調整していきましょう。

 

step4

 

アピアランスパレットの「線」のメニュー部分をつかんで「塗り」の下へドラッグして
移動させましょう。これで線が塗りの下側に移動できました。

 

step4.2.2
しかしまだ文字が潰れていますので、次のステップで塗りを加えてさらに調整して
いきましょう。

 

STEP5 「文字の塗りを追加して、文字を見えやすく調整しましょう。

次に、アピアランスパレットで文字の塗りを追加してさらに見えやすく設定して
いきます。

線と同じようにメニューから「新規塗りを追加」を選択して、
文字の色を変更してみましょう。
文字の線幅も好きなサイズに変更していきます。

 

step5

 

文字の塗りを白にし、線幅を太くしてみました。
文字の潰れもなくなり、スッキリしました。

これで縁取り文字が完成しました。
ここまででも完成なのですが、もう一手間加えてみましょう。

 

step5.2

 

さらにアウトラインに丸みをつけて、文字の見え方を変えてみましょう。

 

STEP6 線に丸みを加えてみましょう。

アピアランスの設定で線に丸みを加えることもできます。
文字のアウトラインがギザギザして気になる場合、変更してみるといいでしょう。
アピアランスパレットの「線」をクリックし、角の形状をラウンド結合を選択
しましょう。
これで滑らかなアウトラインの縁取り文字になりました。

(こちらは全体のデザインに合わせて変えるといいでしょう。
デザインによってはギザギザしていたほうが合う場合もあります。)

 

 

step6.2

 

STEP7 追記:さらに線を加えてみましょう。

更に線を追加していくことで、何重もの縁取り文字のデザインにすることができます。
STEP1でご説明しました「新規線を追加」でさらに線を増やしてみましょう。

 

step7

 

さいごに

以上が、Adode Illustratorのアピアランス機能を使った縁取った文字の作り方です。
とても簡単にデザインにアクセントを加えられる便利な機能ですので、
ぜひお役立てください。

本サイトが運営するWebデザインのオンラインスクールが公開中!
以下のリンクからお申込みで、特別料金の70%OFF!

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
こちらのコースは全くの未経験の方が、プロのWebデザイナーとして働けるレベルになることを目的としたコースです。
・全422レッスン & 42時間! 通学スクール80万円相当の内容
・授業×チャレンジ課題で実践的なスキルが身につく!
・過去1100名以上のスクール卒業生を輩出した、 Webサービス運営企業・デザイナー輩出企業だからこそ作れるプログラム

Webやアプリの最新デザインツール Sketch3 |100レッスンの完全マスターコース
Sketch3未経験からプロレベルを目指す、充実したコースです。
Sketch3の単なる機能説明をするような、つまらないコースではなく、アイコン制作、ボタン作成、メインビジュアル制作、Webページの制作など、実際の制作をしながら実践力を身につけます。
1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


Next Article色鉛筆で書いたみたいに風景画像を加工してみよう!