実践Webデザインスキル - 第2章 Lesson6

ナビゲーションの作り方

   

テクノロジーとクリエイティブのプロを目指す人のためのオンラインスクール
月額2500円で500以上のレッスンが受けられます

このスキルのデータをダウンロード: Windows Mac

Webサイトのナビゲーションを作成していきましょう。



この動画で学べること

・Webサイトのナビゲーションを作成する方法



まずは背景部分を作っていこう

まずは、ものさしツールで見本のナビゲーションの高さを測っていきましょう。
今回は74pxですので、長方形ツールに切り替えて幅1440px,高さ74pxの長方形を作成します。
長方形の色は、ロゴの「school」と同じにし、ナビゲーションの位置に移動ツールで移動させます。
ナビゲーションの中には5つの項目があるので、5分割になるように計算し、ガイドを引いていきましょう。




ナビゲーションのの文字を入力しよう

次は、テキストツールで文字を入力していきます。
入力の確定をしたら、フォントの種類や色などを設定しましょう。
文字が完成したら、先ほど5分割にした四角の真ん中になるように配置していきたいと思います。
長方形選択ツールに切り替えて、四角を囲みます。
そして、文字のレイヤーを選択した状態で、移動ツールに切り替えます。
オプションバーより、「垂直方向中央揃え」と「水平方向中央揃え」を選択すると、四角形のど真ん中に文字を配置すつことができます。




アイコン部分をデザインしよう

最後に、丸い部分を作っていきます。
楕円形ツールに切り替え、Shiftを押しながらドラッグします。
綺麗な丸ができたら、塗りと線の色を決めていきましょう。
アイコンは、今回はインターネットからダウンロードします。
ダウンロードしたものを配置し、バウンディングボックスからサイズを調整していきます。
アイコンの色はレイヤースタイルからカラーオーバーレイで背景と同じ赤に設定します。



この一連の流れを5回繰り返すと、このようなナビゲーションが作成できました。