初めまして、misato です！
私はWeb&デザイン実践科の7月生です。
Photoshop初心者ですが、勉強し始めて3週間ほどで、バナーが作れるようになりました！
さて、一目見て「スタバっぽいな…」と思われたでしょうか？
実は、それを狙って制作しました。
制作する上で使用した画像や工夫点などを、出来る限り詳細に書き記していきます。
これをご覧のあなたの制作活動に役立てていただければ幸いです。
使用した画像
写真
使用した写真は、以下の３つです。
いずれも商用フリーのサイトからいただいています。
ブラシ
授業の中で全員でインストールしたブラシも使用しました。
使用したソフトウェア
今回は Adobe Photoshop のみで頑張ってみました！
Illustrator と組み合わせて使用できれば、表現の幅が広がると思ったのですが…
授業で使い終わってしまったため、ライセンス切れて使用できませんでした。
主に使用した機能は以下です。
- ぼかし（ガウス）：手前のものと奥のものをぼかすのに使用
- マスク：水しぶきとその他のものの前後関係を入れ替える（ように見せる）ために使用
- 調整レイヤー（色相・彩度）：異なる画像同士の色を揃えるのに使用
- ブラシ：水しぶきでフレッシュさを表現するために使用
- ドロップシャドウ：メニュー名（ジューシートマトサマードリンク）のテキストの視認性を上げるために使用
また、テキスト部分のフォントは以下です。
- Sisters (Three)：左上（JUICY!）と右下（日付）
- 小塚ゴシック Pr6N (B)：商品名
制作時間
素材集めも含め2～3時間程度で完成しました。
今回は「”スタバらしさ”とは何か？」を研究しながら制作したため、分析に大半の時間を要したように思います。
デザインについては授業で深くは扱われてこなかった（テキストは全員で見ましたが、制作物の添削はされていない）ため、独学で勉強しながらの制作となり、時間がかかっていますが……慣れれば半分以下の時間で出来るようになるのでは、という手応えがあります。
工夫した点
① ホンモノを真似たこと
今回の最大の工夫は、あたかもスタバの広告であるかのように見せるデザインです。
あの魅力的なスタバの広告をスタバたらしめている要素は何なのか？という疑問を持ち、その答えを言語化できるようにホンモノの広告を見漁りました。
私が気づいた点は、主に以下です。
- メインのドリンクは、中央に配置されている広告が多い
- ドリンクの背景は、ドリンクと同系色である広告が多い
- メニュー名は、ドリンクの右横に白抜きで書かれていることが多い
- 発売開始日は、〇などの図形で囲っている場合が多い
これらの特徴を網羅するようなデザインを心がけました！
② 色相・明度・彩度を合わせたこと
先に紹介した使用画像ですが、元の画像はそれぞれ色が違っているのがおわかりいただけると思います。
色相・明度・彩度を調整して色味を寄せない限り、どう配置してもアンバランスな感じがぬぐえないことに気付きました。
そこで、各レイヤーに調整レイヤーを設定し、統一された色味になるよう工夫しました。
③ 遠近感を演出したこと
インパクトのある広告にしたかったので、逆にうるさくなりすぎなように遠近感を出す工夫をしました。
具体的には、以下のような手法で遠近感を出しています。
- ドリンクより極端に手前（または奥）にあるものには、ぼかし（ガウス）をかける
- グラスの一部を透過させて、奥の文字（JUICY!）が見えるようにする
- 画面右下で、トマトの奥に日付を配置する
これらの工夫によって、ドリンクを効果的に強調できたかな？と思っています。
その他
ちなみに、私が最初に「完成した！」と思って書き出した時は、右のような状態でした。
これを、グラフィックデザイン経験のある同じクラスの方に添削してもらったところ、「グラスに刺さっているトマトは、右側に移動した方がいい」というアドバイスをいただきました。
その理由は、
- 画像右上が空いていてアンバランスな感じがするから
- 安定感を持たせるために、ものを対角に配置すると良いから
とのこと。
確かに、右上が不自然に空いていて、全体的に重心が画面左に寄っていますよね。言われるまで気づかなかった…
（実は、美術品に関するとある解説で「正三角形の配置は美しい」と聞いたことがあったので、それを意識して３つのトマトが正三角形を描くように配置したという意図があったのですが、それにばかり気を取られていて、全体的なアンバランスさに気付いていませんでした。）
グラスに刺さっているトマトを移動する技術がまだ私になかったので、別の画像を追加して完成に至りました。
トマトを右上に配置する他にも、「左上と似たようなテキストを右下にも配置するという方法もある」と教えてもらいました！
空間や重心に意識してデザインできるようになると良いとアドバイスいただき、とても勉強になりました！
おわりに
私が参考にしている本
学校の教科書以外にも、私は以下の本をデザインの参考にしています。
デザインに関する普遍的で重要な基礎が学べるので、私と同じ初心者の方にオススメです！
ちなみに、Photoshop をはじめとするソフトウェアの使い方に関しては、インターネットで情報収集しています（バージョンが新しくなると本の内容がすぐに古くなり、使えなくなってしまうため）。
今回の制作実習で学んだこと
プロの仕事（今回であればスタバの広告）を真似するのはとても重要でした！
なぜなら、大衆が好むデザインの共通点を手っ取り早く学ぶことができるからです（まだ「何となく掴めたかな？」というレベルですが）。
初心者である私自身が、自分のセンスや知識だけでデザインするには限界があり、世の中のニーズにもまだまだ応えられないため、真似ることから学ぶのが重要だと気付きました。
それと、添削も非常に大事で、自分で気づけないこと・自分の知らないことを指摘してもらうことは、ステップアップに繋がるとても貴重でありがたい機会だと身に染みました。
より良いデザインのために、何が足りないのかを言語化し改善していけるよう、今後も勉強に励みたいと思います！
最後まで読んでいただき、ありがとうございました！
もしよければ、もう一つのバナー画像もご覧ください。