デジハリデザインスクールシリーズ『Webデザイン Illustrator ＆ Photoshop』

［表紙］デジハリデザインスクールシリーズ『Webデザイン Illustrator ＆ Photoshop』

紙版発売

B5判／224ページ／CD1枚

定価3,058円（本体2,780円＋税10%）

ISBN 978-4-7741-3418-5

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

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

書籍の概要

この本の概要

「デジハリ」デザインスクールシリーズの1冊です。Webサイト制作現場では，インターフェイスの多くはWeb作成ソフトで直接行うのではなく，IllustratorとPhotoshopの組み合わせで作られています。

本書は，IllustratorとPhotoshopを利用してWeb素材を作成するための解説書です。実際のデザイン成果物を作成しながら，その手順を詳しく解説します。デジタルハリウッドの監修のもと，初級者から読めるレベルになっており，この書籍を一冊読めば，Web素材作成の基礎を習得できる内容になっています。CS3対応。

こんな方におすすめ

  • IllustratorとPhotoshopでWebサイトをデザインする工程を学びたい人

著者の一言

本書は，「Illustrator」と「Photoshop」を使ってWebサイトのインターフェースデザインを初めておこなう方を対象に，実制作の手順に沿って工程を進めながら，Webサイトのインターフェースデザインの流れと，ソフトの操作やテクニック，両ソフトの連携を学んでいただけるように執筆したものです。

デジタルハリウッドの教室でも数多くの受講生へ指導を行っている現役デザイナーを中心に，「プロを目指す」ために理解しておかなければならない技術や知識を絞り込み，できるだけ平易な記述で執筆を行っております。

本書での学習を通じて，Webサイトのインターフェースデザインの工程である，ワイヤーフレームの作成，デザインの作成，画像のスライスと最適化，書き出しの作業を行いながら，デザインの現場で役立つ技術や知識を習得いただくのはもちろんのこと，Webサイトのインターフェースデザインをおこなう楽しさを体感していただければ幸いです。

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

デジハリならではのデザイン講座
みなさん，いかがお過ごしでしょうか。新年度や新学期がはじまったことにより，新しい生活を始めたかたも多いと思います。新生活が始まったことにより，語学や資格など，新しいことにチャレンジしようとしている方も多いかと思います。

目次

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

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

著者プロフィール

デジタルハリウッド

「マルチメディア社会に向けて，世界に通用するトップ・クリエイターを育成する」という教育理念のもと，カルチュア・コンビニエンス・クラブ，日立製作所，タイトー，内田洋行，関西テレビ放送，バンダイナムコゲームスなど，日本の産業界をリードする企業群の出資を受けて1994年10月に設立。

デジタルハリウッドのコンセプトである「産学協同」に賛同する企業群と共に，カリキュラムの共同開発，インターンシップ・OJTなどを取り組み，「業界から本当に必要とされる人材の育成」を行っている。現在は専門スクール，オンラインスクール（通信教育），大学，大学院の運営，法人研修やコンサルティング事業など，幅広い教育サービスを展開している。

HP：http://www.dhw.co.jp