書籍概要

世界一わかりやすい教科書

世界一わかりやすい Illustrator&Photoshop&XD Webデザインの教科書

著者
発売日
更新日

概要

Webデザインの現場では必須のツールといえるIllustratorとPhotoshopは,アイコンやSVGの制作,写真の補正や加工など,高度なデザイン作業においては欠かせません。一方,プロトタイピングの普及でWebデザインのワークフローが変化し,制作工程ではCCライブラリを使ったアセット共有のほか,プロトタイプツール(Adobe XD,Sketchなど)や各種デバイスでの表示確認ツールと連携し,効率よく制作を進めるスキルが重要になっています。モダンなWebデザイン制作現場の知見を取り入れ,XDを含めた複数ツールの長所を組み合わせて使い分けていく,いままさにWebデザインをしている人のためのAiとPsとXDの活用術のテキストです。

こんな方におすすめ

  • WebデザインでのIllustratorとPhotoshopとXDの活用法を知りたい方
  • Adobe CCを中心に制作をしているWebデザイナー
  • XD、Sketch、Zeplinなどのツールと連携して使いたい方

著者から一言

本書は,Adobe IllustratorとPhotoshopの基礎操作をご存じの方を対象に,Webデザイン業務で実際に使えるテクニックの初歩を学ぶための学習書です。

「Illustratorで基本的な図形の作成はできる」「Photoshopで写真の色を変えたり汚れを消したりする操作はできるけれど,Webデザインを実際にどう進めていくのかよくわからない」といったレベルのデザイナー志望者さん,仕事を始めたばかりのジュニアレベルのデザイナーさんの役に立つよう,現役デザイナーとプロのインストラクター4人が集まり,現場で使われているテクニックを幅広く学べるように構成しました。

また,この書籍では,IllustratorとPhotoshopだけではなく,2017年に正式版が発表されたUIデザイン/プロトタイピングツールのAdobe XDの使い方も解説しています。XDは非常に軽い操作感とシンプルに絞り込まれた描画ツール類が特徴的なアプリケーションで,IllustratorやPhotoshopで制作したアイコンや写真を取り込んでレイアウトしたり,画面間の遷移を表したプロトタイプをつくったりすることができます。

繊細なベクトルアートを制作できるIllustrator,ビットマップデータの編集とリッチなグラフィック制作ならお任せのPhotoshop,実際に動くプロトタイプを軽い操作で作成できるXD。それぞれの特長を活かせるようになると,デザイナーとしての幅が格段に広がります。

Webサイトの閲覧環境がますます多様化するなか,制作手法/デザインツールも百花繚乱の様相を呈しています。「私はこの手法/ツールしか使えない」と固定してしまうことなく,案件に合わせて最適なものを選べるようになったとき,デザイナーとして成長している自分を実感できることでしょう。

その成長の一歩をお手伝いできる存在になれるよう,本書の中にはさまざまなパターンの作例をご用意しておきました。必要なところから拾い読みしてもよし,最初から通読して練習してもよし,ご自分のニーズに合わせてご活用いただければ幸いです。

(「はじめに」より)

サンプル

samplesamplesample

目次

Lesson01 Webデザインにおける各アプリの使い分け

  • 1-1 Web制作のワークフロー
  • 1-2 Photoshop向きのデザイン・作業
  • 1-3 Illustrator向きのデザイン・作業
  • 1-4 Adobe XD向きのデザイン・作業
  • 1-5 Sketch向きのデザイン・作業
  • 1-6 CCアプリ間の連携について
  • 1-7 モバイルアプリとの連携について

Lesson02 ワイヤーフレームからレイアウトへのスムーズな進行

  • 2-1 テキストデータの上手な取り回し
  • 2-2 レイアウトデータに効率よくテキストを取り込む
  • 2-3 一歩進んだワイヤーフレームの作成を検討しよう
  • Q 練習問題

Lesson03 Illustratorでアイコンやロゴマークなどのパーツを制作しよう

  • 3-1 再編集しやすさを意識してパーツを作成しよう
  • 3-2 新しい[ピクセルグリッドに整合]を使おう
  • 3-3 Webデザインで使える[効果]
  • 3-4 Webデザインで使える[アピアランス]
  • 3-5 SVGの最適な書き出しと配信設定
  • 3-6 アイコンを制作してみよう
  • Q 練習問題

Lesson04 Photoshopで写真の編集をしよう

  • 4-1 スマートオブジェクトを利用する
  • 4-2 調整レイヤーを指定する
  • 4-3 外部ファイルやAdobe Stockを読み込む
  • 4-4 スマートフィルターで写真を補正する
  • Q 練習問題

Lesson05 Photoshopで写真・パーツ加工をしよう

  • 5-1 レイヤー効果でボタンを作る
  • 5-2 ブラシを使った効果
  • 5-3 加工としてのマスク
  • 5-4 テクスチャをプラスする
  • Q 練習問題

