この記事では、タイトルロゴの文字装飾パターン を紹介します。
チラシ等の印刷物やホームページ等のWEB制作では、 タイトルロゴ・見出し・アイキャッチを作ることが多くなります。
言葉は良くないですが、とりあえず装飾(デザイン)された文字を使いたい時もあると思います。
そんな時に役立つのが今回紹介する 使いまわせる文字装飾パターンです。
ここでは、illustratorの基本的な機能を使ったタイトルロゴのパターンを5つ紹介します。
この記事の目次
使いまわせる！タイトルロゴパターン
次のタイトルロゴに装飾を加える時、どのようにデザインしますか？
タイトルロゴや見出し、アイキャッチは、できるだけ目立つデザインにしたいところ。
でも、毎回毎回違うデザインを考えて作るのも大変ですよね？
特にチラシなどの印刷物は作成スパンが短いため、毎回新しいデザインで作るのは難しいと思います。
ボク自身、ブログのアイキャッチに使うタイトル文字、チラシの見出しタイトルなど作成頻度が高いものはある程度のパターンを用意して対応しています。
今回は、その中でも再現性が高く使い回ししやすいパターンを紹介します。
- 袋文字
- パキッととしたグラデーション
- ドロップシャドウ
- 枠の中におさめる
- 罫線で囲む
文字装飾は、illustratorのアピアランス機能を使おう!
アピアランス機能が便利なのは、テキストに直接装飾できるところ。
こんな感じで設定します。
↓↓↓↓↓↓
入力したテキスト内容を変更してもアピアランスの設定も反映されます。
アピアランス設定のチェックポイント
設定したアピアランスの表示がおかしい時は次をチェックしましょう。
- 初期設定の塗りを「なし」にする
- アピアランスの順序を確認する
初期設定の塗り設定を「なし」にする
アピアランスで塗りを設定した時、うっすらと違う色が見える時があります。
こんな感じです。
↓↓↓↓↓↓
このような時は、文字ツールでテキスト全部を選択してみましょう。
アピアランスメニューに「うっすら見えている塗り」の設定がされているはずです。
塗りの設定を「なし」にしてあげれば、綺麗な表示になります。
アピアランスの順序を確認する
次もアピアランス設定でよくあることです。
こんな感じになったことありませんか？
↓↓↓↓↓↓
塗り部分が極端に細く見えているときは、アピアランスの順序がおかしくなっています。
順序はメニュー内でドラッグすることで移動可能です。
表示順序はメニュー内の上から最前面となります。
では、アピアランス機能を使って文字装飾をしていきましょう!
① 袋文字を使ったタイトルロゴ
折込みチラシのタイトルで良く使う文字装飾が袋文字です。
フチ取りした文字で、とりあえず目立たせる・背景上の文字の可読性を上げる などの効果があります。袋文字のフチを太くすると元気で活発なイメージになります。
袋文字の作り方
作り方は簡単です。
最初に「塗り」の赤を設定した後、「新規線を追加」して線幅6pxの白フチを付けました。
もう一度「新規線を追加」を行い、今度は11pxの黒フチをつけました。
文字とフチの色・線幅でバリエーションを作ることができますね。
袋文字のパターン
塗り・線(6px)・線(11px)のアピアランス設定です。
一例を紹介しましょう。
③の「白・赤・黄色」のパターンは可読性が低く感じますが、背景に画像がある場合、とても見やすくなります。
こんな感じです。
↓↓↓↓↓↓
タイトルロゴの場合、使用する状況(背景色、商品などのイメージ)によって、文字・線の色を変える必要があります。
ですが、先ほどの①〜④のパターンはチラシ広告には使いやすいカラーパターンです。
② パキッとしたグラデーション
タイトルにグラデーションをかけると、リッチで立体感のあるデザインになります。
アピアランスの「塗り」にグラデーションを設定しましょう。
オレンジから赤へ、なだらかに変化していますね。
オレンジと赤のグラデーションは見やすく使い勝手の良い組み合わせです。
今回紹介するのは、もう一工夫したグラデーションです。
パキッとしたグラデーションの作り方
塗りにグラデーションを設定するのは同じですが、グラデーションの変化を極端にしています。
作例は、グラデーションバーの49%の位置に暗い赤(ロゴの下半分)、50%に明るい赤(上半分)を設定しています。
要は、グラデーションを49%から50%の狭い範囲で変化させているわけです。
暗い色と明るい色を組み合わせことで、明るい部分は光が当たったようなパキッとしたグラデーションになっています。
パキッとしたグラデーションのパターン
色の組み合わせによって、派手にもクールなイメージにもできます。
クールなパターンは袋文字の罫線を細くし、文字間隔も調整しています。
和文フォントより欧文フォントの方がハマると思います。
派手めなパターンは印刷物に使うと見栄えがします。
クールなパターンは無彩色に近いので印刷ではハッキリ印字できない可能性があります。
しかし、モニタ上では微妙な色の違いが立体感を感じさせるので、WEB用に使うと、クールなイメージのサイトに合います。
IT、コンサル系で見たことありませんか？
罫線が細く、無彩色を使ったロゴタイトルは落ち着いた雰囲気になるわけです。
ここまでの、まとめ
illustratorのアピアランス機能を使った袋文字、グラデーションを紹介しました。
いずれも頻繁に使うテクニックなので、覚えてしまうと使い勝手が良いです。
という方もいるでしょう。
次に紹介するのが、最も簡単でデザインしたように見えるテクニック、ドロップシャドウです。
③ ドロップシャドウでタイトルロゴの雰囲気をあげる
簡単な設定で立体感のあるデザインにできるのが、ドロップシャドウです。
Illustratorでは、メニューバーから「効果」→「ドロップシャドウ」を選択します。
設定するのは主に4項目です。
- 不透明度…シャドウの透明度。100%の影は透明効果のない影が付きます。ボクは30～70%くらいで使うことが多いですね。
- X軸オフセット、Y軸オフセット…影の方向です。数字が大きくすると影が伸びていきます。
- ぼかし…シャドウのぼかし幅です。
- カラー…シャドウの色です。
プレビューにチェックを入れると効果を確認しながら設定できます。
簡単ですよね。
ドロップシャドウのパターン
平面的だったこれまでのロゴに立体感が出ましたね。
基本はX軸・Y軸オフセットを設定して右下にシャドウをつけます。
③、④のようにオフセットの数値を0に設定すると、ふわっと浮いたようなシャドウが付きます。
④は白い背景に白い文字ですが、ドロップシャドウの効果で文字として読めますね。
ドロップシャドウは設定も簡単でデザインした風な印象があります。
ですが、それだけに頼ると「何も考えていない」のがバレますので、使うポイントを考えましょうね。
④ 枠の中におさめる
全体のバランスを整えたり、イメージを追加するのにおすすめなのが、枠の中におさめる方法です。
長方形・正方形・楕円・正円・三角形、多角形を使い、文字のバランスを考えて配置します。
扱いやすいのは、長方形・楕円・正方形・正円ですね。
文字の配置位置は、枠の中央が収めやすいです。
⑤ 罫線で囲むタイトルロゴのパターン
ロゴ全体を罫線で囲むと、落ち着いたイメージになります。
背景色をつけた枠と罫線を組み合わせるパターンもあります。
罫線にドロップシャドウを加えると、立体感のあるリッチな雰囲気になります。
背景や罫線をつけることで、文字と罫線、全体の枠のスペース(空間)を意識したデザインができます。
言葉にすると少し難しいですが、感覚的にみなさんも使っているテクニックでしょう。
最後に、今回のまとめ
illustratorの基本的な機能を使ったタイトルロゴや見出しのパターンを紹介しました。
元気で活発なイメージにしたい時は、
- 文字カラーを赤やオレンジにする
- 袋文字のフチを太くする
大人しい、落ち着いたイメージにしたい時は、
- 袋文字のフチを細くする。またはフチ取りしない
- 彩度の低い色でグラデーションをかける
- 全体を罫線で囲む
- ドロップシャドウかける
といった感じが使いやすいでしょう。
今回紹介したパターンと 文字だけで簡単に作るロゴデザイン 「デザインテンプレート」を公開!! のデザインテンプレートと組み合わせることで、使い勝手の良いデザインパターンをもつことができます。
デザインのコツ、アイデア方法などロゴマーク作成のコツをまとめました。
それでは、今回はこのへんで。
こんにちは！
静岡県沼津市在住、ブロガー&デザイナーのyama(@ひとり広報)です。