ウェブサイトのベースとなる背景の作り方

ウェブサイトを作ろう！という時に、きっと最も大事になってくるであろうデザインカンプ。
今授業では「Fireworksレッスンブック」の素材を使い、実際にテキストに沿ってデザインカンプをFireworksで作っています。
今回は、その初歩の初歩である「ウェブサイトのベースとなる背景の作り方」をまとめてみました。

1．ドキュメントの作成

ベースとなるものを新規ドキュメントから作成します。
Fireworksを開き、上のメニューからファイル→新規作成
ショートカットキーはCtrl＋Nです



ここでは、横860ピクセル・縦1500ピクセルに設定しました。



ベースとなるドキュメントを新規作成したら、その時点で一度保存しておきましょう。
何か不都合があった場合に泣きます

2．ガイドを引く

基本となるガイドを引きます。



キャンバスの上部にある定規をクリックするとガイドが現れるので
それをドキュメント上にドラッグ＆ドロップします。

ガイドをダブルクリックすると数値を入力できるので、
任意の数値を入れてガイドラインを設定しましょう。



ここでは、縦方向に40・820の位置
横方向に40・300・370・400・1460の位置にガイドを引きました。

3．レイヤーのフォルダを作る

メニュー部分からレイヤーを選択して、新規レイヤーを作成します。
＋がついたフォルダアイコンをクリックすると新規レイヤーが作成されるので、
レイヤーのタイトルをダブルクリックしてレイヤーに名前を付けましょう。



ここでは、「背景」という名のレイヤー名をつけました。
※＋のマークが付いているフォルダアイコンの隣に矢印のついたフォルダアイコンがありますが
これは「新規レイヤー」ではなく「新規サブレイヤー」を作成するものです。
間違えないように注意！

4．背景をひく

ガイドをひいたら、次にサイトのメイン部分となる背景を設定します。



矩形ツールでガイドにあわせて長方形を描きます。
ガイドがひいてあるので、ピタっとガイドにそった位置情報の背景を描くことができるのでうれしいですねー



背景が完成したら、間違えて動かしたり消したりにしないよう
背景をロックしておきましょう。
目のアイコンの隣をクリックすると、錠のマークが出てきます。
錠のマーク＝ロックされているということです。

これでベースとなる背景の完成です！

何事も土台が肝心で、このステップで狂いが生じると
後々めんどくさいことになったりします。
ポイントを忘れないようにしっかりチェックしていきましょう( ﾟーﾟ)