目次

Chapter 1　Webサイトのワイヤーフレームを作成しよう

• ワイヤーフレーム作成の準備をする
• ワイヤーフレームを作成する準備
• TIPS　垂直方向・水平方向について
• レイアウトボックスを作成する
• ヘッダ部分のレイアウトボックスを作成する
• TIPS　Webセーフカラー
• TIPS　残りのレイアウトボックスを作成する
• IllustratorデータからPhotoshopデータへ書き出す
• Photoshopデータに書き出す

Chapter 2　Webサイトのインターフェースデザインをしよう

• Webサイトのインターフェースデザインの準備をする
• Illustratorで作成したワイヤーフレームをPhotoshopで開く
• デザインをはじめる準備
• ワイヤーフレームの表示を設定する
• 背景画像を作成する
• 背景を設定する
• 背景画像を作成する
• ヘッダー部分を作成する
• ヘッダーを作成する
• マスク後に画像のレイアウト位置を変更する方法
• コンテンツ領域を作成する
• Webサイトのコンテンツ（左）を作成する
• TIPS　同じレイアウトや形状のものを複製する
• Webサイトのコンテンツ（右）を作成する
• フッター部分を作成する
• フッターを作成する

Chapter 3　テーブルコーディング用のWebサイト画像を書き出そう

• テーブルコーディング用の画像にスライスする
• TIPS　書き出しとスライスについて
• スライス用のドキュメントを作成する
• 数値入力で画像をスライスする
• TIPS　スライスツールとは
• グリッドや写真を目安にスライスする
• 画像を最適化して書き出す
• 分割した画像をWebサイト用に保存する
• TIPS　Webおよびデバイス用に保存について

Chapter 4　CSS（スタイルシート）用のWebサイト画像を書き出そう

• CSS（スタイルシート)用の画像にスライスする
• スライス用のドキュメントを作成する
• CSSコーディング用に画像をスライスする
• TIPS　テーブルコーディング用スライスとCSSコーディング用スライスの違い
• 画像を最適化して書き出す
• Webおよびデバイス用に保存する
• 必要な画像を絞って書き出す
• 必要な画像を絞ってスライスする
• メニューボタンをスライスする

付録

• Illustrator編
• Illustratorメニュー紹介
• Illustratorツール紹介
• Illustrator基本パネル紹介
• Photoshop編
• Photoshopメニュー紹介
• Photoshopツール紹介
• Photoshop基本パレット紹介
• ショートカット編
• Illustratorショートカット一覧
• Photoshopショートカット一覧
• カラー・配色編
• Webセーフカラー216色一覧
• Webサイトインターフェースデザイン配色例