こんにちは!
今回は5回目のバナートレースになります。少し慣れてはきたのですがわからないことがまだまだたくさんあるので、コツコツ作業とアウトプットをしていきます!
これからデザインを勉強していきたい方など、一緒に頑張っていけたら嬉しいです(^^)
トレース画像
バナーサイズ(幅×高さ):600×500
使用ソフト:Photoshop
使用カラー:#e72f5b #0d3862
使用フォント:MS Pゴシック/HG創英角ゴシックUB
参照:バナー広場
振り返り
知識・スキル
パターン作成
左下三角内の白い四角はパターン作成を行い、反映することがわかりました。
まず、透過の背景に四角を並べ、Photoshop内のパターンに登録(パターンを定義)しました。
次に、三角形ツールで三角を作成し、パターンオーバーレイとカラーオーバーレイで調整を行い反映をしました。
アイコン素材
チェックマークは、icooon-monoという素材サイトでSVGデータをダウンロードしました。
SVGデータは、色の変更ができたのでとても便利だと思いました。icooon-monoは商用利用可能なアイコン素材が無料でダウンロードできるのでとてもおすすめです!
SVGデータは効果のカラーオーバーレイで色をつけました!
被写体の影作成
女性の影を表現するのに、効果のドロップシャドウで調整できることがわかりました。
ドロップシャドウでは、影の色や場所など細かく調整できるので便利です!
<ドロップシャドウの描画モードについて>
描画モード:通常…背景の色関係なくつけたシャドウの色が現われる
描画モード:乗算…背景との色をかけ合わせ、自然な色になりやすい
気づき
グラデーション
前回のバナートレースでもグラデーションを使用しましたが、デザインの中で使用されている色の同系色のグラデーションをいれることで全体の統一感がでると思いました。
グラデーションを使用するときは、デザイン内で使用している色を活用してみようと思います!
パターン
パターンを一部に使用することでおしゃれなデザイン、且つ、テキストに目線がいくような気がしました。背景すべてにパターンを反映するだけでなく、一部に使用するのもテクニックだと思いました!
まとめ
今回は、web制作のバナーをトレースしてみました!
初めて今まで学んだことを活用できそうだと思ったのですが、わからないことも意外とあり勉強になりました。
また次の練習でどんどんわからないことを無くしていけたらと思います(*^^*)
ありがとうございました!