2019.05.08【新聞の作り方】スポーツ紙が使うイラストレーター見出しツイート49シェアはてブ1LINEPocket10スポーツ新聞で見かける極太フォントのド派手な見出し。「あれはどのようにして作られているのか?」と気になる方もいるでしょう。これは業界では「凸版(トッパン)見出し」と呼ばれ、現場ではAdobe社のドローイングソフト「イラストレーター(illustrator、以下イラレ)」で作るのが一般的です。以下の説明は全てIllustratorCC(2018年7月現在)を使用しています。バージョンが異なると、仕様が若干異なりますのでご注意ください。作り方をざっくり説明すると以下の通りです。スポーツ紙の簡単な凸版見出しの制作方法イラレで極太フォントを選択して文字を打ち込む文字のアピアランスで新規線を追加してフチを作る新規線の太さを変えたり、色を変えていくここまでは他のサイトでも書かれているありきたりな内容ですが、さらにスポーツ新聞のクオリティに近づくにはもう一工夫が必要。見出しに影をつけたり、パスのオフセットでフチを作ったりしてみると、ワンランク上の凸版ができます。最初にイラレで見出しにしたい文字を打ちます。当サイトは結婚新聞を作る機会が多いので「結婚」と縦文字ツールで打ってみました。スポーツ新聞の見出しはできるだけ太めのゴシックフォントを使いましょう。幅が細いフォントをメーン見出しに使うと、貧相な印象を与えてしまいます。明朝体の凸版見出しはどんな時に使われる?スポーツ新聞で明朝体の見出しが使われるのは、人が亡くなった時(訃報)や敗北感を出したい場合です。文字の細さが悲壮感を表現してくれます。文字を打っただけの状態スポーツ紙の見出しは見た目が横につぶれているのが一般的なので、ただ文字を打ち込んだだけでは縦に長すぎます。そこで、80%程度まで縦の幅をギュッと圧縮しましょう。縦長でのっぽな凸版見出しは、いかにも素人が作ったような弱々しい印象を与えます。縦を潰すとプロっぽさが出ますよ続いて、文字の塗りを変更します。今回はおめでたい雰囲気を出すためにマゼンタ20%、イエロー80%にしてみました(イエロー100%は黄色すぎて見えにくいためです)。文字の土台となる塗りを加える新規線を二重、三重に追加してスポーツ新聞らしくここから外に新規線を追加していきたいのですが、実はこの状態では新規線を追加しても、線は内側に塗られていく一方です。アピアランスパネルはレイヤーのような構造になっているので、メーンとなる塗りの色を一番上にして、そこから下に新規線を追加していかなければならないのですが、現状では追加した線を下のレイヤーへとドラッグしようとしても落ちてくれません。文字にアウトラインをかけるこの問題を解決するには、文字にアウトラインをかける必要があります。アウトライン化すればいかなる環境下においても作成した文字が崩れない(文字化けしない)効果があり、アピアランスパネルの効果を自由に使うにはアウトラインは必ずかける必要があります。文字をアウトライン化したことによって、アピアランスパネルで新規線を塗りの下に置くことができるようになりました。新規線の追加はアピアランスパネルの最下部左にある四角の枠のアイコンをクリックすれば追加されます。黄色の次となる新規線は赤色に設定。新規線の太さをどんどん大きくしていき、適度な太さになるまで数値を上げていきましょう。今度はもう一度新規線を追加します。白色の線を新規追加すると、一段上にある赤色の線と同じ幅の太さの線ができあがります。これでは見た目に変化はないので、上の赤線よりもより太くはみ出るように線を太くしていく必要があります。同じ幅では上の線に隠れた状態となっているので、一段上の赤色よりも線を太くする必要があるハイレベルなスポーツ新聞見出しにするため影をつけるこの段階でもスポーツ新聞の見出しの雰囲気は十分出ていますが、最近のスポーツ新聞はさらに工夫を重ねています。それは先にも述べた通り、影を追加しているのです。このタイプの見出しでは黄色と赤色の間に影を追加することで、文字がより立体的でゴージャスな印象となります。パスの変形で影をほんの少しずらすこの影はどうつけるのかというと、黒い新規線を黄色の塗りと赤色の間に追加するのです。これでは文字全体を覆うように影ができてしまうため、影のような雰囲気は出ません。黒色の新規線を追加したものの、文字の全体を覆ってしまい、影のような雰囲気がでない影っぽい雰囲気を出すには、黒色の新規線が斜め右下にずれてくれないと立体的な効果が出ないのです。そこで、使いたいテクニックは「パスの変形」です。追加した黒色の線を選択した状態で、下にある「fx」と書かれた新規効果の追加メニューから「効果→パスの変形→変形」を適用させましょう。線を移動させるために変形効果の調整画面ですることは、「移動」の水平方向や垂直方向の数値を変えることです。今回の場合、ほんの少しだけ右下に移動させてみました。パスの変形から「変形」を選ぶと出てくる調整画面パスの変形効果を使って、黒色の新規線を少しだけずらしました。先ほどの見出しと比べると、右下に黒線が移動したことで立体感が出てきたのがわかるでしょうか。黒線が左側にほんの少し残っていますね。そこは、パスの変形効果画面で移動幅を微調整することになります。変形効果で新規線を移動させた後の見出し下の画像はパスの変形効果でさらに移動の微調整を加えた後の見出しです。黒い新規線がバランスよく配置されたことで、影としての機能を果たしていますね。影となる黒色はほんのちょっとだけはみ出させるのがポイントです。塗り色をグラデーションにして見出しを豪華にこれでスポーツ新聞の見出しが完成!...の前に、今回は「結婚見出し」なのでもう少しゴージャス感を出してみましょう。最初に設定したマゼンタ20%、イエロー80%の黄色い塗りをグラデーションにして、輝いている雰囲気を出してみてはいかがでしょうか。ウインドウからグラデーションパネルを引っ張り出しておき、黄色の塗りをクリックしてからグラデーションパネルの色をクリックします。デフォルトでは白黒のグラデーションなので、ここから色を設定します。今回は、左端と右端はイエロー(Y100%)、中央には山吹色(M35%、Y85%)を追加しました。デフォルトでは中央の分岐色は一つしかないのですが、グラデーションのスライダーがある付近でalt(option)キーを押しながらクリックすると色が追加されます。これで完成です!黄色い塗りをグラデーションに変えることでよりゴージャスさを出すことができる追記:2017年4月23日スポーツ新聞見出しには複合パスを必ずかけよう今まで紹介した見出しには、フチを足す前に「複合パス(⌘+8)」がかけられていませんでしたが、必ずかけるようにしてください。フチを足していくと下の文字が上の文字にかぶってしまうからです。複合パスをかけてからフチを足すと、文字同士がくっついてもかぶることはありません。日刊スポーツのロゴを作ってみた際にも文字同士がかぶらないようにこの手法をつかっています。複合パスをかけると塗りの色が透明になる複合パスをかけると、一度文字の塗り色が透明になってしまうので、もう一度塗り直しましょう。文字を打ち込んだら、塗りの色をつける前に複合パスをかけるのがベターです。パスのオフセットでスポーツ新聞見出しを作る新規線でフチをつける以外にも、パスのオフセットを使ってフチを足す方法を発見しました。工程としてはアウトライン、複合パスをかけるところまでは同じですが、ここから「オブジェクト→パス→パスのオフセット」を選択すると、塗りが外側に足されたオフセット文字ができあがります。オフセット文字は、最初に打ち込んだ文字レイヤーの下にできあがり、それぞれが独立している性質を持ち合わせています。オフセット文字をつくった直後は文字と同じ色をしているので、フチだけを選択して色をつけましょう。フチを足すには、オフセット文字を選択してパスのオフセットを適用するだけです。フチの幅が大きくなりすぎないようにバランスよくつくりましょう。パスのオフセットは「オブジェクト」から作ろうパスのオフセットは「効果」メニューにもありますが、「オブジェクト」メニューから適用させないと正しくつくれません。パスのオフセットで見出しは作れるまとめここで紹介してきたスポーツ新聞の見出しの作り方は、全てスポーツ新聞の編集現場で使われている技術ばかりです。最後にもう一度、他人と差がつくハイレベルなスポーツ紙の見出しを作るためのコツをおさらいしましょう。新規線を追加する方法以外にパスのオフセットでも作れる文字同士のフチがかぶらないよう複合パスをかける影をつくる場合は内側のパスを「変形」で少しだけずらす文字の色はグラデーションをかけるとよりゴージャスになる見出しの技術は日進月歩で、トレンドもどんどん変化しています。今後も、いろいろな見出しを紹介してゆけたらいいですね。共有:TwitterIllustrator新聞制作illustratorおすすめ結婚新聞この記事が気に入ったらいいねしよう!最新記事をお届けします。コメントをキャンセルメールアドレスが公開されることはありません。コメントデータの処理方法の詳細はこちらをご覧ください。【Photoshop】粒状フィルターで作るかすれロゴRECOMMENDこちらの記事も人気です。新聞制作2017.5.4【紙面に学ぶ】新聞見出しのバリエーション(プロ野球編)新聞制作2016.2.7新聞見出しをつけるコツを伝授photoshop2016.4.5意外と知らないphotoshop「明るさ・コントラストの効果」photoshop2016.3.12photoshopでレトロ調の写真に加工(前編)photoshop2016.3.7photoshopで多重露光写真を作るphotoshop2016.3.20photoshopで肌を白く輝いた肌に修正ABOUTこの記事をかいた人kimmy新聞社の記者をしています。仲間との起業を夢見て、これまでに学んできたノウハウを記しておきます。現在、主に結婚新聞や企業・団体向けの広報紙を制作していますが「こんな紙面をつくってほしい」とのご要望にも随時お応えしています。(7)プロフィール「既存業者の作る新聞って、すごくかっこ悪い」そんな思いから、某新聞社に勤める記者と編集者が「本物の新聞の作り方」をこっそり書いています。近い将来の起業を兼ねて、格安で結婚新聞などの紙面制作を請け負っています。いままでに作った紙面の一部も紹介しています(作品例へ)。