WEB 制作実践講座｜プロトデザイン編 第 ❷ 「02 16 columns」と「03 24 columns」を削除しま す。 「16 columns」をクリックし、ページ下部の「ペー 1 章 ジを削除」アイコンをクリックします。 ❸ 「03 24 columns」をクリックし、ページ下部の 第 「ページを削除」アイコンをクリックします。 章 2 第 ❹ ファイル > 保存 と進めます。 3 章 ❺ 講座のサンプルフォルダーに、「sample 01 .fw.png」という名前で保存します。 Lesson 2 ワイヤーフレームの作成 《レッスンポイント》 テンプレートをもとにして、ワイヤーフレームの作成を行います。 【1】 ワイヤーフレームの作成 ▶▶ワイヤーフレーム内にオブジェクトを描きます。 ❶ 長方形ツールで「ロゴ」の部分の長方形を描画し、以下の通り設定します。 幅：255 px 高さ：35 px X：50 px Y：27 px 塗りのカラー：#ffffff ストロークのカラー：# 333333 チップのサイズ：1 px ストロークを内側に整列 ❷ テキストツールを選択し「ロゴ」と入力し、以下の通り設定します。 フォントファミリー：メイリオ フォントスタイル：Regular フォントサイズ：15 px フォントカラー：# 333333 中央揃え ❸ 選択ツールで、テキストオブジェクトと長方形を選 択し、ツールバーの整列ボタン、もしくは整列パネ ルで「水平方向中央揃え」と「垂直方向中央揃え」を クリックします。 ワイヤーフレームの作成 Section 1 37 第 2 章｜ Fireworks によるプロトデザイン 第 章 1 第 章 2 第 章 3 ❹ 右上に「電話番号」のオブジェクトを作成し、以下の通り設定します。 幅：354 px 高さ：25 px X：636 px Y：27 px ※その他の設定とテキストの設定は「ロゴ」と同じにします。 ❺ 「特長」のグローバルナビゲーションに該当する長方形を描画し、以下の通り設定します。 幅：220 px 高さ：44 px X：50 px Y：74 px 塗りのカラー：#ffffff ストロークのカラー：# 333333 チップのサイズ：3 px ストロークを内側に整列 ※テキストの設定は、「ロゴ」と同じにします。 One Point グローバルナビゲーション グローバルナビゲーションのボタンの幅は 960 Grid system の 3 カラム分を用いるため、ガイド にスナップして作成します。 ▶▶同様に「キャンペーン」「カリキュラムと教材」「製作者とスタッフ紹介」ボタンも作成します。 効率的に作成するために、グループ化してコピーしましょう。 ❻ 「特長」の長方形とテキストが選択された状態で右 クリックし、「グループ」を選びます。 ❼ コピーとペーストを行い、ボタンを隣に配置していきます。 ※ガイドやスマートガイドを使って、スナップさせながら配置します。 ❽ ボタンの中のテキストをテキストツールでクリックし、以下の通り書き換えます。 38 「キャンペーン」「カリキュラムと教材」「制作者とスタッフ紹介」 Section 1 ワイヤーフレームの作成
© Copyright 2024 Paperzz
