ブログ

フチ付き文字の作り方-チラシや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. m-field_tokyooffice04 広島オフィスメンバーがはじめてエム・フィールド本社におじゃましま…
  2. 用語辞典イラスト エム・フィールド広島オフィスの日常
  3. webdesign IllustratorとPhotoshop カンプ制作ソフトにつ…
  4. 20161214_4864 タコパ忘年会をやったらミンティアが殺人的だった
  5. mitene566ec83f-5ffe-402c-b7ff-dd34677a2c6b 広島で最先端のアートに触れる「チームラボアイランド」へ行ってきま…
  6. blog_gif-01 エム・フィールド広島オフィスの福利厚生事情
  7. carp3 【カープ】#3 広島、丸3打点の活躍でセリーグ最上位の3位に!
  8. carp_1-1 【カープ】#2 広島、5月5日以来23日ぶり首位奪回!!

最近の記事

  1. IMG_1781
  2. Hirofuro-logo-8
  3. eyecatch7-1
  4. SEO-eyecatch
  5. wtm100
PAGE TOP