みなさんこんにちは！
今回は、Webデザイン勉強日記２日目です。
１日目で学んだことを活かして、頑張っていきます。
前回同様、Photoshopを使ってバナーを模写していきます。
WEBデザイン勉強日記について詳しく知りたい人は、こちらの記事から見てみてください。
- バナーの構図、要素などの特徴に関する分析
- バナー模写をしている際に悩んだこと、困ったこととその対策
- バナー模写をしてみての比較、反省
- 今後の課題
別記事で、今回学んだツールの使い方を紹介しています。
筆者：ちゃい
24歳 東京勤務の社会人１年目
世界100都市以上を旅してきた旅人
副業でwebライターをしている
HTML/CSS/Photoshop勉強中
別サイトで旅系のブログも書いていますのでよかったらそちらもぜひ読んでみてください。
→LIFE IS
今回の課題：バナー模写No.2
今回作成する参考バナーはこちらです。
URL: https://www.starbucks.co.jp/
スターバックスコーヒーのバナーです。
バナーの特徴・要素の分析
メインの3色は赤・白・緑です。
この3色を集めると、クリスマスをイメージすることができるので、冬のイメージカラーにもなっています。
周りを囲っている緑色の葉っぱ（花）の模様がクリスマスらしさを引き立てています。
このバナーでのメインは中心にある文字ですね。
バナーの中心にある白い長方形の中に日付と時間、そして「カスタマイズ\50無料」の文字があります。
白い長方形を文字の形にくりぬいているので、赤の背景を利用した文字がはっきりとしています。
特に日付を強調したいのが伝わってきます。
バナーの構図について
正方形の中にシンメトリーがたくさんあるような構図ですね。
真ん中に大きな文字などのデザインを入れることで、注目を集めています。
特にこのバナーには、白地の文字と白い長方形をくりぬいた赤字のスタイルを入れることで、シンプルになりすぎないデザインになっていますね。
シンプルながら、伝えたいイメージがはっきりしているなと思いました。
バナー模写作品：No.2
私が作成したバナー模写はこちらです。
制作時間：1時間半
バナー制作時の反省点
バナー模写No.1で学び直しをした、パターンを使って周りの模様を作ることができました。
前回の知識を活用できたことが成長点です。
ただ、角の模様が一部かぶっていたことに気づきました。もっと自然にする方法を探すのが課題です。
前回同様に、ぴったりのフォントを見つけるのが難しく、時間をかけてしまいます。
今回、一番苦しんだのが、バナーに紙のような質感を加える方法です。
お手本のバナーをよく見ると、うっすらと模様があります。
この模様を入れるのが大変でした。
紙の質感を入れる方法として、レイヤー効果を利用しました。
レイヤー効果の中でもパターンオーバーレイを活用して、何とか質感を加えることができました。
2つのバナーを比較してみる
2つのバナーを並べて比べてみます。
左が見本のバナーで、右が実際に私が模写したバナーです。
全体的に、色がかすれたような印象になってしまいました。
レイヤー効果で質感を加えた時に、色が少し暗くなってしまってます。
色を直すと質感が消えてしまう、ということで、そのままにしてしまいました。
質感が強すぎたという反省です。
文字に関しては、前回以上に似せることができています。
成長しているのがうれしいです。
今回学んだ（調べた）内容：「レイヤー効果・パターンオーバーレイ」
今回のバナー模写で、特に自分の成長になった内容は、「レイヤー効果・パターンオーバーレイ」の活用です。
赤の四角、そして白の四角の部分にレイヤー効果を追加しました。
今回利用したのは、レイヤー効果の中でも、「パターンオーバーレイ」を利用しました。
レイヤー効果とは？
レイヤー効果とは、レイヤーに適用することができる特殊効果です。
レイヤー効果は全部で10種類あります。（2020.11月現在）
それぞれの効果で、影を加えたり、光を出したり、デザインのバリエーションを増やすことができます。
レイヤー効果をマスターするだけで、デザインの幅が広がりますよ。
今後の課題
レイヤー効果の使い方をもっと学ぶことが課題です。
今回のバナー模写ではパターンオーバーレイを利用しましたが、ほかの効果もたくさんの場面で利用します。
別の記事で、レイヤー効果についてまとめてみようと思います。
今回のバナーでは、背景を単色で塗っているのではなく、細かな効果が含まれていることに気づきました。
今後の課題としては、
バナー制作するときには、細かなデザインを見つける
これを実践していきます。
バナーを作成するときには、ズームツールなどで細かな効果があるのではないかと探していこうと思います。
デザインは日々勉強あるのみですね。
次のデザインもがんばります。
最後まで読んでいただき、ありがとうございました。
ひとりのススメでは
仕事×一人暮らし×WEBデザイン
をコンセプトとして、このブログを運営しています。
・ひとりの時間こそ自分を成長させるためのチャンスである
・ひとり暮らしを全力で楽しむためには何が必要か
・将来、自分の好きなことをして生きるために必要なことは何か
自分をもっと好きになるために、人生をもっと楽しむための情報を発信していきます。
ちゃい
24歳 東京勤務の社会人１年目
世界100都市以上を旅してきた旅人
副業でwebライターをしている
HTML/CSS/Photoshop勉強中
すごい旅好きじゃん！と思ったあなたにはこちらがおすすめです。
→LIFE IS
こちらのサイトでは、私の旅の記録を集めた記事をたくさん載せているので、ぜひ覗いてみてください。
Twitterもしておりますので、よろしければこちらもよろしくお願いいたします。
それではみなさん、次の記事もお楽しみに。
