2015.07.18ビジュアルデザイン入門 – 1回目

Photoshopでのデザインを学ぼう


0714_visual

実際のWebサイトで使うバナーを作ろう!


今回のゴール: trunk.fmからTrunk roomに誘導するバナーをつくってみよう。
基本操作だけでなく、「デザインをどんな風に考えるべきか」を意識しよう。

1.Photoshopの基本的な使い方を覚えよう



  • カンバスを出してみる

  • テキストを書いてみる

  • フォントを変えてみる

  • 矩形ツールを使ってみる

  • オブジェクトを回転してみる

  • スタイルを当ててみる


2.どんな言葉が刺さるか考えてみよう



  • Trunk.fmにどんなユーザーがいて、どんな人にTrunk Roomに行くか仮説を立ててみる

  • そのターゲットユーザーがどんな言葉ならクリックするか考える


3.配色を考えてみよう


フッターで目立たせるためにはどんな色にするべきか。
Trunk.fmのトンマナとあっているか。
など考えて決めます。

4.アイコンをいれてみよう




よくサイトでもみる虫眼鏡アイコンを作成しました。虫眼鏡のくりぬきの円をどうやってつくりましょうか?

photoshopでつくる場合、様々なやり方でつくることができます。

  • パスで書く

  • レイヤーを塗りつぶしてつくる

  • 二つのレイヤーを重ねる


基本的にアイコンなどは、ページサイズに合わせて拡大することもあるので
パスで表現するのがベストだと思います。

5.書き出してみよう


web上で公開するためにはpsdデータでは公開できません。
web上で表示するためにpngやjpgで書き出します。

今回できたバナーはこちら↓
banner
Photoshopをはじめて触ったのに上出来ですね!

※途中からでも参加可能ですので、参加したい学生はご連絡ください!
support@trunk.fm

おわり

この記事を書いた人

岡崎 友宏

TRUNKのCCOしながら、実家のMOLEという会社でデザイナーしています。 design,UX,wearable,frontend,HR,人材育成,採用,副業,焼き鳥,ウーロンハイ