今回は、PhotoshopとIllustratorを組み合わせて使ってバナーを作り方をお伝えします！
この記事を書いているのが9月ということもあり、テーマを【ハロウィン】としてバナーを作成していきたいと思います。ハロウィン以外でもバナーを作る際に使えるテクニックを書いていますので、是非参考にしてみてくださいね。
今回のテーマは【ハロウィン】
基本的にPhotoshopでレイアウトやデザインを行い、Illustratorではイラストやタイトル文字（HALLOWEEN）の加工・作成を行い、組み合わせて作成しています。
タイトル文字のHALLOWEENという文字は、ハロウィンの少し怖い雰囲気を出すために汗や血などが垂れているように作成していますが、Photoshopだけでは表現しずらいので、Illustratorを使用しています。
「Photoshop＝レイアウト、Illustrator＝パーツ作成」というように考えてもらえたらOKです！
イラストも今回はフリー素材を使用しています（後ほどご紹介）。
ハロウィンバナーの参考を探す
まずは、類似のバナーがどのようなデザインなのか、配色はどんななのか、書体はなにを使っているのか、を参考デザインをたくさん見てインプットしていきます。
pinterestで探してみたり、googleの画像検索で「〇〇〇〇（←イベント名） バナー」などで調べるとたくさんでてきます。
たくさん見た上である程度の共通項が見えてきます。色なら「紫、オレンジ、黒をメインの色に使っている」や、フォントなら「ゴシックよりポップ体（楽しげな雰囲気をもつ書体）を使っている」など、参考デザインの印象から共通項を探して、作成するデザインに取り込んでいきます。
参考デザインから、ヒントを得ることができるので何度も見返すように、パソコン上に保存しておくもよし、Photoshop上で作成するバナー横にアートボード上に保存しておいても良いかもしれません。
使用しているハロウィン素材
イラスト
今回バナー内で使用しているイラストは、こちらからすべて使わせていただいています！シルエット系では最強のサイトじゃないでしょうか！笑
数が豊富で、クオリティが高いシルエット素材が揃っているのでオススメです！
季節系のイラストが豊富にあります。（もちろんハロウィン系も！）
フォント
バナナスリップPlus
きずなドロップス
https://www.flopdesign.com/font7/kizunadrops-font.html
今回使用していなかったのですが、こちらもおすすめのハロウィンフォントです。
バナーの作り方・手順
twitter上で、動画をあげましたので、全体の流れはこちらを見ていただけると嬉しいです！わかりづらいと思う箇所を下記で解説します！
【Step1】全体のレイアウトを決める
先にPhotoshop上で、白と黒の配色で、文字要素だけでレイアウトを組みます。今回は２つしか文字要素が無いで、レイアウトしやすいですが、もっと多くの文字要素が合ったとしても、まずは文字だけでレイアウトを決めていきます。
白黒にするのは、色が入ることで余計なところまで考えが広がってしまうので、最初の手順としてはレイアウトを考えるところなので、カラーは白と黒のみで行ったほうが良いです！
最終的に微調整などを行うので、きっちりレイアウトしなくてもOKです！「ここにはこの要素を入れよう」「一番目立たせたい文字要素は大きくしておこう」とかざっくり考えておいて良いです。
【Step2】文字を加工・装飾する
次にIllustratorに移動です！
（動画内では、Illustratorの画面で文字を打ち込み［HALLOWEEN］→円形のパスに沿うように文字→アウトライン→文字の加工という工程をしています）
タイトルのHALLOWEENの文字をハロウィンの怖い雰囲気を演出するために汗や血などが垂れているように加工しています。
垂れているようにするには、Illustratorの【ワープツール】を使用します。（Illustratorの左メニューからワープツールを選択。表示になかったら左メニュー下にある三点リーダから【ツールバーを編集…】から選択すると表示されるようになります）
ワープツールのオプション設定を上記画像のように設定し、文字を上から下にドラックしながら、垂れ具合を作っています！
血や汗が垂れてるデザイン演出ではよく使うかなと思うので、ハロウィン以外でも使える機能です！
Illustrator上で、文字の加工ができたら【オブジェクトを選択しコピー】Photoshop上に持っていき、貼り付けることでPhotoshop↔Illustrator上で連携することができます。
【Step3】カラー・配色を決めていく
デザイン着手前に、バナーの参考をいくつか探したと思います。その参考デザインから配色を真似していきます。
色を入れたことによって文字の可読性（＝文字の読みやすさ）が弱くなってしまうことがあります。
その場合は、シャドウを入れてみる、フチを入れてみる、色を少し変えてみるなど調整していきましょう。
同時に、楽しい雰囲気を演出する→文字を動きを出してみるなどの工夫もできたらGOODです！
【Step4】イラストを追加する
上記でご紹介したイラストをガシガシと追加していきます。（イラストはIllustratorの形式なので、Illustratorでイラストをコピー→Photoshopで貼り付け、で使用してくださいね。）
ハロウィンなどの季節を感じるイベントのバナーは、イラストなどの装飾によって、季節感を演出しやすいので、素材などを用いて作ってみると良いですよ！
【Step5】最終調整をして、完成
最終的な要素をすべて配置し終えたら、最後にレイアウトを微調整して完成です！
