トレース結果
Size：660 × 300
Tool：Pinterest│illustrator│Photoshop
Font：AR P丸ゴシック体M│HGP行書体│HG創英ﾌﾟﾚｾﾞﾝｽEB│HGP明朝B│HGS教科書体
Color：#000(ブラック)│#fff(ホワイト)│＃C5547E(ピンク)
前回はイラレのみでの作成だったので、今回はフォトショップの切り抜きの勉強も兼ねて、こちらのバナーに。あと野菜がおいしそうだったから。食べ物系のバナー見てるとお腹空いてくる。(腹ペコか)
バナー考察
- 野菜メインの料理画像と、すぐ目に飛び込む大きい文字で伝えたいことがすぐに伝わる。
- 左右のメイン料理を最前面にはみ出すように配置することで立体感が出る。さらに影を作ることで切り抜き画像をなじませている。
- 全体的に明るく鮮やかな写真を使用することで、野菜の瑞々しさが強調され「シズル感」のある作りに。
学んだこと
シズル感。
魅力的なバナーを作るためには「シズル感」が大事。
シズル感とは
英語の擬音語で､肉を焼く時のジュージューいう音のことをシズル(sizzle)という。そこから転じて人の感覚を刺激する感じのことを指し､広告やデザインの世界では、瑞々しさというような意味で使われたりする。
出典：weblio辞典
私はシズル感というのは料理だけに使うと思っていましたが、そうではないらしい。説明の通り、「人の感覚を刺激する感じ」のことを指すので、味覚、触覚、聴覚、嗅覚、視覚の五感全てに訴えかけるシズル感が存在します。端的に言うと、お客さんが商品を購入したいと思う理由になるもののこと。今回は料理に関してのバナーでしたが、すべての商品に「シズル」が存在するのなら、それを意識したデザイン作りは考えなくてはならないポイントだなと学びました。
ジグザグ(波状)を作る方法【illastorator操作】
①直線ツールで直線を描くor長方形ツールで四角を作る
②パスを選択した状態で「効果」→「パスの変形」→「ジグザグ」でダイアログボックスを表示する
③ ダイアログの「滑らかに」にチェックを入れると「波線」に、「直線的に」にチェックを入れると「ジグザグ」に。プレビューにチェックを入れ、様子を確認をしながら「大きさ」と「折りかえし」で調整。
画像切り抜き、背景を透明に【Photoshop操作】
①クイック選択ツールで大まかに切り抜きたい画像の選択範囲をドラッグ。
②選択範囲の調整。対象物を正しく選択できているか、拡大して確認。不要な箇所が選択されている場合は「現在の選択範囲から一部削除」を、必要箇所を選ぶ場合は「選択範囲に追加」を。ブラシピッカーで適宜ブラシのサイズを調整して微調整。
③「選択範囲」→「選択範囲を反転」またはショートカットキー<Shift>＋<Ctrl>＋<I>で選択した範囲を反転させる。
④「Delete」キーで背景を削除。塗りつぶしのダイアログボックスが表示されるので「OK」をクリック。切り抜き完了。「選択範囲」→「選択範囲の解除」またはショートカットキー<ctrl>+<D>で選択範囲を解除。
⑤背景を透明に。今回はマジック消しゴムツールを使用。(マジック消しゴムツールは隣接する同じ色合いの範囲を一度にまとめて削除する機能なので、画像に透明にしたい部分と似たような色があると、画像も一部消えちゃいます。)
難しかった点、課題
元画像よりもトレース画像の方が暗い印象になってしまったことが反省点。写真のレタッチは課題。また左側のせいろの画像は斜めから撮影された画像を使いたかったのですが、真上からの画像を使用したのでなんだか浮いたような印象になってしまいました。写真選び大事。影って大事。
また同じようなフォントを探すために5種類のフォントを使用。１つの広告に対して使うフォントは少ない方が良いと思うので、 明朝体の使用が多いものの、使いすぎたかなと思います。次回フォントを増やしたい時は「類似のフォントを探す」「太字、大文字、斜字も試してみる」を実行したい。
photoshopの画像切り抜き方法も、もっと簡単にキレイにできる方法を試していきたいです。
