スポンサーリンク


スポーツ新聞によくある極太フォントの目を引く見出し。「あれはどのようにして作られているのか?」と気になる方もいるでしょう。これは業界では「凸版(トッパン)見出し」と呼ばれ、現場ではAdobe社のソフト「イラストレーター(Illustrator、以下イラレ)」で作っています。

作り方はざっくり言うと以下の通りです。

  1. イラレで極太フォントを選択して文字を打ち込む
  2. 文字のアピアランスで新規線を追加してフチを作る
  3. 新規線の太さを変えたり、色を変えていく

ここまでは他のサイトでも書かれているありきたりな内容ですが、さらにスポーツ新聞のクオリティに近づくにはもう一工夫が必要。影をつけたり、パスのオフセットでフチを作ったりしてみると、ワンランク上の凸版ができます。

使用するテクニック:文字のアウトライン化、新規線の追加、パスの変形、塗り色のグラデーション

スポーツ新聞見出しのベースとなる極太フォント選択

最初にイラレで見出しにしたい文字を打ちます。当サイトは結婚新聞を作る機会が多いので「結婚」と縦文字ツールで打ってみました。スポーツ新聞の見出しはできるだけ太めのゴシックフォントを使いましょう。幅が細いフォントをメーン見出しに使うと、貧相な印象を与えてしまいます。

明朝体の凸版見出しはどんな時に使われる?

スポーツ新聞で明朝体の見出しが使われるのは、人が亡くなった時や敗北感を出したい場合です

文字を打っただけの状態

文字を打っただけの状態

スポーツ紙の見出しは見た目が横につぶれているのが一般的なので、ただ文字を打ち込んだだけでは縦に長すぎます。そこで、80%程度まで縦をギュッと圧縮しましょう。

続いて黒色から塗りを変更します。今回はおめでたい雰囲気を出すためにマゼンタ20%、イエロー80%にしてみました(イエロー100%は黄色すぎて見えにくいためです)。

文字の土台となる塗りを加える

文字の土台となる塗りを加える

新規線を二重、三重に追加してスポーツ新聞らしく

ここから外に新規線を追加していきたいのですが、実はこの状態では新規線を追加しても、線は内側に塗られていく一方です。

アピアランスパネルはレイヤーのような構造になっているので、塗りを一番上にして、そこから下に新規線を追加していかなければならないのですが、追加した線を下のレイヤーへとドラッグしようとしても落ちてくれません。

この問題を解決するには、文字にアウトラインをかける必要があります。アウトライン化すればいかなる環境下においても作成した文字が崩れない(文字化けしない)効果がありますが、アピアランスパネルを自由に使うためにはアウトラインは必ずかける必要があります。

文字にアウトラインをかける

アピアランスを追加するため文字にアウトラインをかける

文字をアウトライン化したことによって、アピアランスパネルで線を塗りの下に置くことができるようになりました。新規線の追加はアピアランスパネルの最下部にある四角の枠のアイコンをクリックすれば追加されます。

黄色の次となる新規線は赤に設定。新規線の太さをどんどん大きくしていき、適度な太さになるまで上げていきましょう。

塗りに新規線を追加

塗りに新規線を追加した状態

今度はもう一度新規線を追加します。白色の線を新規追加すると、一段上にある赤色の線と同じ幅の太さの線ができあがります。ただ、これでは見た目に変化はないので、上の赤線よりもより太くはみ出るように線を太くしていく必要があります

白色の新規線を追加

白色の新規線を追加。同じ幅では上の線に隠れた状態となっているので、一段上の赤色よりも線を太くする必要がある

ハイレベルなスポーツ新聞見出しにするため影をつける

この段階でもスポーツ新聞の見出しの雰囲気は十分出ていますが、最近のスポーツ新聞はさらに工夫を重ねています。それは先にも述べた通り、影を追加しているのです。このタイプの見出しでは黄色と赤色の間に影を追加することで、文字がより立体的でゴージャスな印象となります

この影はどうつけるのかといえば、黒い新規線を黄色の塗りと赤色の間に追加します。しかし、これでは文字全体を覆うように影ができてしまうため、影のような雰囲気は出ません。

黒色の新規線を追加

黒色の新規線を追加したものの、文字の全体を覆ってしまい、影のような雰囲気がでない

影っぽい雰囲気を出すには、黒色の新規線が斜め右下にずれてくれないと立体的な効果が出ないのです。

スポンサーリンク

そこで、使いたいテクニックは「パスの変形」です。メニュー「効果→パスの変形→変形」を適用させましょう。

