プロになるためのWebデザイン入門講座 実践で役立つPhotoshop&Illustrator徹底ガイド

[表紙]プロになるためのWebデザイン入門講座 実践で役立つPhotosho

B5判/288ページ

定価(本体2,580円+税)

ISBN 978-4-7741-5856-3

ただいま弊社在庫はございません。

電子版

→学校・法人一括購入ご検討の皆様へ

書籍の概要

この本の概要

Webデザインのプロを目指す方に,Photoshop,Illustratorを使った制作テクニックを解説します。第一線で働くプロの多くは,Photoshopを使用してWeb制作を行っています。本書は,Photoshopでいかに美しく,かつ制作効率を上げてWebデザインを作るかを重視した解説,実際に手を動かしながらの演習というスタイルを採っています。バナー制作による演習を経てから,Webサイトのデザインカンプ制作にステップアップ。制作物を実際にWebで表示できるよう,HTML/CSSコーディングの初歩まで学習できます。

こんな方におすすめ

  • Webデザイナーを目指しているひと
  • Photoshopを使ったWebデザインを学習したいひと

この書籍に関連する記事があります!

Webデザイナーが身に付けるべきスキル
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部分のコーディング
  • メニュー部分のコーディング
  • フッターのコーディング
  • 仕上げ
  • カフェサイトをアレンジする