こんにちは、ぴえたなです！
今回は、簡単に袋文字を作成する方法をご紹介したいと思います。
袋文字はランディングページや、ロゴであったりバナーを作成する際など色々な使用用途がありますので、覚えておいて損はないです！汎用性が高く応用も色々できますのでしっかり覚えておきましょう！
Contents
ベースになる文字を出力する
まずは、ベースとなる文字を出力します。
この際、文字間は少し狭めて作成した方が、最後の仕上がりが綺麗になります。
文字間を狭めるのは文字を選択した状態でoptionキーと矢印キーを押すと調整できます。
助詞を小さくする
よくあるデザインで、”を”や、”の”などの助詞をあらかじめ小さくしておきます。
アピアランスパネルを使用する
次に、アピアランスパネルを表示させます。
表示され血ない場合は、ウィンドウから選択しアピアランスを選択します。
この下の四角の部分を選択すると新規追加ができます。
まずは線を追加します。
白背景なので少しわかりづらいのですが線が追加されました！
ですが、文字が線の分痩せてしまいましたので、それを直したいと思います。
アピアランスパネルの線をドラッグして文字の下まで持っていきます。
すると、このようになりました！
このようにしてアピアランスパネルを追加してしていくことで文字に様々な効果をつけていくといった感じです！
他にも色々と効果を追加することができますので方法をご紹介させていただきたいと思います。
影を追加する（ドロップシャドウ）
次に、文字の周りに影を追加したいと思います。
ドロップシャドウについてはこちらでもご紹介してますのでご覧ください！
下の”fx”というところを選択すると新規効果を追加することができます。
この中の「スタイライズ」から「ドロップシャドウ」を選択します。
するとドロップシャドウのオプションパネルが表示されます。
今回はこのように設定しました。
X軸は縦方向にY軸は横方向にどのくらいの位置に影をつけるかという設定ができます。
中心から影をつけるために両方０で設定しています。
これでOKを選択します。
するとこのように文字の周りに影をつけることができました！！！
グラデーションを追加する
次に、塗りの部分のグラデーションを追加します。
グラデーションはこちらでも詳しくご紹介してますのでご覧ください！
グラデーションの色味は、下から黒→黄色→白というグラデーションを作成します。
グラデーションの角度を−90°に設定し、黒が下に来るように設定しました。
すると、先ほど作った影やフチが保たれたまま文字の塗りをグラデーションにすることができました！
さらにフチを追加する
先ほどと同じ要領で、新規の線を追加し、次の線は太めの設定にします。
そしてアピアランスパネルの追加した線をドラッグして一番下の位置まで持っていきます。
すると、外側のフチが作成できました！
外フチに線を追加する
さらに新規の線を追加して、線の太さを設定しましょう。
先ほど太いフチを10pxで設定したので12pxに設定することで2pxの線を表示することができます！
立体的な影をつける
次にさらにドロップシャドウを使用し、立体的に見えるような影をつけましょう。
立体的な影の付け方は縦軸と横軸にズラした位置に、ぼかしを０に設定します。
最後にこの部分。
こういった意図せずに、線が変形してしまった時の対処法をご紹介したい思います。
このとんがってしまった部分に該当する線を選択し、線パネルを表示させます。
線パネルを表示させると、角の形状という項目があり、こういった場合はマイター結合にチェックが入っていると思います。このチェックをラウンド結合に変更します。
これで直りました！
これにて完成です！！！
まとめ
いかがでしたでしょうか。
今回はフチ付きの袋文字を作成させる方法をご紹介させていただきました！
なかなか工程数が多く大変だったかもしれませんが、基本的には繰り返し作業になりますので、覚えてしまえば割と楽にできます！
アピアランスパネルは、イラストレーターではかなり使うことが多いものになりますのでしっかり覚えておきましょう。
webデザインやロゴ作り、バナー作成など様々な活用方法があります！
それではみなさんさようなら〜〜〜
コメント