実践Webデザインスキル - 第6章 Lesson1

第1回:記事ページ用のファイルの複製と修正

   

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

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

既存のトップページのpsdファイルを複製し、ナビゲーションの修正を行っていきましょう。



この動画で学べること

・トップページのpsdファイルを複製する方法
・ナビゲーションの修正方法



トップページを複製して新しいファイルを作ろう

前回、トップページが完成したので、今回からは下層ページの作成をしていきます。
デザインのテイストはトップページと同じですが、中身のコンテンツなどを変えて、メニュー一覧ペーシを作っていきましょう。
ではまず、トップページを複製していきます。
メニューバーのファイルから別名で保存に進んでください。
名前を「メニュー一覧」にし、拡張子が.psdになっていることを確認して保存を選択します。
これで、トップページの複製が完了です。




ナビゲーションのスタイルを変更していこう

では、早速メニュー一覧ペーシにするために修正をしていきます。
まずナビゲーション部分を見てみましょう。
「メニュー一覧」の文字を緑色に変更し、ホームの下にあったマークをメニュー一覧の下に移動させます。
この時、Shiftを押しながらドラッグすると、上下にずれることなく移動させることができます。
長方形をメニュー一覧の横幅に合うようにして、作業を確定します。



これで、ナビゲーション部分の完成です。