Amazon：GIMP
https://amzn.to/49RqVoU
GIMP パーフェクトガイド 単行本（ソフトカバー） – 2023/6/24
広田 正康 (著)
無料版Photoshopといえる人気のフリーウェア「GIMP」の解説書です。
Amazon：Inkscape
https://amzn.to/430i3ey
Inkscape パーフェクトガイド 単行本（ソフトカバー） – 2023/1/6
ピクセルハウス (著)
無料版Illustratorといえる人気のフリーウェア「Inkscape」の解説書です。
Amazon
画像素材の売れ筋ランキング
Amazon.co.jpの売れ筋ランキング。ランキングは1時間ごとに更新されます。
Webサイトを作る時に
コーディングをする前の作業で
ワイヤーフレーム、デザインカンプなどを作ります。
ワイヤーフレームの作り方、デザインカンプの作り方。
人によっては、ネットで調べて作成、独学とかで学んで作ってる方もいると思います。
Webの、制作系の仕事をしてる方なら、ワイヤーフレームとか、デザインカンプとか知ってると思いますが、人によっては、何それ？と思うかもです。
ワイヤーフレーム、デザインカンプは、PhotoshopIllustratorなど使わなくても、
他のソフトなどで作れます。
手書きで、書いて作ってもいいと思います。
Web系のサービスも進化してます。
昔はワイヤーフレームの作成など、Adobe系で作成してる人が多かったです。
その後にSketch、Adobe XDなど。
今では、Adobe系のソフトは月額制です。人によっては割高です。
最近では、Figma（フィグマ）など利用してる多いみたいです。
Figma（フィグマ）（基本無料、有料）
https://www.figma.com/
It all starts here · Sketch（有料）
https://www.sketch.com
UI/UXデザインと共同作業ツール | Adobe XD（基本無料、有料）
https://www.adobe.com/jp/products/xd.html
ワイヤーフレームならCacoo（カクー）で作ったり。
Cacooは（PSDファイルではないです）
Cacoo（カクー）: アイデアを今すぐこのキャンバスに
https://cacoo.com/ja/home
便利なアプリや、ソフトもいろいろあります。
Mac用の フリーソフト、アプリ、アップデータの新着情報をお届けするサイト
https://www.macsoft.jp/
フリーソフト100は無料で使える便利なソフトや無料情報を集めました。
パソコンで活用するデスクトップアプリ、USBメモリーを有効に利用できるソフト、Webアプリなど、フリーソフトとシェアウェア情報を紹介。
Canva
無料ですばらしいグラフィックデザインを共同作業で作成 – Canva
2021年10月
Webブラウザ上で動作、ダウンロード不要
Adobe「Photoshop」と「Illustrator」にWebブラウザ版 まずはβ版、データ閲覧までなら非会員にも開放
https://news.yahoo.co.jp/articles/38dca1b58b1433edfef510fa9c848c85114bdb38
初心者からちゃんとしたプロになる Webデザイン基礎入門 改訂2版 単行本（ソフトカバー） – 2023/9/22
栗谷幸助 (著), 相原典佳 (著), 藤本勝己 (著), 村上 圭 (著), 吉本孝一 (著)
WebデザインのためのPhotoshop+Illustratorテクニック
現在では、最新版が出てます。
WebデザインのためのPhotoshop+Illustratorテクニック[2020/2019対応] (日本語) 単行本（ソフトカバー） – 2020/8/1
瀧上 園枝 (著)
目次
WebデザインのためのPhotoshop+Illustratorテクニック 読んでみた。
CHAPTER 1 Webデザイン＋Photoshop＋Illustratorの基礎知識
CHAPTER 2 ワイヤーフレーム制作で使えるテクニック
CHAPTER 3 画像処理に使えるテクニック
CHAPTER 4 パーツ制作で使えるテクニック
CHAPTER 5 カンプ制作で使えるテクニック
ほんの一手間でプロっぽくなるPhotoshop＆Illustratorデザインの小ワザ 単行本（ソフトカバー） – 2023/6/17
島田 陽生 (著)
なぜ、自分のデザインはプロっぽくならないんだろう？
フォトショの5分ドリル 練習して身につけるPhotoshopの基本 単行本 – 2022/12/5
浅野 桜 (著), starmix (著), 楠田 諭史 (著)
練習して身につけるPhotoshopの基本
イラレの5分ドリル 練習して身につけるIllustratorの基本 単行本 – 2022/12/5
浅野 桜 (著), あさひな。 (著), 高橋 としゆき (著)
練習して身につけるIllustratorの基本
Adobe Creative Cloud キャンペーン
Adobe Photoshop
Adobe Illustrator
Amazon：Adobe
https://amzn.to/4ay9QRi
Adobeの製品は、たまにしか使わない人にとっては、今では高額なソフトです。
Adobe Illustrator（有料）
Adobe Photoshop（有料）
Adobe系のソフトを使うのを辞めた人も増えているそうです。
IllustratorやPhotoshopの代わりに、
無料で使えるソフトもあります。
Adobe Illustrator（有料）
Inkscape（無料）
https://inkscape.org/ja/download/
Adobe Photoshop（有料）
GIMP（無料）
https://www.gimp.org/
Adobe Photoshopの代わりに
GIMP（無料）
https://www.gimp.org/
Adobe Illustratorの代わりに
Inkscape（無料）
https://inkscape.org/ja/
また、PhotoshopのPSDファイルなど編集が出来るPhotopea（基本無料）
Photopea | Online Photo Editor
https://www.photopea.com
Krita無料（PSDファイルではないです）
https://krita.org/jp/
など、他にも、いろいろあります。
背景消し、髪の毛も切り抜ける、無料オンラインのサイト
写真・画像の背景を一瞬で消す – Remove Image Background
100％自動かつ無料
https://www.remove.bg/ja
PhotoKitはAIベースのオンライン画像エディタで、便利で使いやすいです。 背景を削除したり、画像からオブジェクトを削除したりできます。
無料の画像加工編集サイト – 無料オンライン画像ツール
https://photokit.com/?lang=ja
オンライン無料で画像背景透過 – PicWish
https://picwish.com/jp/
独学Photoshop 楽しく基本が身につくガイドブック 単行本 – 2022/9/21
Mappy Photo えりな&たじ (著)
Photoshopの本当に必要な基本を楽しく独学できる!
デザインのネタ帳 プロ並みに飾る文字デザイン Illustrator+Photoshop 単行本（ソフトカバー） – 2022/5/2
mito (著), マルミヤン (著), 佐々木 拓人 (著), 高橋 としゆき (著)
良質な文字あしらいで、デザインレベルをアップ!
Photoshopレタッチレシピ集 単行本（ソフトカバー） – 2022/6/24
楠田 諭史 (著)
Photoshopによるレタッチ・加工の、究極のレシピ集。
頑張らなくても速攻できる! パパッとデザインレシピ 単行本 – 2022/5/24
Power Design Inc. (著)
誰でもかんたん! マネするだけでできる時短デザイン本。
プロの手本でセンスよく! Photoshop誰でも入門 単行本（ソフトカバー） – 2022/5/31
塩谷 正樹 (著), 米澤 緑 (著), 滝川 雄貴 (著)
Photoshopをこれから学ぶすべての人々のための入門書、決定版!
(練習用素材・解説動画付き)動画でわかる! 1週間のPhotoshop入門 作品づくりをなぞって身につく基本スキル 単行本（ソフトカバー） – 2022/3/16
パパ (著)
Photoshopを始めたい・昔挫折したあなたにピッタリの1冊
【期間限定特典あり】思わずクリックしたくなる バナーデザインのきほん 単行本（ソフトカバー） – 2022/2/9
カトウ ヒカル (著)
バナーデザインで困った時は
この1冊で解決!
バナーは情報量の多いWeb上に掲載されるので
「パッと一目で情報を伝える」必要があります。
なので、目に留めてもらう工夫が必須!
(DLデータ付)デザイン初心者のためのPhotoshop Illustrator 先輩に聞かずに9割解決できるグラフィックデザイン超基礎 単行本（ソフトカバー） – 2022/1/25
Power Design (著), インプレス編集部 (編集)
新人デザイナーや、宣伝広報など社内デザイン担当者の方向けのPhotoshop、Illusutratorガイド。
QA形式で疑問点を先輩に教わっている感覚で解説しているのが特徴で、ポスター、Webバナーなど実際の業務での制作物を前提に、ソフトの画面の見方からデータの作り方、データの書き出し、印刷入稿方法、デザイン知識まで、現場のリアルな仕事を解説しています。WebやSNSの画像作り、印刷物のデータ入稿といった業務におすすめ。
Photoshop よくばり入門 CC対応 (できるよくばり入門) 単行本（ソフトカバー） – 2021/10/21
senatsu (著)
(PDF版電子書籍・練習用ファイル・解説動画付き)Illustrator よくばり入門 CC対応 (できるよくばり入門) 単行本（ソフトカバー） – 2021/11/4
石川 洋平 (著), 清水 健次 (著), 堀内 良太 (著)
いろいろな、いろ。 配色に着目したデザインレイアウトの本 単行本 – 2021/12/4
ingectar‐e (著)
ちょっとしたコツを押さえるだけで、センスのいい配色デザインができるようになる!
感覚よりも段取り力が大事! 一生役立つ「伝わる」デザインの考え方 単行本（ソフトカバー） – 2021/7/20
細山田デザイン事務所 (著)
一生懸命デザインしても、スタイリッシュに見えない。
既存のデザインをマネしてしまう。
クライアントの要望がわからない…
足し算デザイン&引き算デザイン 単行本 – 2021/11/2
Power Design Inc. (著)
デザインにも「足し算・引き算」という言葉があります。
装飾・要素を追加して楽しく賑やかにする「足し算デザイン」、
不要な装飾・要素をそぎ落とし必要最低限のものだけで構成した「引き算デザイン」。
Photoshopレタッチ 仕事の教科書 3ステップでプロの思考を理解する 単行本（ソフトカバー） – 2021/9/10
高嶋 一成 (著), マルミヤン (著), 佐藤 悠大 (著)
写真を魅せる正しいプロの技、教えます！
教科書では教えてくれないHTML&CSS 単行本（ソフトカバー） – 2021/7/17
狩野 祐東 (著)
各種講座や書籍でHTML&CSSの学習を終えても、実際の現場では、求められるレベルの業務をこなせない人が少なくありません。デザイナーから渡されたデザインの全体を把握・解釈して、HTML&CSSで書き起こす力が弱い傾向にあります。
【Amazon.co.jp 限定】あるあるレイアウト すぐに使えて素敵に仕上がるデザインカタログ集(特典:困った時に使えるレイアウト集 特別編集版PDFデータ配信) 単行本（ソフトカバー） – 2021/5/28
ingectar-e (著)
大好評『あるあるデザイン』のレイアウトカタログが登場
フォントのふしぎ ブランドのロゴはなぜ高そうに見えるのか？ 単行本（ソフトカバー） – 2011/1/17
小林 章 (著)
初心者からちゃんとしたプロになる Illustrator基礎入門 単行本（ソフトカバー） – 2021/5/7
尾花 暁 (著), 高橋 としゆき (著), 樋口 泰行 (著), & 2 その他
【Amazon.co.jp 限定】Illustratorデザインベーシック 制作に役立つ基本とテクニック(特典:井上のきあオリジナル「配色チャート」データ配信) 単行本（ソフトカバー） – 2021/3/18
井上 のきあ (著)
Adobe Illustratorの膨大な機能の中から、誰もが使う基本的な機能をまとめ、複数のアプローチを整理することで、効率よく学べるように集約した機能リファレンスガイドです。
Illustratorデザインレシピ集 単行本（ソフトカバー） – 2021/4/16
奥田 直子 (著)
Illustratorによるデザイン制作の究極のレシピ集。
基礎から時短ワザで覚えるIllustratorの教科書 単行本 – 2021/4/12
広田 正康 (著)
イラレのスゴ技 動画と図でわかるIllustratorの新しいアイディア (日本語) 単行本（ソフトカバー） – 2021/2/20
初心者からちゃんとしたプロになる Photoshop基礎入門 (日本語) 単行本（ソフトカバー） – 2021/2/2
画像編集ソフト「Adobe Photoshop」の操作方法や使い方を、初歩からていねいに解説した本。
Manaさん「1冊ですべて身につくHTML & CSSとWebデザイン入門講座」の続編が出版されるみたいです。CSSやJavaScriptを使っての動きやレイアウト組み、またSassを使った、より実践向けの解説本
ほんの一手間で劇的に変わるHTML&CSSとWebデザイン実践講座 (日本語) 単行本（ソフトカバー） – 2021/2/20
Mana (著)
Chapter 1 最初に知っておこう! Webサイトの基本と必携ツール
Chapter2 ランディングページで学ぶ「レスポンシブWebデザインとフォント」
Chapter3 ブログサイトで学ぶ「装飾とカラムレイアウト」
Chapter4 コーポレートサイトで学ぶ「表組み、フォーム、JavaScript」
Chapter5 イベントサイトで学ぶ「特定ページ作り方とアニメーション」
Chapter6 ギャラリーサイトで学ぶ「動画と画像の使い方」
Chapter7 HTMLやCSSをより早く、より上手に管理できる方法
Chapter8 サイトの投稿と問題解決
WebデザインのためのPhotoshop+Illustratorテクニック(CC 2017対応版) 単行本（ソフトカバー） – 2017/3/30
今日から役立つアイデアを満載! Illustrator魔法のレシピ (日本語) 単行本 – 2020/2/10
思い描いた世界を作る Photoshopレタッチ・加工 魔法のレシピ (日本語) 単行本 – 2020/2/10
世界一わかりやすい Illustrator 操作とデザインの教科書 ［改訂3版］ (日本語) 単行本（ソフトカバー） – 2020/2/27
初心者からちゃんとしたプロになる Webデザイン基礎入門〈HTML、CSS、レスポンシブ〉 単行本（ソフトカバー） – 2019/9/25
1冊ですべて身につくHTML & CSSとWebデザイン入門講座 単行本 – 2019/3/16
Mana (著)
HTML&CSSとWebデザインが 1冊できちんと身につく本 大型本 – 2017/7/21
HTML5&CSS3標準デザイン講座 30LESSONS【第2版】 単行本（ソフトカバー） – 2019/5/24
草野 あけみ (著)
新ほめられデザイン事典 写真レタッチ・加工[Photoshop] 大型本 – 2018/9/10
本書は定番のレタッチから、
トレンドの加工表現、
また驚くようなコラージュまで
一冊にまとめた150の上質レシピ集です。
目次
Chapter1. Basic[基本]
Chapter2. Person[人物]
Chapter3. Scene[風景]
Chapter4. Typography[文字・ロゴ]
Chapter5. Cool&Cute[クール&キュート]
Chapter6. Collage[コラージュ]
Photoshop 10年使える逆引き手帖【CC完全対応】[Mac & Windows対応] (ああしたい。こうしたい。) 単行本 – 2018/6/21
Illustrator 10年使える逆引き手帖【CC完全対応】[Mac & Windows対応] 単行本 – 2019/9/26
Photoshop しっかり入門 増補改訂2版 【CC完全対応】[Mac & Windows対応] 単行本 – 2018/5/22
Illustrator しっかり入門 増補改訂 第２版 【CC完全対応】［Mac & Windows 対応］ 単行本 – 2018/9/21
世界一わかりやすいIllustrator & Photoshop & XD Webデザインの教科書 単行本（ソフトカバー） – 2018/10/5
世界一わかりやすい Illustrator & Photoshop 操作とデザインの教科書 CC/CS6対応版 単行本（ソフトカバー） – 2018/2/23
Photoshop & Illustratorデザインテクニック大全 単行本 – 2018/4/20
Webサイトを制作するには、いろんな仕方があると思いますが。
Webデザインの本とかで、
ワイヤーフレームの制作の手順だけの書籍。
デザインカンプの制作の手順だけの書籍とかって、なかなか無いかもです。
Webデザインの本とか、ページの都合上、仕方がないから載せてないかもですが。
ほとんどの、Webデザイン系の書籍とか、完成された、ワイヤーフレーム、デザインカンプなど載ってるだけです。
WebデザインのためのPhotoshop+Illustratorテクニック(CC 2017対応版) 単行本（ソフトカバー） – 2017/3/30
自分は、求職者支援訓練で、Webクリエイターのコースに通ってた時に、
制作課題で、Webサイトを作らされました。
PhotoshopやIllustratorなど使った事があったので、コツさえわかれば作れますが、
ほとんどの人が、ワイヤーフレームとかデザインカンプを
PhotoshopやIllustratorを使っての作り方などがわからず、
どうやっていいのか、わからない。
講師も使えなく。
ほとんど説明とかしないので。
生徒は、インターネットとかで調べながら、制作しての作業だった。
「Adobe Photoshop」と「Adobe Illustrator」は
デザインのプロフェッショナルに長く愛用されているアプリケーションです。
現在では、昔とは違い、使う場合は、利用の料金がかかります。
Webサイトの
ワイヤーフレームを作って、
次にデザインカンプを作り
コーディングする時に、デザインカンプから、画像をスライス（切り抜いて）して、画像のパーツを切り出します。
今では違うとは思います。
いろいろな仕方があると思うので。
なんか、Web制作（画像系）=Adobe系のソフトを使うって、ほとんどだけど。
この本、
もっと早くに出て欲しかった本かもです。
Web系のスケールの先生とかって、独学でしてる人も多いので。
PhotoshopやIllustratorなど他
これだけ、いろんな本が出るのは、やっぱり求職者支援訓練に通っても、職に就けない方が多いのかなと思います。
若い人なら別だけど、
30代後半、40代とか、または50代とかで、
転職で、Web系の求職者支援訓練に通っても、
その期間内にスムーズにWeb系の職に就けないのが問題があるかもだけど。
システムが悪いかも。
求職者支援訓練に通っても、自分の希望した職には就けないです。
前に、テレビ東京のワールドビジネスサテライトで、Webの職に就いて
残業代が出ないブラック系の会社とか放送してたけど、
そのような会社も多いと思うし。
[WBS]ワールドビジネスサテライト
テレビ東京の報道番組です。
http://www.tv-tokyo.co.jp/wbs/
また、Web系とかで働くなら、ポートフォリオなども作成すると思います。が、なかなか良い本もないかも。
WebとDTPでは違うと思うけど。
採用担当者の心に響くポートフォリオアイデア帳 大型本 – 2016/2/3
クリエイティブ業界を目指す人のための ポートフォリオ見本帳 単行本（ソフトカバー） – 2011/10/20
デザイン・クリエイティブ業界を目指す人のための ポートフォリオ見本帳 単行本（ソフトカバー） – 2019/2/1
自分は、昔にWebデザインを学ぶのに、買った本で、
Webデザイン集中講座、
この本を持ってますが、今では内容が古いです。
クリエイターの卵のための Webデザイン集中講座 単行本（ソフトカバー） – 2012/4/21
グラフィックデザイン Illustrator & Photoshop (デジタルハリウッドの本) 大型本 – 2015/10/8
クリエイター養成スクール「デジタルハリウッド」で使用されているテキストを書籍化したシリーズ「デジハリシリーズ」のIllustrator、PhotoshopのAdobe CC対応版書籍です。
アプリケーションの基本的な操作を学ぶチュートリアル部と、架空の雑貨屋のチラシや、英会話教室のWebサイトを作成しながら各アプリケーションの使い方を学んでいくワーク部に分かれており、デジタルハリウッドの監修のもと、初心者から読めるレベルになっており、この書籍を一冊読めば,PhotoshopとIllustratorの基礎を習得できる内容になっています。
2015年の発売で、古い本ですが
デザインカンプの作り方など載ってます。
PhotoshopやIllustratorで作成した、デザインカンプを
全部のパーツの画像を切り出し、その画像を使ってコーディングの作業。
そしてCSS3などが利用できるようになり、
画像を使わなくても、CSS3で、表現できる部分は、CSS3を使ってのコーディング。
Web系などは年々進化してます。
Webフォントが使えたり、Illustratorでも、SVGなどの画像が使えたり。
いずれは、写真の画像しか使わなくなるかもです。
PhotoshopやIllustratorは、人によっては、古いバージョンを使ってる人もいます。
自分はCCシリーズではなく、CSバージョンは、使ってました。
今では、昔と違い、PhotoshopやIllustratorを使うには、
月額制や年間とかの使用料金を払う感じになってます。
仕事とかで
PhotoshopやIllustratorは、毎日使うなら、いいですが、
個人とか、趣味とかで利用してて、たまにしか使わないなら、もったいないかもです。
有名な、デザインの先生も言ってましたが、PhotoshopとIllustratorの契約を辞めてたと言ってました。使う時にだけ、契約すればいいと。
人によっては、「Adobe Photoshop」と「Adobe Illustrator」は、今では
月額の使用料金が、かかるので、辞めてる人も多いです。
Macを使ってる方なら
PhotoshopやIllustratorの他に、Sketchを使ってる方も多いです。
使いやすいとかで。
Sketch
https://www.sketchapp.com/
UIデザイナーのためのSketch入門&実践ガイド 改訂第2版 単行本 – 2018/11/16
Affinity Designer
Illustratorの代用に便利かもです。
Adobe Museランディングページ制作ガイド ~コード知識ゼロで作るWeb広告 大型本 – 2017/12/2
Photoshop+Illustrator+InDesignで基礎力を身につけるデザインの教科書 大型本 – 2017/5/28
はじめてAdobeのアプリケーションに触れる方を対象に、グラフィックソッフトウェアの定番であるPhotoshop、Illustrator、InDesignの3大アプリを、デザイン制作を通じて基礎から学ぶことができる。
WebデザインのためのPhotoshop+Illustratorテクニック 読んでみた。
Webデザイン系の職場だと
AdobeのPhotoshopやIllustratorのソフトを使うのが多いです。
WebデザインのためのPhotoshop+Illustratorテクニック[2020/2019対応] (日本語) 単行本（ソフトカバー） – 2020/8/1
瀧上 園枝 (著)
Webサイトなど作る前の手順や、ワイヤーフレームの作り方、デザインカンプの作り方、
サンプルを使っての、IllustratorやPhotoshopの操作方法。
バナーやナビゲーション、写真のトリミングの仕方とか
Webサイトに必要なテクニックなどが、Chapterごとに別れてて、解説付きで載ってます。
Webデザインの本といっても、テキストエディタを使ってのコーディングの仕方とかは、この本では載ってないので、他の本を、参考にしてください。と案内もされてます。
この本は、Chapterは1から5まであり。
サンプルデータもあります。
ページの構成も、Chapterで別れてかれているので見て、わかりやすいと思います。
Illustrator、Photoshopのアイコンが表示されているので
このページでは、Illustratorを使う。
このページではPhotoshopを使うとか、ひと目見て、確認できます。
本ではMacでの操作方法でしてます。
Windows版の操作方法も、メモで解説されてます。
デザイナーも、コーダーも必読！
Webデザインをより効率的に行うために、
Webのビジュアルをより魅力的にするために、
知っておきたいPhotoshop、Illustratorの
63の知識とテクニック。
本書が対応しているアプリケーションのバージョン
Adobe Creative Cloud （CC）2017基づいています。
本書の内容は2017年1月の執筆時点です。
目次
CHAPTER 1 Webデザイン＋Photoshop＋Illustratorの基礎知識
CHAPTER 2 ワイヤーフレーム制作で使えるテクニック
CHAPTER 3 画像処理に使えるテクニック
CHAPTER 4 パーツ制作で使えるテクニック
CHAPTER 5 カンプ制作で使えるテクニック
Chapter1はWebデザイン、Photoshop、Illustratorの基礎知識
Chapter2はIllustratorでのワイヤーフレーム制作で使えるテクニック
Chapter3はPhotoshopでの画像処理に使えるテクニック
Chapter4ではIllustratorとPhotoshopを使ってのパーツ制作で使えるテクニック
Chapter5ではIllustratorとPhotoshopを使ってのカンプ制作で使えるテクニック
もし、IllustratorやPhotoshopなどは月額制で高いから持ってない。
購入できないなら
Illustratorの代わりに、無料で使えるInkscapeソフト
Photoshopの代わりに、無料で使えるGIMPソフトなど使って練習すると、いいかもです。
PhotoshopやIllustratorと操作方法は違いますが
レイヤーの構造とか勉強できると思います。
GIMP（無料）
https://www.gimp.org/
MacとWindows用があります。
GIMPダウンロードページ
https://www.gimp.org/downloads/
Inkscape
Mac版
Inkscapeは、そのままでは動きません。
Inkscapeのインストールする前に
「XQuartz」というソフトを始めにインストール。
XQuartzは無料でダウンロード出来ます。
XQuartz-2.7.11.dmg（バージョン2.7.11）
Inkscapeは、日本語でも表示ができます。
ただ、日本語の表示に、うまくできない場合もあります。
その場合は、Inkscapeの設定とかをテキストエディタとかで変えてれば変更できます。
Inkscape
https://inkscape.org/ja/download/
Inkscapeを使えば、Adobe Illustratorで作れるたいていのものと同様のイラストレーションを制作することができます。
しかし、この二つのアプリケーションに共通な機能やツールの多くは異なるやり方で用いられ、異なる名前やショートカットを持ち、扱い方も異なります。このドキュメントにはInkscape / Illustratorの同一機能、異なる点、いいところとよくないところについての情報をなんでも追加してください。
http://wiki.inkscape.org/wiki/index.php/Inkscape_for_Adobe_Illustrator_users_(Japanese)
サンプルのpsdファイルを、無料GIMPソフトで開いてもレイヤーは、ちゃんと表示されました。
aiファイルもInkscapeで開くと、このような感じです。
サンプルの教材は
「Adobe Photoshop」「Adobe Illustrator」
のCC2017、2015、2014。
サンプルの画像など使って操作します。
コーディングなどする時、テキストエディタの説明などはないです。
AdobeのDreamweaverとか少し解説されてます。
Illustratorの代わりに、Inkscapeと
Photoshopの代わりに、GIMPで開いてみましたが
レイヤーとか、ちゃんと別れてます。
Chapter1
印刷物のデザインとは違ったセオリーやルールなど、
Webデザインの基礎知識について解説！
Chapter1-1
「Adobe Photoshop」と「Adobe Illustrator」の使い分け
Illustratorの特徴
Illustratorはパスを使ってオブジェクトを描画するアプリケーションです。
Photoshopの特徴
Photoshopは写真画像の明るさ、色味、補正、画像の合成などが得意なアプリケーションです。
Chapter1-2
WebページではRGBを使って色を表現する
CMYK（減法混色）とRGB（加法混色）の違い
一般的なカラー印刷ではCのシアン、Mのマゼンタ、Yのイエロー、Kのブラックの4色のインクを重ね合わせて、さまざまな色を表現しています。
パソコンやスマートフォン、テレビなどのディスプレイは、Rのレッド、Gのグリーン、Bのブルーの光りの3原色を組み合わせて色を表現しています。
Illustratorのカラーモード設定
Photoshopのカラーモード設定
RGBでの色の指定方法
Chapter1-3
Webページでは画面解像度を標準にデータを作成する
画面解像度とは？
CMYKの4色のインクを使用したオフセット印刷では
画像の一定の領域を、どれだけの密度で表現するかを示す
解像度を指定します。
Webデザインではピクセルサイズを基準に指定します。
この場合の解像度は、画面解像度と呼ばれ
ディスプレイのサイズを表す場合などに使用されます。
画面解像度で作業するための設定
Illustratorの解像度設定
Photoshopの解像度設定
Chapter1-4
Webデザインを行う際の各種設定
Webページに合った新規ドキュメント設定
印刷では、A3やA4など、紙の出力サイズにあわますが
Webデザインは、対象のデバイスの画面サイズに合わせてアートボードの大きさを設定します。
作業効率が上がるレイヤー設定
Illustratorでピクセルグリッド整合させる
Photoshopのエッジを整列を有効にする
Chapter1-5
Webサイト制作の作業フロー
サイトマップ制作
ワイヤーフレーム制作
デザインカンプ制作
コーディング
また、実際にページの動きが確認できるHTMLデータのデザインモックアップを制作することもあります。
Chapter1-6
Webページを構成するファイル
HTMLファイル
画像ファイル
CSSファイル
javascriptファイル
Webフォントファイル
Chapter1-7
Webページで使用できる画像のファイル形式
GIF、JPEG、PNG、SVGの４種類です。
Chapter1-8
Webサイト、Webページの基本的な構成
Webサイトの構成
一般的なWebサイトはサイトの入り口となるトップページと、情報を複数のページに分けた下層ページで構成されています。
Webページの構成要素
ヘッダー
メインビジュアル
フッター
ヘッダーナビゲーション
グローバルナビゲーション
パンくずナビゲーション
メインコンテンツエリア
カテゴリ
フッターナビゲーション
など
Chapter2
Webページに要素をどう配置するのかを表した大枠（ラフレイアウト）である
「ワイヤーフレーム」制作の際に役立つテクニックについて解説！
Webデザインはワイヤーフレームの作成から始まります。
ワイヤーフレームとは、Webページに、どのような要素を、どう配置するのかを表したページのラフレイアウトです。
線と文字で構成されるのでIllustratorで作成することが多いです。
本書では、Illustratorで作成します。
人によっては、Illustratorでなく、いろんなツールやソフト。
また手書きなどで描いている人もいます。
本では書かれてないですが、Web系のサービスも進化してます。
昔はワイヤーフレームの作成など、Adobe系で作成してる人が多かったです。
その後にSketch、Adobe XD。
今では、Adobe系のソフトは月額制です。
人によっては割高です。
また、Adobe系のソフトを、みんなが利用してるわけではないです。
最近では、Figma（フィグマ）など利用してる多いみたいです。
Figma（フィグマ）（基本無料、有料）
https://www.figma.com/
It all starts here · Sketch（有料）
https://www.sketch.com
UI/UXデザインと共同作業ツール | Adobe XD（基本無料、有料）
https://www.adobe.com/jp/products/xd.html
この本は、IllustratorとPhotoshopの解説の本なので、
ワイヤーフレームの作り方を、順番で解説してます。
新規ファイルを作成から、解説してます。
レスポンシブWebデザインサイトに対応する
パソコン用
タブレット用
スマートフォン用
3つのワイヤーフレームを作成。
Chapter2-1
Illustratorで
長方形で構成されたワイヤーフレームを効率よく作成する
Chapter2-2
Illustratorで
ヘッダーなどの共通部分をシンボル化して管理する。
Chapter2-3
Illustratorで
よく利用するパーツをライブラリ化する
Chapter2-4
Illustratorで
パーツを複製コピーして均等配置する
Chapter2-5
Illustratorで
アンチエイリアスが、かからない状態でパーツを書き出す。
バージョンCC 2015からIllustratorからGPUという
画像処理装置を利用して画面表示を高速に行えます。
Chapter2-6
Illustratorで
デバイスの画面サイズごとにアートボードを作成する
パソコン用
タブレット用
スマートフォン用
Chapter2-7
Illustratorで
操作による表示の変化を再現して確認する
Photoshopの操作など解説
画像の基本的な補正や加工から、Web用に適切な品質、容量で保存する方法、
Webの機能を盛り込んだ表現まで幅広く解説！
Chapter3
Photoshop
画像処理に使えるテクニック
Webに掲載する画像を基本的な修正や加工など
画像をWebページに最適な状態で書き出す
写真を修正する
写真に特集効果を加える
Chapter3-1
Photoshopで
Webページに最適な状態で画像を書き出す
Photoshopで3種類の画像をWebページに最適化
Chapter3-2
Photoshopで
写真をトリミング、修正、加工する
Chapter3-3
Photoshopで
色かぶりを補正する
ホワイトバランスを利用して自動補正
Chapter3-4
Photoshopで
色かぶりを補正する
RGBチャンネルを個別に操作
Chapter3-5
Photoshopで
ぼけた写真をくっきりさせる
アンシャープマスク
Chapter3-6
Photoshopで
写真の不要な部分を消す
コピースタンプツール
Chapter3-7
Photoshopで
被写体の色を置き換える
Chapter3-8
Photoshopで
被写体を切り抜く
Chapter3-9
Photoshopで
複雑な輪郭の切り抜き
Chapter3-10
Photoshopで
明るさを補正する
Chapter3-11
Photoshopで
画面全体が合った写真を奥行きがあるように加工する
Chapter3-12
Photoshopで
写真をイラストのようなイメージにする
Chapter3-13
Photoshopで
モノクロ写真の一部だけをカラーで表現する
Chapter3-14
Photoshopで
写真に光の軌跡を追加する
Chapter3-15
Photoshopで
写真の色を変化させて独自な雰囲気にする
Chapter3-16
Photoshopで
写真を合成して横幅を引き延ばす
Chapter3-17
Photoshopで
複数の素材を合成してメインビジュアルを制作する
Chapter3-18
Photoshopで
GiFアニメーションを作成する
Chapter3-19
Photoshopで
写真の一部だけが動くシネマグラフを制作する
Chapter3-20
Photoshopで
スマートオブジェクト化して画質の劣化を防いで編集、合成する
IllustratorとPhotoshopを使ってのパーツ制作で使えるテクニック
アイコンやロゴ、バナーなどのパーツを効率よく制作する方法から
コーディング作業がスムーズに行えるパーツの書き出し方法まで解説！
Chapter4-1
Illustratorで
図形を組み合わせて簡単にアイコンを制作する
Chapter4-2
Illustratorで
タイトルのロゴを作成する
Chapter4-3
Illustratorで
装飾的な囲み罫を作成する
Chapter4-4
Illustratorで
背景などに使うパターンを作成する
Chapter4-5
Illustratorで
素材のカラーバリエーションを作成する
Chapter4-6
Illustratorで
グローバルナビゲーションのメニューを均等に分割する
Chapter4-7
Photoshopで
アイコンを作成する
Chapter4-8
Photoshopで
複数のアートボードを配置して異なるサイズのバナーを作成する
Chapter4-9
Illustratorで
作成したアートワークをSVG形式で保存する
作成したロゴ画像を選択
アートボードオプションのボタンをクリック。
SVGで画像を保存。
SVGオプションでSVGコードをクリック
テキストエディタが起動し
SVGコードがテキストファイルとして表示されるので、使う部分を選択
SVGコードをHTMLファイルなどにペーストして。
これをWebページで表示すれば、画像が表示されます。
Chapter4-10
IllustratorのアートワークをPhotoshopでWeb用の画像データとして書き出す
Illustratorのアートワークをスマートオブジェクト化する。
Photoshopでスマートオブジェクトを編集、書き出しする。
Chapter4-11
IllustratorのオブジェクトをCSSで書き出す
この本では、CSSなどは詳しく解説してません。と記載。
Illustratorで作成したグラデーションの画像をCSSで書き出す。
レイヤーを選択し
CSSプロパティから書き出しオプションをクリックでできます。
CSSプロパティパネルに、CSSコードが自動で生成され
これを、コピー
コーディングされたHTMLを開き
手動で、CSSファイルなどに、ペーストで貼れば
グラデーション画像が表示される。
Chapter4-12
PhotoshopのオブジェクトをCSSで書き出す
Photoshopで作成したグラデーションの画像をCSSで書き出す。
レイヤーを選択
メニューからCSSをコピーでCSSの部分（グラデーションのソース）がコピーされます。
これをHTMLファイルにペーストで、グラデーション画像が表示される。
Chapter4-13
Photoshopで
画像を異なるサイズで一度に書き出す
Chapter4-14
Photoshopで
レイヤーごとに異なる形状の画像を一括で保存する
画像のアセットをする前に、レイヤーごとの名前を変更
logoならlogo.pngなど
ファイル→生成→画像アセット
アセットのフォルダに、レイヤーごとの画像が保存されます。
Chapter4-15
Photoshopで
画像をスライス（分割）してWeb用に保存する
スライス機能で、複数のパーツに分割
スライスツールを使って
Chapter4-16
Illustratorで
段組レイアウトの画像に配置された要素を一括で保存する
コーディングをしたことない人に便利です。
HTMLファイルも生成されまが、ファイルの書き出し機能ではなく
ブラウザにコードがでるので、コピー＆ペーストする感じです。
スライス機能を使い、サンプルの、段組レイアウトの画像を使い、画像をスライスします。
Illustratorの
HTMLテキストを選択しWeb用に保存。
プレビューをクリックすると、Webブラウザが起動し
レイアウトのプレビューとHTMLのコードが表示されます。
ただ、HTML５では推奨されてないタグが使われて表示される場合もあります。
昔とか、Dreamweaverでデザインレイアウトでコーディングすると、タグが適当なので使われるのがあるので
それに近いかも。
本では、コーディングの下地やプレゼンテーション時の確認などにと書いてあります。
画像やパーツを組み合わせてデザインカンプとして
仕上げる際に必要なテクニックを解説！
デザインカンプの生成にあたっては
PhotoshopとIllustratorのいずれで使っても、かまいません。
Webページのコンテンツいよっては向き、不向きがあります。
自分は、昔に通ったWebスクールでは
Illustratorでデザインカンプを作成し
今度は、そのデザインカンプをPhotoshopで作成してと、教えられたけど
あれは、無駄と思った、
実際、制作とか現場や会社で違うと思うので。
Chapter5
フラットデザインのデザインカンプの作成はIllustratorを使う。
画像が多いWebサイトのデザインカンプの作成はPhotoshopを使う。
デザインカンプの納品方法
PDFに書き出す
パーツごとに書き出す
Chapter5-1
Illustratorで
グリッドレイアウト用の枠線を簡単に作成する
Chapter5-2
Illustratorで
使用色をスウォッチ化して効率よくカラー指定を行なう
Chapter5-3
Illustratorで
編集しても飾り部分が変形しない
飾り付き囲みエリアを作成する
Chapter5-4
Illustratorで
カラーバリエーションを作成する
Chapter5-5
Illustratorで
デザインカンプに用いたパーツを
それぞれ適した状態に一括で書き出す
Chapter5-6
IPhotoshopで
デバイスの画面サイズごとに
アートボードを作成する
Chapter5-7
Illustratorで
作成したパーツをPhotoshopで利用する
Chapter5-8
同じサイズの囲みエリアを
等間隔で配置する
Chapter5-9
Photoshopで
マウス操作による表示の変化を
画像として書き出す
Chapter5-10
Photoshopで
背景固定でスクロールするページの
デザインカンプを作成する
Chapter5-11
Photoshopで
デザインカンプをデバイスごとにページ分けしてPDFに書き出す
Chapter5-12
Photoshopで
デザインカンプに用いたパーツを
それぞれ適した状態に一括で書き出す
カテゴリーで、分かれてるので
Webデザインとかで
Webサイトの制作するときに、
「Adobe Photoshop」
「Adobe Illustrator」
の使い方がわかると思います。
サイトの制作で、デザインカンプ、ワイヤーフレームなど、作る時には、おすすめな本です。
（コーディングの内容は載ってません）
サンプルでは、HTML5のコードとかあります。
簡単な素材の制作とかPhotoshopで写真の加工などする時に、操作を忘れたとかって時に、この本を見ると便利かもです。
ただ、IllustratorやPhotoshopなど使わない人には、あまり使わないかもです。
WebデザインのためのPhotoshop+Illustratorテクニック[2020/2019対応] (日本語) 単行本（ソフトカバー） – 2020/8/1
瀧上 園枝 (著)
