目次

• 知っておきたい基礎知識

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サイトインターフェースデザイン配色例