放課後図工室

WEBデザインを学ぶ② バナートレース100本チャレンジ

time 2017/02/15

デザインに関する資格をクリアしたところで次は、「デザイン力をつけたい!」そこで、バナートレースを100本やってみます。


バナートレースで目指すことは

・編集ソフトのスキルアップ(知識技術の向上、作業時間の短縮)
・デザインの引き出しを増やす

WEBサイトのトレースよりも短時間で多くの種類に挑戦できるのでまずはバナーからはじめます。

 

バナーデザインの制作工程を知る

まずはバナーがどういう順序・ルールでデザインされているかを知ることから。
これを知ることで見本にするバナーの狙いやデザインの意図が見えてきます。

参考にしたサイトはこちら

新米デザイナー必見!バナーデザインを効率的に美しくする10のステップ | 株式会社LIG

WEBデザインを学ぶ② バナートレース100本 

 

 

バナーギャラリーサイトでバナーを選ぶ

選び方として気をつけたことは

・業種、テイストが偏らないように
・できそうなものではなく、作り方を調べる必要があるもの

参考にしたバナーギャラリーサイトはこちら

レトロバナー: バナーデザイン専門ギャラリーサイト

WEBデザインを学ぶ② バナートレース100本

 

バナーデザインアーカイブ

WEBデザインを学ぶ② バナートレース100本

 

ブブンデザインアーカイブ

WEBデザインを学ぶ② バナートレース100本

 

トレーススタート

トレースにはphotoshopを使いました。
自分がどのくらいの時間で作業できるのかを知るために時間も計ります。
2アップ表示にして、ガイドを使って位置を測りながらトレースしていきます。

WEBデザインを学ぶ② バナートレース100本

基本的に写真はフリー素材サイトを使って探し、ロゴもトレースします。

見本
WEBデザインを学ぶ② バナートレース100本

トレース
WEBデザインを学ぶ② バナートレース100本

これだけで90分もかかってしまいました…。
分からないところを調べながらとなると余計に時間がかかりますが、ひとつトレースするたびに新しい技術を覚えられて毎回小さな達成感があります。

 

使用したフリー素材サイトはこちら

フリー写真素材ぱくたそ

WEBデザインを学ぶ② バナートレース100本


タダピク

WEBデザインを学ぶ② バナートレース100本


モデル・フォト

WEBデザインを学ぶ② バナートレース100本

 

レイヤースタイルトレーニング

光沢や凹凸を表現するためにレイヤースタイルを使用しますが、なかなか奥が深い…。ボタンデザインひとつにも微妙なグラデーションや1ピクセルのラインが重要な役割を担っています。
そこで参考にしたサイトがこちら。これでトレースもサクサク進むはず!

Photoshopでクオリティの高いボタンをデザインするテクニックまとめ

WEBデザインを学ぶ② バナートレース100本

 

【Photoshop】Web用ボタン日本語チュートリアルを集めてみた

WEBデザインを学ぶ② バナートレース100本

 

誰かにチェックして欲しい…

ひとりでトレースをしているとこれで正解なのか不安になってきました…。トレースしたものを誰かにチェック欲しい!と思っていたらこんなブログを発見。

 新人デザイナー育成 バナートレース100本への道 

WEBデザインを学ぶ② バナートレース100本

全く同じことをしている!トレースに対してのコメントや、制作時間の目安に大変参考になりました。
ちょっと安心したところで100本目指して頑張ります! 


down

コメントする




CAPTCHA


クレイフラワー(むしさんみっけ!)

粘土雑貨シリーズ

アーカイブ