WEB デザイン チュートリアル 1 参考サイトをもとに、カラム割とサイズを決める。

今回から、連続して、WEBサイトの簡単な作り方を順を追って説明していきます。

解説は以下より。

まず第一回は参考サイトを元に、
ガイドを引きまくって、サイズとカラム割を決める
です。

今回は、動画共有サイトのSTAGE6を参考にしました。
http://www.stage6.com/

本当はそれにアップロードする予定でしたが、
DIVXが要るとか、フォーマットが違うとか、割かし面倒だったので
結局、YOUTUBEです。 YOUTUBEなのにSTAGE6というシュールです。。。

まず、”Ctrl+R”でルーラを呼び出します。
外枠に定規が出てきますね。

このときにあらかじめ、
メニューの編集→環境設定→ガイド・グリッド・スライス
ウインドウ内の設定をしましょう

グリッド線→ 5pixel
分割数→5

です。
これで、ピクセルに沿ってガイドを動かせますね。

後は、ガイドを引きまくります。
ガイドのところにカーソルを合わせ、ドラッグするとガイドが出てきます。
SHIFTを押しながら動かすことで、1ピクセルつづ動きます。

もし動かない場合は、
メニューのビュー→スナップ
クリックしてチェックマークをつけましょう。
これでSHIFTを押しながら動かすと1PXづつ動くはずです。

あとは、1PXのずれを見逃さないように。
拡大と縮小を繰り返しながら、ガイドを引きます。

拡大はCtrl+Space+クリック
縮小はCtrl+Space+Alt+クリック

です。
拡大縮小とSHIFTを押しながらのガイド引きは非常によく使うので
覚えてしまいましょう。

引き終わったら、
ヘッダ、
メインカラム
サイドカラム
フッタ
に色分けして短形ツールで塗っておきます。

レイヤーごとに分けておいたほうが、後々作業もしやすいです。
新規レイヤーを作るのは
Ctrl+Shift+N
です。

すぐなれると思いますので
何回か、自分の気に入ったサイトをスクリーンショットで
とって、ガイドを引きまくってみましょう。

スクリーンショットをとるときには
ファイヤーフォックスのアドオンがお勧めです。

http://netafull.net/software/014125.html

これ超便利

次回に続きます。