3分で完成?! Illustratorで簡単に立体文字を作る方法! | デザイン | お役立ち情報 | 岡山のホームページ制作会社。WEB戦略が得意なホームページ成績上げ屋さん!

NITTY GRTTY
NITTY GRITTY

お役立ち

ニッティ・グリッティの

お役立ち情報

3分で完成?! Illustratorで簡単に立体文字を作る方法!

UPDATE :

投稿者 : OJIMA MIZUKA

ojima_icon
スクリーンショット 2022-08-26 10.35.03



このような立体文字をIllustratorのアピアランス機能を使って簡単に作ることができます。

立体文字は使い勝手が良いため、覚えておくと便利なテクニックです!




Step1 文字を打ち込み、「新規塗り」を2つ追加する



テキストを打ち込み、アピアランスパネルから「新規塗りを追加」を2つ追加します。

(上から1つ目の塗り→文字の色に、上から2つ目の塗り→フチの色になります)


今回は白と黒で設定しますが、お好みの色に設定していただいてOKです!




Step2 フチを作る



2つの目の塗りを選択した状態で、[Illustrator効果]→[パス]→[パスのオフセット]を選択します。



[パスのオフセット]設定は、このように設定しておきます。

(選択したフォントにより、適切な数字に調節してください)



ここまでで、立体がないフチ文字ができあがります!




Step3 立体部分を作る



2つの目の塗りを選択した状態で、[Illustrator効果]→[パスの変形]→[変形…]を選択します。



[変形]のオプションパネルから【垂直方向】を【110%】に設定します。

設定後→[OK]を選択してください。



先ほどと同じ2つ目の塗りの[変形]をクリックし、もう一度オプションパネルを開きます。

移動【垂直方向】を【2%】にし、コピーを増やして厚みを作ります。



Step4 完成



以上で完成です!



✳︎  応用編 ✳︎  奥行を出す



同じく、アピアランス[変形]のパネルで、拡大・縮小「水平方向」を【98%】に変更すると

奥から飛び出てきているような立体文字を作ることができます!

移動を【2px】にして調節しました。



✳︎  応用編 ✳︎  左右から立体に



同じく、アピアランス[変形]のパネルで、移動「水平方向」「垂直方向」を【1px】に

変更すると右から出てきているような立体文字を作ることができます!

(【-1px】とマイナス方向にすれば、左から出てくるような立体になります!)

コピーは【40】にしております。




文字をアウトラインしていないので、

文字の変更もとっても簡単にできます!




ojima_icon

この記事を書いた人 Who wrote this blog

OJIMA MIZUKA

夏なので食中毒になりました。

プロフィール

無料診断

現状のHPを無料で診断いたします。
お気軽にお問い合わせください。

tel

お問い合わせ

tel


086-959-4456

受付時間 10:00〜17:00定休日/土日・祝日

BLOG

お役立ち情報

© 2022 NITTY GRITTY All Rights Reserved.
WEB GROW
WEB戦略を成功させる
システムできました。

自社で驚くほど簡単に更新・運用ができる!

セキュリーティー万全なWEBの内製化システム

ホームページ改善勉強会 ホームページ改善勉強会 ホームページで失敗しないためのノウハウをセミナー限定で完全公開
© 2022 NITTY GRITTY All Rights Reserved.
無料診断バナー 無料診断バナー