9/26 ECサイトデザイン実習②バナー製作、当て込み


1限目
実技 ECサイトデザイン実習③
クライアント確認について

2限目
実技 ECサイトデザイン実習③
バナー作成

3限目
実技 ECサイトデザイン実習③
バナー作成

4限目
実技 ECサイトデザイン実習③
バナー作成

5限目
実技 ECサイトデザイン実習③
バナー 講評

小谷祥吾先生

★クライアントへの確認方法

デザインした制作物をクライアント(発注者)に確認を入れる場合は、そのまま見せる事が最も解りやすい方法です。バナーを作成したらページにそのまま当て込んで(テストアップ等)確認をとります。

バナーの当て込み元に画像保存にはChrome(ブラウザ)の全画面スクリーンショット撮影機能を使います。

Chromeの全画面スクリーンショット撮影方法!拡張機能ナシでもできる

banner1

映画特集の宣伝(当て込みは映画館のwebサイト)
制作時間100分

左;真似してみた見本
真ん中;借りた写真
右;新しく制作したbanner

苦労した点;
①シンプルなので、黒と赤字のコントラストに集中した。赤字のカラーの調整を細かく行った。明るすぎると、俳優の顔を喰ってしまう、暗すぎると全体が暗くなることがわかった。スマホサイズで見ることも想定して、サイズを拡大縮小を何度も見直して、選んだ。

②赤と黒のコントラスト。はっきりさせると文字に目が行き過ぎて、俳優の顔写真のインパクトを喰ってしまう。
ぱっと見で、どこに目が行くのか、文字だけに目が行かないようにを意識して作った。

③モノクロのバリエーションもいろいろあるので、試してみた。明るいと顔が映えるが、全体の世界観が弱くなる。逆に暗すぎると世界観は出るが、俳優の顔が暗っぽく見える。そのあたりに注意した。

④Yoo Ah Inの文字間隔、いろいろと試してみた。離れすぎると間が抜けるが、詰めすぎると貧素になる。
このバナーは、「顔」と「名前のロゴ」がポイントなので、そこを意識した。

⑤ゴシック体と明朝のシンプルな字体は遊びがなさすぎるので、上に手書きサインを乗せたのは良いアイディアに見えたので真似した。実際のサインを模写しようと思ったが良いデータが見つからなかったので、サイン風の文字を探して文字間を狭くしたり角度をつけたり、手書きっぽく見るように手を入れた。

⑥左の文字の配置、上の余白をどの程度にするのか、最初にアップしたバージョンだと広すぎると思い手直しした。(次回再アップします。)

⑦モノクロでも、さまざまなバリエーションがある。明るめにすると顔は映えるが、世界観が優しくなりすぎる。黒くしすぎるとシリアスになりすぎたり、顔が暗く見える。この辺りのバランスを鑑みて調整した。

⑧ブラシを使って背景を出す消す(白と黒)これを忘れていたので、手間取ってしまった。マスクについてまだ技術がかなり怪しいので復習しないといけない。

完成ひとつ前の作品(次回再アップ)→文字の上の空白を調整したい

→再アップ/完成版

映画館のサイトに当て込んだbanner

Canvaによる試作

前日に大まかな試作をした。
コピーは、複数のAIに聞いて総合して直した。

劇場の詩人、韓国の至宝

変幻自在、スクリーンの詩人

banner2

時間切れとなった干し柿の販売banner

ポップでシンプルなデザインにしたかった。
楽天で売れている店はおしゃれなバナーの店だった。それを真似た。(参考bannerは後日UP)

以下は制作過程。文字の影がきつすぎるし、可読性が悪いので、変更しよう。また、文字の一部をカラーにしたいのも間に合わなかったので、また次回に修正する。

以下は、現段階の、制作過程のみを記載。

製作過程

制作過程2
続く…

コメントする

メールアドレスが公開されることはありません。 が付いている欄は必須項目です