実践Webデザインスキル - 第8章 Lesson5

第4回:無料アイコンでロゴとナビゲーションを作成する方法-1

   

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

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

ロゴの作成と、ナビゲーションのテキストを作成します。



この動画で学べること

・ロゴの配置の仕方
・グローバルナビゲーションの作成方法



ロゴを配置しよう

今回は、ヘッダーのロゴを作っていきましょう。
ロゴの部分に余白が上下に25pxずつ必要なので、ものさしツールで図り、ガイドを引いておきましょう。
ダウンロードしているフォルダの中に、ロゴ.pngがあるので、それをドラッグ&ドロップ、
または、メニューバーのファイルから埋め込みを配置でカンバス上に配置してください。
移動ツールに切り替えて、先ほど引いたガイドにあうように、ロゴを移動させてください。
これで、ロゴの部分の完成です。



レイヤーを複製してグローバルナビゲーションを作成しよう

次にグローバルナビゲーションを作っていきましょう。
テキストツールに切り替えて、「トップページ」と入力し、オプションバーから確定していください。
そして、文字のスタイルを変更していきます。
「トップページ」のテキストが完成したら、このテキストレイヤーを合計4つになるまで複製しましょう。
複製してレイヤーの文字を変更し、「トップページ」「WORDPRESS」「jQuery」「ウェブマーケティング」の4つを完成させてください。
次回、このテキストを整列させていきます。