2015.10.24photoshop入門:バナー作成と自分のポートフォリサイト作成

http://room.trunk.fm/wp-content/uploads/2015/10/1017_photoshop.jpg
photoshopの入門編として、
新人がまず任される仕事「バナー制作」を体験しました。

そもそもバナーとは


wikipediaだとこう書かれています↓

バナー (banner) はウェブページ上で他のウェブサイトを紹介する役割をもつ画像(アイコンの一種)のこと。本来、旗印を意味し、ウェブページ上で広告が目立つように使われたことから、この通名で呼ばれ定着した。
主に広告・宣伝用に作られ、ウェブサイトへのハイパーリンク用にも利用される。画像にはリンクを張り、クリックするとそのバナーが紹介するサイトを表示するようになっている。
横長帯状のものが一般的だが、近年は縦長のものや正方形に近いものも多い。
英語の banner は旗の種類で、本来は正方形の紋章旗だが、広く横断幕や幟などの意味に広がり、帯状の広告画像が宣伝用の垂れ幕を連想させることからこの名がついたとされ、英語では本来のバナーと区別するためにウェブバナーと呼ばれる事もある。
日本では、基本的に「軍旗」「幟」「横断幕」をバナーとは呼ばないので、バナーだけで呼ぶことが多く、ウェブバナーとわざわざ呼ぶことは比較的少ない。また、日本ではしばしば「バーナー」と誤記されることがある。


バナーの目的は、ウェブサイトの周知、認知だったり、そこへの集客が目的で作られたものです。
そして、集客も認知も全て利益につながることなので、
いかにそのバナーをクリックさせるかが重要になります。小さな枠の中でwebサイトをプロモーションしなければいけません。

photoshopの使い方(基礎)



  • カンバスの使い方

  • レイヤーの使い方

  • 矩形の使い方

  • 色を塗る方法

  • レイヤーや矩形にスタイルをあてる方法


を学んだ後に課題をやりました。

「ヤフートップに載せるTrunkの誘導バナーをつくる」



  • ターゲット:女子大生

  • 目的:ターゲットが、Trunkに登録させる

  • 制限時間:30分


できあがったバナーはこちら↓

10898149_1650096878605714_6542099835725918849_n

12122511_1650096841939051_185213702901401125_n

12077476_789042674540521_226236954_n

12167095_789042637873858_729618101_n

みんな初心者にも関わらず、すごいですね!しかも30分で!

ポートフォリオサイトをつくろう


最後にTumblrを使って、自分のポートフォリオサイトを作成しました。

tumblr

Tumblrを使うと、5分もかからずに自分のページを作成できます。
さらに下層ページをつくり(例えば/work)、
自分の成果物や実績を投稿できるようにカスタムできます。
また、html/css/javascriptの修正も可能ですので、コーディングの勉強になります。
ぜひお試しください。

トレーニングページ:photoshop入門:自分のポートフォリオサイトを作成して、制作したバナーを載せよう

次は、photoshopを使ってスマートフォンUIの入門編を行います。
ぜひご参加ください。
photoshop入門:スマートフォンUI入門

この記事を書いた人

岡崎 友宏

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