実践Webデザインスキル - 第3章 Lesson8

第八回:レイヤー複製機能を使って、即座にフッターを作ろう

   

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

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

すでにあるレイヤーを複製し、再利用することで、即座にフッターのデザインを完成させましょう。



この動画で学べること

・フッターの役割
・フッターの作り方



フッターの役割

まずフッターの作成に入る前に、フッターの役割を見てみましょう。


・最後までページをみたユーザーの次のアクションを指定してあげる部分
・離脱を考えているユーザーの目を引く最後のエリア
・コピーライトなどのページ情報を掲載する


この役割を意識して、使いやすいフッターをデザインしていきましょう。


レイヤーを複製し、効率良くフッターを作ってみよう

まずは、フッターの基準となる所にガイドを引いていきましょう。
ガイドが引けたら、長方形ツールに切り替えてガイドに合わせて背景となる長方形をつくります。
そして、色をロゴと同じ青色に設定してください。



ヘッダー部分で作ったロゴとナビゲーションを複製し、ガイドに合わせて配置したいと思います。
ショートカットキー
[Mac] command ⌘+クリック
[Windows] Ctrl +クリック
でレイヤーを複数選択し、複製したいレイヤーをAltを押しながらドラッグで、コピーします。
移動ツールでフッター部分にレイヤーを移動させ、ロゴとテキストの色を白色に変更すれば、フッターがあっという間に完成です。