第7回 | デザイントレース修行(Photoshop編)

 こんにちは。

しゅん(@shunmatsuo)です。

 

 

今回はですねー、、「Photoshop編」です。

既存のWEBサイトをそっくりにトレースします。

 

VENUS BEDのTOPページ

トレースさせてもらったのは、「VENUS BED」さん。

白を基調としたシンプルなデザインで、すごく綺麗です。

 

Photoshopでトレースさせてもらいました。

 

完成したのがこちら▼

f:id:sm0510sm:20160712184958p:plain

シャドウや光彩、マージンやフォントまで、全部まるごと写しました。

 

今回の気づき・学び

①WEBサイトのトレースで学べるもの

今回のトレースで、実はWEBサイト3つ目になります。これまで3つのサイトを中事実に写してきて感じるのは、トレースは学べることが多いということです。 

・表現の引き出しが増える

コンテンツの並び方やマージンのかけ方、色の使い方などなど。トレースで実際に測ってみたり、マージンを調整してみたりという作業を経ているので、ただ単にWEBサイトを眺めて参考にする時よりも遥かに身につく感覚があります。

制作の中で「こういった雰囲気にしたい」だとか、「この部分どういう見せ方が一番いいだろう」となった時に、すぐに引き出しから引っ張ってこれます。

PhotoshopIllustratorなどのツールに効率的に慣れれる

デザインツールに最も効率的に慣れていくには、トレースが一番早い手段だと思います。自分が「このデザインのこの表現どうやってやるんだろう」と感じるものを積極的に選んでいき、知っている方法で作ってみる。さらに新しい方法を駆使して作れた時には、「なるほど、こういう表現はこうして作れるわけね」と自分の中でこちらも引き出しが増えていきます。

何かをデザインする時、自分でも知らない内に「自分の知っている、そして可能な方法でできる範囲の表現」しかできません。インプットできていないものをアウトプットできるはずがありません。

なので、引き出しを増やしていく作業、新しい表現を知っていく作業としてトレースは相当重要だと思いました。

 

②写真の重要性

「VENUS BED」さんのサイトを作っていく時に、写真の大切さを感じれた気がします。このサイト、特にTOPの写真が綺麗で、一瞬で惹きこまれてしまいます。すごく生活に寄り添った写真たちなので安心感もあり、自然に下にスクロールしてしまいます。

 

 

まとめ

今回はPhotoshopでの、トレースでした。

Photoshop自体の操作に関しては、もとも触ってたこともありそんなに苦はなくできますが、やっぱり写真の加工や、合成などはまだまだほとんど触ったこともないのでそちらの方もチャレンジしていきたいなと思います。

トレースでいろんな表現に触れれるのが楽しくてしょうがないです。はやく自分のサイト作りたいー。

 

また明日も頑張ります。