(16-E)ナビゲーションを配置する | デザインってオモシロイ -MdN Design Interactive-
【サイトリニューアル!】新サイトはこちらMdNについて




CREATIVE POINT E

ナビゲーションを配置する


KEY WORD 1

1カ所だけ色を使うことで目立たせる

KEY WORD 2

同じ画像をトリミングを変えて利用する



画像の右側に引いた黒い帯上に、ナビゲーションのメニューを示す四角形を配置する【1】。ここで左のサイトタイトルが4つのメニューの中央になるように位置を決める。そして、4つのメニュー名の文字を入れていく【2】。このままでは文字が大きすぎてシャープな感じがなくなるため、文字を少し小さくする【3】。全体がモノトーンでまとまっているので、この中で目立たせるためのアクセントとして4つの四角形を黄色にする【4】。

次に、ナビゲーションの部分に左の空の部分の画像を拡大して配置したい。まず、画像を適当に配置し、画像を配置したい部分に縦長の長方形を配置して、白から黒へのグラデーションを適用する【5】。空の画像とグラデーションを適用した長方形を選択して、修正メニュー→“マスク”→“マスクとしてグループ化”で画像を切り抜く【6】。同じ写真の画像を使用しているが、これによってイメージがつながるような効果が出てくる。


【1】ナビゲーションのメニューを示す四角形を配置する


【2】4つのメニュー名の文字をそれぞれ入れていくに画像を切り抜く


【3】シャープな感じにするため、文字を少し小さくする


【4】4つの四角形の色を黄色に変更する


【5】画像を適当に配置し、画像を配置したい部分に縦長の長方形を配置して、白から黒へのグラデーションを適用する


【6】修正メニュー→“ マスク”→“マスクとしてグループ化”で空の写真画像を切り抜いた
twitter facebook このエントリーをはてなブックマークに追加 RSS
【サイトリニューアル!】新サイトはこちらMdNについて

この連載のすべての記事

アクセスランキング

8.30-9.5

MdN BOOKS|デザインの本

Pick upコンテンツ

現在