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

基本レイアウトの作リ方01からの続きです。

では具体的に画面内のパーツを作っていきましょう。
デザインは基本的に「図形」「テキスト(文字)」「写真・画像」この3つのパーツからできています。各パーツは以下のツールを使って作ります。

図形:シェイプツール(又はIllustrator)
テキスト:文字ツール
写真・画像:各種ツール

今回は「写真・画像」は使用しないので、シェイプツールと文字ツールを主に使用します。
08_ツール

ベース部分のデザイン

まずはデザイン全体の下地となる部分を作ります。
背景全体を黒で塗りつぶしましょう。
背景色を黒にしてCtrl+Deleteキーで塗りつぶします。
01ベース

その上にシェイプツールを使って、コンテンツエリアとなる白い領域を作成しましょう。
02コンテンツエリア

さらにヘッダーの背景となるエリアにもシェイプを作成します。
ここでレイヤー名も整理しておきましょう。
03ヘッダー背景

文字ツールを使ってタイトルを入力します。
04タイトル

ナビゲーションの作成

まずはボタンを一つ作ります。
シェイプで四角形を作ってから文字ツールで文字を入力します。
行揃えは中央揃えにしておきましょう。あとでテキストを入力し直す際に役立ちます。
また、四角形にはレイヤースタイルの「境界線」を使用して罫線を設定します。
05ナビ0105ナビ02

ボタンと文字のレイヤーをまとめて選択し、Alt+ドラッグでコピーします。
その後、各ボタンのテキストを修正しましょう。テキストを中央揃えにしておいたので、文字数が違う場合でも左右均等になってくれます。
05ナビ03

図のようにレイヤーを整理します。
フォルダーにまとめたいレイヤーを選択してControl+Gでグループ化できます。
(グループ解除はShift+Control+G
このあとの手順でも、その都度レイヤーを整理しながら作業してください。
06レイヤー整理

サイドメニューの作成

シェイプでベースとなる四角形を作り、その上にテキストを配置します。
テキストの行頭にアイコンを入れるので少し開けておきましょう。
07_サイドメニュー01

テキストは図のように設定してください。
この部分は最終的にHTMLで表示させるテキストになるので、アンチエイリアスを「なし」に設定してブラウザで表示される文字と同じに見えるようにします。
※行揃えは左に戻しておきます。
08_フォント

アイコンを作成します。
角丸長方形ツールと多角形ツールを使って図のようにアイコンを一つ作成してください。
09_アイコン

アイコンを構成しているレイヤーを全て選択して、

右クリック→スマートオブジェクトに変換

を選択してアイコンをスマートオブジェクトにします。
10_スマートオブジェクト

アイコンをAlt+ドラッグでコピーして4つにします。
11_アイコン複製

スマートオブジェクトをコピーした場合、すべてのスマートオブジェクトはリンクされています(例外もあります)。
なので、1つのスマートオブジェクトに変更を加えることで、他のスマートオブジェクト全てに一括で変更を加える事が出来ます。
実際に試してみたいので、アイコンレイヤーのレイヤーサムネイルをダブルクリックしましょう。
11_アイコン展開1

別ウィンドウでアイコンが開きます。
このようにスマートオブジェクトに変換した部品は、別ファイルとして管理されます。
ではベースの角丸四角系の色を変えて上書き保存してみてください。
11_アイコン展開2

もとのドキュメント内にある全てのアイコンの色が変わったはずです。
このように、スマートオブジェクトを使用すると一括修正が楽になります。
11_アイコン展開3

本文の作成

本文エリアを作成します。
長い文章を配置する場合は、文字ツールで必ずテキストボックスを作ってください。
12_テキストボックス

ダミーテキストを生成するサイト「すぐ使えるダミーテキスト」でダミーテキストを作成し、コピー&ペーストします。行揃えは「均等配置」にすると、ボックスの両端に文字が揃います。
13_流し込み

見出しを作成します。
テキストボックスの位置を少し下にずらして、大見出し「ABOUT」が配置できるスペースを作ります。見出しは短い文章なので、テキストボックスは作らずに入力してかまいません。
また中見出し「会社概要」は、背景にシェイプツールを使ってオビを作ってください。
14_見出し

フッターの作成

シェイプとテキストでフッターを作成します。
テキストはセンター揃えにします。
16_フッター

画像エリアの作成

シェイプツールを使って画像エリアを作成します。
15_写真エリア

レイヤーは最終的に以下のようになります。レイヤー名やフォルダー名も含め、整理されていないレイヤーが残っていたら、しっかり整理しておきましょう。
17_レイヤー

以上で基本的な画面構成は完成です。
あとはここに写真や画像を配置し、各パーツの処理を凝ったものにしていくことで、かっこいいWEBデザインサイトが完成します。

コメントを残す

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