プロになるためのWebデザイン入門講座 実践で役立つPhotoshop&Illustrator徹底ガイド
この本の概要
Webデザインのプロを目指す方に，Photoshop，Illustratorを使った制作テクニックを解説します。第一線で働くプロの多くは，Photoshopを使用してWeb制作を行っています。本書は，Photoshopでいかに美しく，かつ制作効率を上げてWebデザインを作るかを重視した解説，実際に手を動かしながらの演習というスタイルを採っています。バナー制作による演習を経てから，Webサイトのデザインカンプ制作にステップアップ。制作物を実際にWebで表示できるよう，HTML/CSSコーディングの初歩まで学習できます。
こんな方におすすめ
- Webデザイナーを目指しているひと
- Photoshopを使ったWebデザインを学習したいひと
目次
Chapter1 Webに求められるデザインって何だろう？
Lesson1 目的から「良いWebデザイン」について考えよう
- ユーザビリティとアクセシビリティ
Lesson2 Web特有のレイアウトを知っておこう
- Webページの各部の呼び方
- ファーストビュー
- 既存のサイトからレイアウトを学ぶ
Lesson3 おさえておきたい色彩・配色の基礎
- 無彩色と有彩色
- 色相
- 明度
- 彩度
- HSB色空間とRGB色空間
- 16進数によるRGB色空間の表記
- どうすれば失敗なく色を選ぶことができるのか
- Photoshopのカラーピッカーで色を選ぶには
- トーンを統一する
- 失敗なく色の組み合わせを選ぶコツ
- HUE/360で配色する
- Webデザインで各色を使うときの注意
Lesson4 おさえておきたいフォントの基礎
- 明朝体
- ゴシック体
- セリフ体
- サンセリフ体
Chapter2 必要なアプリケーションと画像についての基礎知識
Lesson1 アプリケーションの特性をきちんと理解して使い分けよう
- Adobe Photoshop
- Adobe Illustrator
- Adobe Fireworks
- Adobe CSアプリケーションの機能比較
Lesson2 Webで表示される画像の特性を理解して使いわけよう
- JPEG
- GIF
- PNG
- SVG
- 画像のサイズや形式について
Chapter3 PhotoshopをWebデザインで効率的に使う方法
Lesson1 Webデザインが快適になる環境を設定しよう
- Windowsの環境設定
- Macの環境設定
- Photoshopのインストール
- Photoshopの設定ファイルの削除
- Photoshopの環境設定
- キーボードショートカットの設定
Lesson2 基本操作① 図形作成をマスターする
- 新規作成
- グリッドの表示
- カンバス周囲の色の変更
- 図形（シェイプ）の作成
- 長方形をドラッグで作成する
- 長方形をサイズ指定で作成する
- 図形（シェイプ）の移動
- 図形（シェイプ）の変形と移動
Exercise1 5つの正方形を作成し，移動する
Lesson3 基本操作② 文字作成をマスターする
- 文字の作成と調整
- 文字パネルを表示する
- 行送りを設定する
Exercise2 見やすい文字組み
Lesson4 基本操作③ レイヤー操作をマスターする
- レイヤーパネル
Exercise3 レイヤー作成の練習
- テキストの作成
- 角丸長方形の作成
- 角丸長方形の移動
- 角丸長方形の複製
- 角丸長方形のカラーを変更
- レイヤー名に「コピー」をつけないようにする
Exercise4 レイヤースタイルの練習
- レイヤースタイル
- ［レイヤースタイル］ダイアログの表示
- ［レイヤースタイル］ダイアログの操作
- レイヤースタイルの追加
Lesson5 基本操作④ 整列／塗りつぶし／ズームイン・アウト
- 整列
- 塗りつぶし
- ズームインとズームアウト
Exercise5 写真を紙焼き風にして，めくれたようなドロップシャドウをつける
- 写真の保存と貼り付け
- 写真の枠のレイヤースタイル
- 丸く膨らんだように見える影
- 両端がめくれたように見える影
Exercise6 レイヤースタイルを使ったやさしいデザインのボタン
- ボタンの土台の作成
- ボタンの土台のグラデーション
- ボタンの土台のざらっとした質感
- ボタンの土台の上側の光沢
- ボタンの土台の境界線
- ボタンの土台の境界線の外側にある線
- ボタンの上のテキスト
- テキストのドロップシャドウ
Lesson6 レイヤースタイルを使いまわすには
- ①レイヤースタイルのコピー
- ②レイヤースタイルの複製
- ③新規スタイルとして登録
Chapter4 必要な場面でIllustratorを使えるようにしておこう
Lesson1 PhotoshopとIllustratorはどう使い分けるのか
Lesson2 Illustratorを快適に使うための設定
- Illustratorのインストール
- Illustratorの設定の初期化
- Illustratorの環境設定
Lesson3 Illustratorの基本操作を学習しよう
- 新規作成
- 長方形や楕円形の作成
- 整列パネル
- レイヤーパネル
- ペンツールの使い方
- オープンパスとクローズパス
- パスの型抜きと分割
Chapter5 バナーのデザインでひと通りのテクニックを身につけよう
Lesson1 広告バナーの色使いについて知っておこう
Exercise1 Photoshopのマスク機能を活用した広告バナーの制作
- 写真素材のダウンロード
- 写真に選択範囲を作成し，コピー
- バナー用のカンバスを作成
- グラデーションレイヤーの作成
- 女性の写真をペースト
- カーテン風のテクスチャを作成
- 文字の作成
- 文字と女性のレイヤースタイル
- 下の文字
- 動きをつける
- 枠線
- Web用に保存
Exercise2 Illustratorを活用したキャンペーンバナーの制作
- どのようなパーツをIllustratorで制作するか
- Illustratorで形状を作成する
- Photoshopでバナーの土台となるファイルを新規制作
- Illustratorで作成した形状をPhotoshopにペーストする
- テキストを制作する
- 仕上げ
Chapter6 標準的なワークフローに沿ってWebサイトをデザインしてみよう
Lesson1 一般的なWeb制作のワークフローを知っておこう
- ディレクター，デザイナー，コーダーの役割
- Web制作のワークフロー
Lesson2 ヒアリングをしてクライアント（お客様）の要望をまとめよう
- クライアントからの要望をまとめてリストにする
Lesson3 サイトの構造を考え，サイトマップを作る
Exercise1 デザインカンプ作成① アイコン
- コーヒーのアイコンを制作する
- ドリンクのアイコンを制作する
- サンドイッチのアイコンを制作する
Exercise2 デザインカンプ作成② ページの土台
- ガイドを制作する
- 背景を制作する
- 背景用のパターンを制作する
Exercise3 デザインカンプ作成③ ロゴ
- 吹き出し部分を制作する
- ロゴを貼り付ける
Exercise4 デザインカンプ作成④ サイドバー
- サイドバー，コンテンツ部分の背景を制作する
- アイコンをサイドバー部分に配置する
- サイドバーに文字を配置し，整える
Exercise5 デザインカンプ作成⑤ コンテンツ
- コンテンツ部分に画像を配置する
- コンテンツ部分に文字とシェイプを配置し，整える
- Illustratorで地図を制作する
- 地図をPhotoshopにペーストし，マスクする
Exercise6 デザインカンプ作成⑥ フッター
- フッターを制作する
Chapter7 Dreamweaverによるコーディングの基礎を学ぼう
Lesson1 これからはマークアップにHTML5を使っていこう
- HTMLとは
- HTML5の基本的なマークアップ
- HTML5の新しいタグ
Lesson2 装飾はCSSを使おう
- CSSとは
Lesson3 さまざまなブラウザの知識を身につけよう
- さまざまなブラウザ
- 古いブラウザのバグについて
Lesson4 Dreamweaverの基礎知識と環境設定
- Dreamweaverに関するご注意
- Dreamweaverのアップデート
- Dreamweaverの環境設定
Exercise1 HTMLでサイトの構造をマークアップする
- 新規サイトを作成する
- HTMLを修正する
- テキストを流し込む
- HTMLでページ全体の構造を定義する
- ヘッダー，フッター，ナビゲーションなどをそれぞれ囲む
- EVENT，ACCESSをそれぞれ囲む
- フッターの著作権表示を文字参照にする
- HTMLのインデントをそろえる
- タイトルを記述する
Exercise2 デザインカンプから画像を書き出す
- なぜ画像を書き出す必要があるのか
- デザインカンプを開き，別名保存する
- 背景を書き出す
- その他の画像をスライスする
Exercise3 CSSで装飾する
- リセットCSSについて
- CSSファイルをHTMLファイルにリンクする
- ページの背景に，ダミーの完成画像を置く
- ヘッダー・ロゴのコーディング
- コンテンツ背景のコーディング
- リード文のコーディング
- EVENT部分のコーディング
- ACCESS部分のコーディング
- メニュー部分のコーディング
- フッターのコーディング
- 仕上げ
- カフェサイトをアレンジする
