アイキャッチ作成のコツ | デザイナーじゃないあなた向け
こんにちは、デザイナーのTAKUです。
さて、今回はWEBサイトなどに多く用いられるアイキャッチ画像の作り方について解説します。
デザインのコツやテクニックについてもまとめているので、これからデザイナーを目指す人、駆け出しデザイナーの方はぜひ参考にしてみてください。
アイキャッチ画像って何でつくるの？
アイキャッチ画像を制作する上で使用するツールは大体以下の２つです。
■Photoshop(フォトショップ)
Photoshopは写真をアーティスティックに加工したり、手書きのイラストを取り入れたり、写って欲しくない電線を消したり…と様々な表現ができます。写真を多く使うバナーや切り抜きの作業が発生した時はフォトショップを使うことをお勧めします。ちなみに有料です。
■Illustrator(イラストレーター)
ほとんどのバナーはこのIllustratorで作られています。弊社でもバナー制作をする時は、ほとんどの場合がIllustratorを使用しています。バナー制作に使う人物の切り取り画像や、写真の加工は上で紹介したフォトショップで行います。レイアウト作業などにはこのillustratorが向いています。有料です。
アイキャッチ画像デザインのコツ
さて、作り方の解説に入る前にデザインする上での”心構え”をお伝えします。
✔︎綺麗な写真を使う
アイキャッチに使用する画像は綺麗で美しい素材を選びます。美しい写真ってどこで探せばいいの…?という方には「unsplash」がオススメ。
📱「unspash」
Unsplashは無料かつ商用利用も可能な最強の写真素材サイトです。
✔︎文字を目立たせる工夫をする
一般的なバナーには文字が絶対に入るため、文字が見にくくなるような写真の使用は避けます。
どうしても複雑な写真を使いたい時は、文字にシャドーをつける、太字にする等のひと工夫を加えましょう。
✔︎レイアウトに注意する
レイアウトには決まりはありませんが、余白のバランスは揃えてパッと見たときの読みやすさを意識して制作します。
✔︎行き詰まったら…
制作に行き詰まったら、ピンタレストで画像検索。
📱「Pinterest」https://unsplash.com/
例えば、飲食店のフライヤー制作に行き詰まったら「飲食店 チラシ」などで検索してみましょう。
流行りのデザインが多く出てきます。
アイキャッチ画像の作り方
さて、実制作。
今回使用する素材は、弊社スタッフのイッセー、渋谷っぽい街並み、「私は強い」の３種で一枚のアイキャッチを制作します。
✔︎レイアウトを考えてみる
この３つの要素を使ったときに作れるレイアウトのパターンを複数考えてみます。
✔︎レイアウトを決める
さて、レイアウトが決まったら細部にデザインを施します。
✔︎画像の加工(Photoshop)
背景画像の色味が強く、文字が乗りずらそうだったため背景の加工を行いました。
加工の具体的な内容は、彩度を落とす→色味を暗く→アンシャープマスクでキリッとした写真に。
✔︎人物画像の加工(Photoshop)
そのまま人物画像を使うといかにも乗せた感が出てしまうので一工夫加えます。全レイヤーを結合させた上で色味の調整を行うと馴染むことが多いです。
どうでしょう。それっぽくなってきたのではないでしょうか。
次は文字を配置します。
配置する文字は「私は強い」です。決まったルールはありませんが、小さい文字を使うときは広めに文字のマージンをとり、大きめの文字でダイナミックに見せたい時は太文字で文字マージンを詰めると綺麗にまとまりが出ます。
文字周りに装飾を施します。
特に見せたい文字などの周りに装飾を施すことで、よりインパクトや、視線の注目を集めることができます。装飾は大事ですが、あくまで文字が見にくくならない程度に。
一番の上の白文字には影をつけ、下には青いぼかしを「ティザ合成」でのせてます。
ここまでくるとほとんど完成ですが少し寂しさがあるので炎を足してみましょう！！！！
炎を追加しました。
少し見辛さがあるものの、目立つバナーとしては良いのではないでしょうか。炎の画像素材はシャッターストックから拝借し、乗算やスクリーンなどを使い合わせています。
シャッターストックは有料ですが、画像素材のバリエーションが豊富です(有料です)
📱「Shutterstock」https://unsplash.com/
✔︎最後の微調整
最後は文字位置の調整や、色味の調整を行います。バナーっぽくするためにタイトル的な物を付け加えました。筋トレブログのアイキャッチに使えそうです。
冒頭で、イラストレーターでほとんど制作する、とお伝えしましたがこのバナーのようにシャドーや光彩などの装飾を多く使う場合はフォトショップの方が向いています。逆にフラットなデザインでバナー制作をする場合はイラストレーターのみで完結する場合もあります。
次回「~私は強いISSEY SEKIZAWAは本当に強いのか~」をお届けします。
乞うご期待。
過去執筆記事
ホームページってどんな種類あるの？それぞれの用途と目的を解説