実践Webデザインスキル - 第4章 Lesson3

第2回:ガイドを使ってWebサイトのレイアウトを作る方法-2

   

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

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

前回の続きで、Webサイトの基盤となるレイアウトを作成していきましょう。



この動画で学べること

・レイアウトの作成方法
・スマートガイドを利用して簡単に要素を整列させる方法



サイドバーとフッターのレイアウトを組んでいこう


まず、サイドバーのレイアウトを組んでいきたいと思います。
ボタンの大きさが幅365px、高さ60pxなので、長方形ツールに切り替えて四角形を作りましょう。
同じ大きさのボタンが2つあるので、レイヤーを複製します。
やり方は、複製したいレイヤーをAltを押しながらドラッグです。
レイヤーがコピーできたら、移動ツールに切り替えて、余白を20pxとって配置します。




フッター部分も、長方形選択ツールで四角形を作っていきます。
大きさを幅1440px、高さ58pxに設定し、ガイドにそって配置していきます。




ガイドを要素に合わせて引く方法

レイヤーが選択されていない状態の所にガイドを引こうと思うと、値に小数点が出てしまします。
それでは、後々誤差がでてきますので、ぴったりの数値でガイドを引いていきましょう。
定規からガイドの線を引っ張りだし、Shiftを押すだけで、小数点の数字が切落されてぴったりの数字でガイドを引くことができます。
これはぜひ覚えてください。



前回と今回で、このようなレイアウトが組めました。