読者です 読者をやめる 読者になる 読者になる

バナー模写13

Banner Photoshop

Photoshopでバナーを模写しました。今回も、サイズ336×280pxのバナーを、サイズ300×250pxにして模写しました。

 

f:id:develog:20170108173136j:plain 元バナー

 

f:id:develog:20170108173140p:plain 模写したバナー

 

Photoshopのレイヤー

f:id:develog:20170108173147p:plain

 

使用した背景画像

f:id:develog:20170108173156p:plain

 

 

バナー模写12

Banner Photoshop

Photoshopでバナーを模写しました。今回は、サイズ336×280pxのバナーを、サイズ300×250pxにして模写しました。

 

f:id:develog:20170108172618j:plain 元バナー

 

f:id:develog:20170108172604p:plain 模写したバナー

 

Photoshopのレイヤー

f:id:develog:20170108172647p:plain

 

使用した背景画像

f:id:develog:20170108172653j:plain

 

 

バナー模写11

Banner Photoshop

Photoshopでバナーを模写しました。

 

f:id:develog:20170107194202j:plain 元バナー

 

f:id:develog:20170107194209p:plain 模写したバナー

 

Photoshopのレイヤー

f:id:develog:20170107194215p:plain

f:id:develog:20170107194219p:plain

 

ボタンの制作

f:id:develog:20170108175335p:plain

 

使用した背景画像

f:id:develog:20170107194226j:plain

 

 

東京の100年をカラー映像で振り返れるWebページ

お気に入りWebページ

東京の100年をカラー映像で振り返れるWebページ東京の100年をカラー映像で振り返れるWebページ 東京の100年をカラー映像で振り返ることができるNHKスペシャルのページです。このWebページだけでテレビのドキュメンタリー番組を観たような感覚になります。

 

f:id:develog:20170104091243j:plain

NHKスペシャル|カラーでよみがえる東京~不死鳥都市の100年~

 

ページのロードが終わると音楽が流れ、この音楽がドキュメンタリー的な雰囲気を醸し出しています。

このサイトは、昔の白黒映像をカラー映像に忠実に再現して、過去100年を5つに分けてさかのぼって紹介しています。

  1. 占領 戦後復興
  2. 戦争の時代
  3. 震災復興 モダン都市
  4. 関東大震災
  5. 明治・大正震災前の東京

 それぞれに映像があって当時の街並みや服装などカラーで垣間見ることができます。

 

このページもパララックスを全体に使用していて、最新技術を使ってカラー映像を実現したことを匂わせる効果を出していると思います。

残念に思うのは最初に背景に現れる人物の手の動きです。機械的でロボットのよう見えますが、そういう意図があるのでしょうか?

 

 

かっこいいWebページ

お気に入りWebページ

ニコンダイレクトのAW1というカメラのページを紹介します。

 

Nikon 1 AW1

f:id:develog:20170104075049j:plain

Nikon 1 AW1 - Present Campaign | NikonDirect - ニコンダイレクト

 

トップページはアニメーションでタイトルや画像が時間差で表示されます。

 画面を下にスクロールしていくと、防水15m->耐衝撃2m->防塵ー>‐10度C寒冷地対応と画像が移り変わっていきますが、それぞれの場面の背景とそれに合わせたカメラの画像が動きをもって現れます。ここでは背景を少しぼかすことでカメラを引き立たせています。

さらに下にスクロールすると機能の説明になりますが、スクロールとともに画像が徐々にアニメーションで現れます。現れ方は言葉では説明が難しいですが、スクロールとともに機能を説明する画像が一つずつ現れます。背景は深みのある青に統一され、見出しとボタンは背景に近い色でグラデーションされています。

全体的にパララックスはカメラのメインをジャマすることなく、イメージアップのために非常に効果的に使用されています。

カメラメーカーとして画像の見せ方は凝っていてすばらしいと思います。

 

 

バナー模写10

Banner Photoshop

Photoshopでバナー模写をしました。

 

f:id:develog:20170103003158j:plain 元バナー

 

f:id:develog:20170103005150p:plain 模写したバナー

 

Photoshopのレイヤー

f:id:develog:20170103003208p:plain

 

使用した背景画像

f:id:develog:20170103003215j:plain

 

使用したカメラの画像

f:id:develog:20170103003222j:plain

 

 

バナー模写9

Banner Photoshop

Photoshopでバナー模写をしました。

 

f:id:develog:20170101235741g:plain 元バナー

 

f:id:develog:20170102003636p:plain 模写したバナー

 

Photoshopのレイヤー

f:id:develog:20170102003940p:plain

 

模写に使用した画像

f:id:develog:20170102004123j:plainD7000

 

f:id:develog:20170102004129j:plainD3100

 

f:id:develog:20170102004142j:plain   D3100のレンズ