線を移動させるために変形効果の調整画面ですることは、「移動」の水平方向や垂直方向の数値を変えることです。今回の場合、ほんの少しだけ右下に移動させればよいので、ほんの少し右にずらしてみました。

変形効果の調整画面

パスの変形から「変形」を選ぶと出てくる調整画面

パスの変形効果を使って、黒色の新規線を少しだけずらしました。先ほどの見出しと比べると、右下に黒線が移動したことで立体感が出てきたのがわかるでしょうか。ただ、まだ黒線が左側にほんの少し残っていますね。そこは、パスの変形効果画面で移動幅を微調整することになります。

変形効果で新規線を移動

変形効果で新規線を移動させた後の見出し

下の画像はパスの変形効果でさらに移動の微調整を加えた後の見出しです。黒い新規線がバランスよく配置されたことで、影としての機能を果たしていますね。影となる黒色はほんのちょっとだけはみ出させるのがポイントです

パスの変形で移動幅を微調整

パスの変形効果で移動幅を微調整した状態

塗り色をグラデーションにしてスポーツ新聞を豪華に

これでスポーツ新聞の見出しが完成!…の前に、今回は「結婚見出し」なのでもう少しゴージャス感を出してみましょう。最初に設定したマゼンタ20%、イエロー80%の黄色い塗りをグラデーションにして、輝いている雰囲気を出してみてはいかがでしょうか。

あらかじめウインドウからグラデーションパネルを引っ張り出しておき、黄色の塗りをクリックしてからグラデーションパネルの色をクリックします。デフォルトでは白黒のグラデーションなので、ここから色を設定します。今回は、左端と右端はイエロー(Y100%)、中央には山吹色(M35%、Y85%)を追加しました。デフォルトでは中央の分岐色は一つしかないのですが、グラデーションのスライダーがある付近でalt(option)キーを押しながらクリックすると色が追加されます。これで完成です。

見出しの塗りをグラデーション化

黄色い塗りをグラデーションに変えることでよりゴージャスさを出すことができる

追記:2017年4月23日

スポーツ新聞見出しには複合パスを必ずかけよう

記事の作成用に作った見出しには、フチを足す前に「複合パス(⌘+8)」がかけられていませんでしたが、必ずかけるようにしてください。

なぜなら、フチを足していくと下の文字が上の文字にかぶってきてしまうからです。

複合パスをかけてからフチを足すと、文字同士がくっついてもかぶることはありません。日刊スポーツのロゴを作った際にも文字同士がかぶらないようにこの手法をつかっています。

複合パスをかけると、一度文字の塗り色が透明になってしまうので、もう一度塗り直しましょう。

複合パスのあり、なしを比較した図

複合パスのあり、なしを比較した図

パスのオフセットでスポーツ新聞見出しを作る

新規線でフチをつける以外にも、パスのオフセットを使ってフチを足す方法を発見しました。

工程としてはアウトライン、複合パスをかけるところまでは同じですが、ここから「オブジェクト→パス→パスのオフセット」を選択すると、塗りが外側に足されたオフセット文字ができあがります。

オフセット文字は、文字レイヤーの下にできあがり、それぞれが独立している性質を持ち合わせています。オフセット文字をつくった直後は文字と同じ色をしているので、フチだけを選択して色をつけてあげましょう。

さらにフチを足すには、オフセット文字にパスのオフセットを適用するだけです。フチの幅が大きくなりすぎないようにバランスよくつくりましょう。

※ちなみに、パスのオフセットは「効果」メニューにもありますが、「オブジェクト」メニューから適用させないと正しくつくれません。

パスのオフセット

パスのオフセットで見出しは作れる

まとめ

ここで紹介してきたスポーツ新聞の見出しの作り方は、全てスポーツ新聞社の現場で使われている技術ばかりです。最後にもう一度、他人と差がつくハイレベルなスポーツ紙の見出しを作るためのコツをおさらいしよう。

  • 新規線を追加する方法以外にもパスのオフセットでも作れる
  • 文字同士のフチがかぶらないよう複合パスをかける
  • 内側のパスを「変形」で少しずらして影をつくる
  • 文字の色はグラデーションをかけるとゴージャスになる

スポンサーリンク


黄色い塗りをグラデーションに変えることでよりゴージャスさを出すことができる

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

ABOUTこの記事をかいた人

新聞社の記者をしています。仲間との起業を夢見て、これまでに学んできたノウハウを記しておきます。現在、主に結婚新聞や企業・団体向けの広報紙を制作していますが「こんな紙面をつくってほしい」とのご要望にも随時お応えしています。