smiley0719の日記

元OL25歳がWEBマーケ/デザイン業界を目指すために日々実践を重ねる様子をレポート形式で記録しています

1日目:デザイントレースの環境を構築する

 

初めまして、smiley0719です。

Adobe ツールデザイン初心者による上達のためのトレーニング内容をただただ記録し公開していくというブログです。

 

今まで全く使ったことがない、どのようにすれば良いかわからない等、これからいじり始める方の参考になれば嬉しいです。🔰

 

 

 

今日の内容は、

「インプットとアウトプット方法について」

 

 

 

【インプット編】

参考サイト

io3000.com

1guu.jp

muuuuu.org

responsive-jp.com

spscollection.com

rdlp.jp

site-advance.info

partsdesign.net

retrobanner.net

bannnner.com

 

Pinterest

 

などから参考にしたいデザインを見つけます。

 

 

情報収集方法

✔︎Feedlyを活用し日々情報をとっていきます。

✔︎朝起きた時にTwitter、通勤時にFeedly、など行動を習慣化させる

 

【アウトプット編】

使用ツール

紙媒体のデザイン作成:◎illustrator(文字やイラストがメインのバナー)

WEB媒体のデザイン作成:◎Photoshop(写真がメインのバナー)

 

対応事項

✔︎作業時に必要となる情報を収集するため、拡張機能を追加

・Image Downloader

・WhatFont

・Color Pick Eyedropper

・Window Resizer

・FireShot

 

以下ブログを参考にさせていただきましたので、他にも見てみたい方はぜひ↓

https://nozakichi.com/web-trace/

 

確認ポイント

例)ビアードパパ公式サイト

image_trace

トレース1日目の様子

・デザインのターゲット:お子様が見ても楽しめるファミリー向けのサイト作りになっている。

・使用されている色とフォントの組み合わせ理由:黄色と青(補色)をはっきりとした明度で用い明るい印象を与え、丸みを帯びた図形や手書きに近いフォントを用いて遊び心を演出している。

・どのようなレイアウトか:画像もレイアウトも影や奥行きをつけることでシュークリームならではの立体感を演出している。また複数の視覚的な仕掛けを用いることで、最後まで見たくなるような飽きさせないデザインになっている。

・文字の強弱はどんなか(ジャンプ率):コンセプトは多少大きく、それ以外はタイトルと詳細で強弱をしっかりつけている。

・気に入ったポイント+理由:使用する色やレイアウトに統一感を持たせ、質の良いサイトと感じさせることができている。

 

 

 

今回はこのような感じでトレース環境の構築、

実際に手を動かしてトレース、

さらにサイトの分析を行ってみました。

 

 

 

 

感覚を掴んでいき次回以降はよりスムーズにできるように頑張ります!!❤️‍🔥

 

See ya!:)