ブログ

フチ付き文字8段階!チラシやLP制作に使えるイラレ文字装飾テク

How-to-make-text-decoration-8

こんにちは、デザイナーのTantanです。
最近、とあるランディングページの制作をさせていただきました。
ランディングページは、通常サイトとはちがってグラフィックにインパクトが求められます。そのため、普段やらない派手な文字装飾を楽しみながら作りました。むかし折込チラシを作っていた頃を思い出しました。

そこで今回は、Illustratorでフチ付き文字を作る方法をご紹介します。シンプルなフチから、超ド派手な多重フチまでありますので、ほどよいレベルを使ってみてください。

準備

テキストの書体

hukuro_image_00
太めのゴシック体がおすすめです。
(グレーの四角は、わかりやすいよう背景色をつけているだけです。)

文字づめ

hukuro_image_01
普通に文字を打つと、ちょっと文字間が広かったりするので、少し狭く調整しましょう。
ひらがなの周りはさらに開いていたりするので、カーニングで少しツメましょう。
(カーニングはmacだとOption+左矢印キー)
調整したものはこちら。
hukuro_image_02

助詞を小さく

全体のまとまりを良くするため、「の」などの助詞は小さくしてしまいましょう。
hukuro_image_03
新聞の見出しなどでもよく見かけるやつです。金額の「100円」の円だけ小さくすることなども多いですよね。

フチ付き文字の8段階進化

レベル1:フチ

文字にフチをつけましょう。
アピアランスパネルで左下の□みたいなアイコンを押し、「新規線を追加」します。
hukuro_image_04
線の角の形状はお好みで。おすすめはラウンド結合です。
hukuro_image_05
さて、このままだとこんな感じで文字が痩せてしまいますね。
hukuro_image_06
そこで、線を塗りの下へ持っていきます。アピアランスパネルで線を塗りの下へドラッグします。
hukuro_image_07
そうすると無事にきれいなフチ付き文字になります。
フチ文字、完成です!
hukuro_image_08

レベル2:シャドウ

影をつけてさらにリッチにしてみましょう。
アピアランスパネルの「fx」というアイコンを押し、「新規効果を追加」します。
hukuro_image_09
「スタイライズ」の「ドロップシャドウ」を選択します。
hukuro_image_10
「x軸オフセット」はシャドウを左右にどれだけずらすか、「y軸オフセット」は上下にどれだけずらすかです。お好みで調整しましょう。
「0」にすると真下に影がおちる感じになります。
今回は下記のように設定しました。
hukuro_image_11
アピアランスパネルにはこのようにフチの下にドロップシャドウが増えています。
hukuro_image_12
シャドウがついて、少し立体感が出ました。
フチ+シャドウ、完成です!
hukuro_image_13

レベル3:グラデ塗り

塗りをグラデーションにすると光沢感が加わります。
普通の赤から少し濃い赤へ、ぐらいのさりげないグラデーションだと高級な感じになります。
間に白を挟んでコントラストを高めにするとメタリックになります。
今回は上がちょっと白で、赤から濃い赤へのグラデーションにしてみました。
hukuro_image_14
できました、インパクトが増しましたね。
フチ+シャドウ+グラデ塗り 完成です!
hukuro_image_15

レベル4:外フチ

フチ文字に、さらに外フチを付けていきます。
一番下に新規線を追加し、黄色の太めの線に設定します。
バランスを見て、さっきの白フチは少し細く、シャドウもちょっと控えめに調整し直しました。
hukuro_image_16
こんな感じに、二段のフチ付き文字になりました。
フチ+シャドウ+ グラデ塗り+外フチ 完成です!
hukuro_image_17

レベル5:外フチグラデ+ 細フチ

どんどんいきましょう。
黄色だった部分をメタリックなグラデーションにし、さらに細フチをつけます。
hukuro_image_18
かなり派手になってきました。
フチ+シャドウ+ グラデ塗り+外フチグラデ+ 細フチ 完成です!
hukuro_image_19

レベル6:くっきりシャドウ

さらに厚みをつけていきましょう。
ドロップシャドウを追加し、「ぼかし」の数値を0pxに設定します。
hukuro_image_20
すると、くっきりした影がつきます。
かなり押し出しが強くなってきました。
フチ+シャドウ+ グラデ塗り+外フチグラデ+ 細フチ+くっきりシャドウ 完成です!
hukuro_image_21
これだけのことが文字をアウトライン化せずに実現できるなんて、良い時代になりましたね。
Adobeさんに感謝です。

レベル7:文字回転

文字タッチツールで文字を回転させましょう。
ツールパレットでテキストツールを長押しするとでてきます。
hukuro_image_22
文字をクリックするとバウンディングボックスのような枠がでてきます。
これを操作して拡大縮小、移動、回転ができます。
回転は、中央上の白ポチをドラッグすればOK。
hukuro_image_23
右左にリズムよく回転させましょう。
フチ+シャドウ+ グラデ塗り+外フチグラデ+ 細フチ+くっきりシャドウ +文字回転 完成です!
hukuro_image_24

おまけ レベル8:キラキラ

フチとは関係ないですが、ここまでやるとキラキラさせたくなりませんか。
アピアランスではなく、完全手作業で白丸と円形グラデ丸を配置しました。
おつかれさまでした、これで完成です!
hukuro_image_25

これからの季節、クリスマスやお正月の売出しに、バナーやLP制作・チラシなどに役立てば幸いです。
カードゲーム風の加工などにも使えるかもですね。

それではまた〜。

■この記事を書いた人 Tantan(デザイナー)

18歳まで広島育ち。大阪・東京でデザインの経験を積み、先日広島にUターンしてきました。糖質制限を実践中で冷凍庫には牛肉を常備。最近気になるキーワードは「ミニマリスト」。でも家の中を散らかしまくる2児の子育てに疲労困憊。

関連記事

  1. japanese-flower-tutorial-title-8 Illustratorチュートリアル 和風「ねじり梅」の描き方
  2. blog_image_concrete5 CMS concrete5について特徴や強みをご紹介
  3. how-to-capture fullpage screen captureで邪魔な固定表示を…
  4. blog image-illustrator-pentool ペンツールでベジェ曲線を練習するための初心者向けトレース素材画像…
  5. Hirofuro-logo-8 ヒロフロステッカーができるまで。
  6. blog_gif-01 GIFアニメで「スットントン」の動きを作る!
  7. shortcut_repeat-copy2 IllustratorのショートカットコンボをPhotoshop…
  8. hirofuro-eyecatch-8 ヒロフロデザイン部『webデザインの情報交換会』4/1開催します…

最近の記事

  1. 吹き出しの作り方タイトル画像 いろいろな種類の吹き出しフラッシュ・ベタフラ・叫びや雲形など
  2. 吹き出しの作り方タイトル画像 いろいろな種類の吹き出しフラッシュ・ベタフラ・叫びや雲形など
  3. 吹き出しの作り方タイトル画像 いろいろな種類の吹き出しフラッシュ・ベタフラ・叫びや雲形など
  4. 吹き出しの作り方タイトル画像 いろいろな種類の吹き出しフラッシュ・ベタフラ・叫びや雲形など
  5. lig_10
PAGE TOP