【Illustrator】実務で役立つアピアランスのみで立体的な文字を作る!

Webデザイン・DTPデザイン

  • 公開日
  • 最終更新日

新野州平

今日はイラストレーターで立体的な文字を作る方法をお教えします。名称未設定-1_03
まずは文字に線を重ねていく部分から作っていきますが、代表的な作り方は

・文字オブジェクトを重ねる
・アピアランスで線を重ねる

このどちらかになると思います。
前者の方が何も考えずに簡単に文字をコピーして重ねていくだけで出来上がります。
ただし業務でイラレを使う場合は、制作過程で文言の変更が起こる可能性も十分にあります。
前者の場合は「文字を入力し直して縁用の文字をコピーして・・・」と修正作業が出てきますが、後者の場合は文字の入力をし直すだけで細かな修正は必要ありません。

「業務を見据えてデザインをするなら、後々の修正が簡単にできるように作るのがベスト」です

今回はアピアランスを使って作業をしていきます。

文字入力を行う

細かな説明は不要でしょう。文字ツールでテキスト入力してください。

名称未設定-1_02 (2)

アピアランスで1本目の線を作る

アピアランスパネルからまず1本目の線を追加します。
今回は黒文字なので縁取りとして白い線を指定し、線の太さを調整しておきます。
(背景が白の場合、追加した線は見えませんので線の太さは次の工程の後に調整します)

名称未設定-1_03

線を太くすると文字自体も見えなくなってしまいますが、これは文字の上に追加した線が重なっていることが原因で
追加した線を文字の下に配置することで解決しますので、アピアランスパネルで追加した線をドラッグで文字の下に配置しましょう。

名称未設定-1_03_03

アピアランスで2本目の線を作る

次に2本目の線を作ります。名称未設定-1_03
アピアランスパネルから新規の線を作成します。
この線は立体的に見せるための線なので黒で作成しておきます。

 ポイント
この線は文字と1本目の線のさらに下に配置される線です。
1本目の線よりも線が細いと隠れて見えなくなるので、1本目の線よりも太い線にすること

さらに先ほど作成した線の下にドラッグで移動します。
※線がとがっている場合は各パネルの「線」をクリックし、「角の形状」を変えると丸くなります。

2本目の線をずらす

おおよそ完成ですが、まだ枠線ができたのみで立体的には見えません。名称未設定-1_03
最後の仕上げとして先ほど作った線をずらします。

ただしアピアランスで作成した線は、文字のパスから作られるものなのでそのままドラッグで移動をさせたりはできません。
また今回は2本目に作成した線だけをずらして配置を行います。
アピアランスパネルから2本目の線をクリックし、下部の「新規効果を追加」→「パスの変形」→「変形」を選択し、移動の項目にずらしたい距離を指定すればOKです。プレビューをクリックし確認しながら指定しましょう。

 

 

名称未設定-3_03

これで完成です。
一度作ってしまえば再編集は自由ですし、アピアランスに慣れるにもちょうどいい勉強になります。
作業時間も10分あれば十分にできますので是非やってみてください。

 

LINEをつかって友達や家族にこの記事を教える

シェアボタン

お問い合わせ

エンプロスの職業訓練についてご不明な方は、まずは学科・コース入校から就職までよくある質問をご覧ください。

  • 職業訓練のエンプロスについて、ご質問ご不明点などございましたら、下記のお問い合わせフォームからお問い合わせください。お問い合わせについては、2営業日以内にご返答いたします。

    お問い合わせフォーム
  • 営業時間
    8:50〜18:00
    定休日
    土日祝
    TEL
    079-287-1000