基本レイアウトの作リ方01

Photoshopを使ってWEBサイトの画面をデザインしてみましょう。

実際のデザインでは色や書体をバランスよく選択し、ヘッダー・フッター・ナビゲーションなどの部品ごとに、細かなデザイン処理などをしますが、今回は細かい部分は省略して基本的なレイアウトの作り方から勉強したいと思います。

今回作るのは以下のような画面です。細かいデザイン処理はされていませんが、画面構成としてはよくあるパターンのWEBサイトですね。
01_基本画面構成

画面各部の名称

実際に制作を始める前に、各部の名称を確認しておきましょう。
02_名称

ヘッダー ページタイトルやロゴ、検索フォームなどが配置されている事が多いです。
グローバルナビゲーション いわゆる「メニュー」です。この位置に来るメニューはサイト全体の移動に使用することが多いので、「グローバル」といった言葉が付属します。ナビゲーション、ナビゲーションメニューと呼んだりもします。
サイドメニュー グローバルナビゲーションで移動したページから、更に細かく細分化していく場合に使用します
コンテンツ 本文エリアです。本文以外に見出しや画像なども含まれます。サイト全体のことをコンテンツと呼ぶこともあります。
フッター コピーライトやフッターが配置されていることが多いです。

 

 各パーツ、余白のサイズ

各パーツ、余白のサイズは以下のようになります。
実際はデザインのバランスを見たりしながら自分で決めていきますが、今回は指示通りに作ってみましょう。
02_サイズ

よく使うショートカット

よく使うショートカットをまとめました。
今後繰り返し使っていく操作なので少しづつ覚えていきましょう。

環境設定 Ctrl+K
ガイドの表示 Ctrl+:(「け」のキー)
グリッドの表示 Ctrl+@
ガイド・グリッド両方表示 Ctrl+H
ズームツール Z
文字ツール T
文字ツールの確定 右側テンキー内のEnterキー
(中央にあるEnterキーは改行になります)
自由変形ツール Ctrl+T

 

 ベースの作成

はじめにPhotoshopで新規ドキュメントを作成します。

ファイル→新規

を選択し、以下の設定でドキュメントを用意します。

プリセット:Web
幅:1000pixel
高さ:800pixel

※数値を入力するとプリセットは自動的に「カスタム」に切り替わります。

03_ドキュメントサイズ
このサイズは、これから作ろうとしているWebサイトのサイズなのですが、最終的にコーディングまで済ませてブラウザで見ると、サイトの左右外側に余白ができることになります。なので、その余白もデザインの段階で再現しておきましょう。
04_余白

いきなり画像を大きくしてしまうと、あとでコンテンツエリアと余白エリアの境目が分からなくなってしまいます。そうならないように先にガイドを引きましょう。図のようにドキュメントの左右に2本ガイドを引いてください。

05_ガイド

ではドキュメントサイズを広げましょう。

イメージ→カンバスサイズ
幅:1100px

に設定して画像を広げます(余白のサイズはだいたいでOKです)。

06_カンバスサイズ

これで余白を含めたドキュメントサイズになりました。はじめから余白を含めたサイズで画像を作っても良いのですが、前述したようにコンテンツエリアと余白エリアの境目が分からなくなってしまうので、この方法が便利です。

これでドキュメントの準備が出来ました。
ガイドの内側にデザインを作成していきましょう。
07_ドキュメント準備完了

基本レイアウトの作リ方02へ

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です