Lesson06 Creative Cloudライブラリへのパーツの登録と活用

  • 6-1 Creative Cloudライブラリとは
  • 6-2 CCライブラリにパーツを追加する
  • 6-3 Capture CCを使ってパーツをつくる
  • 6-4 CCライブラリのアセットを利用する
  • 6-5 CCライブラリを共有する
  • Q 練習問題

Lesson07 PhotoshopでのWebページ制作テクニック

  • 7-1 ガイドレイアウトをつくろう
  • 7-2 アートボードの追加とサイズ変更
  • 7-3 繰り返し使うパーツを共通化しよう
  • 7-4 スマートオブジェクトでパーツを共通化する
  • 7-5 リンクでパーツを共通化する
  • 7-6 CCライブラリで共有パーツを管理する
  • Q 練習問題

Lesson08 XDを利用したレイアウトをしよう

  • 8-1 ドキュメント・アートボード・グリッドを設定する
  • 8-2 基本的な図形とテキストを作成する
  • 8-3 [アセット]パネルの活用
  • 8-4 写真データをXDに取り込む
  • 8-5 CCライブラリを利用したアセット共有
  • 8-6 リピートグリッドで繰り返しを作成する
  • Q 練習問題

Lesson09 XDを利用したプロトタイプ作成を学ぼう

  • 9-1 プロトタイプとは
  • 9-2 XDでプロトタイプを作成してプレビューする
  • 9-3 XDで作成したプロトタイプを公開する
  • 9-4 XDモバイルアプリで実機確認する
  • Q 練習問題

Lesson10 各アプリで効率的にテキストをデザインする

  • 10-1 PhotoshopとIllustratorのテキストの違い
  • 10-2 Photoshopでのテキストデザイン
  • 10-3 Illustratorでのテキストデザイン
  • 10-4 テキストのスタイルを共有する
  • 10-5 フォントを追加する・管理する
  • Q 練習問題

Lesson11 Photoshopから画像を書き出そう

  • 11-1 クイック書き出しを利用して画像を書き出す
  • 11-2 [書き出し形式]で画像を書き出す
  • 11-3 画像アセット生成で画像を書き出す
  • 11-4 高精細ディスプレイ向け2倍サイズ画像の書き出し
  • Q 練習問題

Lesson12 Illustratorから画像を書き出そう

  • 12-1 オブジェクトやグループをアセットに登録する
  • 12-2 IllustratorでSVGを書き出す設定
  • 12-3 書き出したSVGの最適化
  • 12-4 IllustratorでPNGやJPGを書き出す設定
  • 12-5 マスクしたオブジェクトの書き出し
  • Q 練習問題

Lesson13 XDからの画像書き出しとコーダーとのデータ共有

  • 13-1 XDから画像を書き出そう
  • 13-2 デザインスペックでコーディング情報を共有する
  • Q 練習問題

Lesson14 PSD・AIファイルからCSSやテキストを抜き出そう

  • 14-1 DreamweaverでPSDからCSSやテキストを抜き出す
  • 14-2 Creative CloudエクストラクトでPSDからCSSやテキストを抜き出す
  • 14-3 AIからCSSやテキストを抜き出す
  • Q 練習問題

Lesson15 ほかのアプリとの連係について知ろう

  • 15-1 Web制作でよく利用されるツールやサービス
  • 15-2 SketchとAdobeアプリのデータの互換性
  • 15-3 Photoshopで作成したカンプをZeplinで読み込む
  • 15-4 XDで作成したカンプをZeplinで読み込む

付録 

  • 各アプリの[CCライブラリ]パネルの対応状況
  • Adobe XDに関する最新情報のチェック
  • Creative Cloudデスクトップアプリケーションの表示

サポート

ダウンロード

本書に掲載しているレッスンファイルをこのページからダウンロードしてご利用いただけます。

レッスンファイルご利用の前に

レッスンファイルのダウンロード方法については,本書のP.6「レッスンファイルのダウンロード」をよくお読みください。そこに記載してある「ID」と「パスワード」が必要になります。

レッスンファイルは容量の関係で,いくつかのレッスンごとに分割して提供しております。ファイルはZIP形式で圧縮されておりますので,ダウンロード後に展開して「デスクトップ」などの利用しやすい場所に移動してお使いください。

ダウンロードしたいレッスンのファイル名が記載されているボックスに,本書P.6に記載されている「ID」と「パスワード」を入力して,[ダウンロード]ボタンをクリックしていただくとダウンロードが開始されます。

*レッスンファイルについて,一般的な環境においては特に問題のないことを確認しておりますが,万一障害が発生し,その結果いかなる損害が生じたとしても,小社および著者はなんら責任を負うものではありません。また生じた損害に対する一切の保証をいたしかねます。必ずご自身の判断と責任においてご利用ください。

*レッスンファイルは,著作権法上の保護を受けています。収録されているファイルの一部,あるいは全部について,いかなる方法においても無断で複写,複製,再配布することは禁じられています。

以上のことをご確認,ご了承のうえ,レッスンファイルをご利用お願いいたします。

商品一覧