ホームページ成績上げ屋さんです!

ホームページ成績

上げ屋さんです!

3分で完成?! Illustratorで簡単に立体文字を作る方法! | ニッティ・グリッティとはマーケティングweb戦略デザイン美容室向け記事 | お役立ち情報 | 岡山のホームページ制作会社。WEB戦略が得意なホームページ成績上げ屋さん!

NITTY GRTTY
NITTY GRITTY

お役立ち

ニッティ・グリッティの

お役立ち情報

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

UPDATE :

投稿者 : ニッティ・グリッティ

ニッティ・グリッティ



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

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




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



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

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


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




Step2 フチを作る



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



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

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



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




Step3 立体部分を作る



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



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

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



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

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



Step4 完成



以上で完成です!



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



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

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

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



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



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

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

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

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




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

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




ニッティ・グリッティ

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

ニッティ・グリッティ

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

プロフィール

無料診断

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

tel

お問い合わせ

tel


086-959-4456

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

BLOG

お役立ち情報

  • 雑に選んでいませんか?フォントでデザインに表情をつけよう!

    2024.12.03

    CATEGORY
    お役立ち情報

  • 【初心者さん必見!】使えると超おしゃれ!「ブレンドツール」とは!~イラレの便利機能紹介Part6~

    2024.12.02

    CATEGORY
    お役立ち情報

  • テンプレートで簡単!?もう悩まないプレゼン資料作成!

    2024.11.28

    CATEGORY
    お役立ち情報

  • ホームページ集客のコツとは?コンサルティング会社が紹介!

    2023.08.21

    CATEGORY
    お役立ち情報

  • IT導入補助金のご案内

    2023.08.07

    CATEGORY
    お役立ち情報

  • 【3分でわかる】Threads(スレッズ)とは?登録方法やTwitterとの違いをご紹介

    2023.07.07

    CATEGORY
    お役立ち情報

ホームページ改善勉強会プロ経営者トレーニング交流会毎月テーマを変えて懇親会費用だけでまるっと回収
© 2025 NITTY GRITTY All Rights Reserved.
  • tline
  • tfacebook
  • tinst
  • tyoutube
無料診断バナー無料診断バナー