WebデザインのためのPhotoshop+Illustratorテクニック 読んでみた。

[記事公開日]2017/05/20

[最終更新日]2021/11/21

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

2021年10月
Webブラウザ上で動作、ダウンロード不要
Adobe「Photoshop」と「Illustrator」にWebブラウザ版 まずはβ版、データ閲覧までなら非会員にも開放
https://news.yahoo.co.jp/articles/38dca1b58b1433edfef510fa9c848c85114bdb38

 


 

WebデザインのためのPhotoshop+Illustratorテクニック
現在では、最新版が出てます。

WebデザインのためのPhotoshop+Illustratorテクニック[2020/2019対応] (日本語) 単行本(ソフトカバー) – 2020/8/1
瀧上 園枝 (著)

WebデザインのためのPhotoshop+Illustratorテクニック[2020/2019対応] 単行本(ソフトカバー) – 2020/8/1
瀧上 園枝 (著)

目次
WebデザインのためのPhotoshop+Illustratorテクニック 読んでみた。
CHAPTER 1 Webデザイン+Photoshop+Illustratorの基礎知識
CHAPTER 2 ワイヤーフレーム制作で使えるテクニック
CHAPTER 3 画像処理に使えるテクニック
CHAPTER 4 パーツ制作で使えるテクニック
CHAPTER 5 カンプ制作で使えるテクニック

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/

など、他にも、いろいろあります。

 


 

Photoshop よくばり入門 CC対応 (できるよくばり入門) 単行本(ソフトカバー) – 2021/10/21
senatsu (著)

Photoshop よくばり入門 CC対応 (できるよくばり入門) 単行本(ソフトカバー) – 2021/10/21
senatsu (著)

 


 

(PDF版電子書籍・練習用ファイル・解説動画付き)Illustrator よくばり入門 CC対応 (できるよくばり入門) 単行本(ソフトカバー) – 2021/11/4
石川 洋平 (著), 清水 健次 (著), 堀内 良太 (著)

(PDF版電子書籍・練習用ファイル・解説動画付き)Illustrator よくばり入門 CC対応 (できるよくばり入門) 単行本(ソフトカバー) – 2021/11/4
石川 洋平 (著), 清水 健次 (著), 堀内 良太 (著)

 


 

足し算デザイン&引き算デザイン 単行本 – 2021/11/2
Power Design Inc. (著)
デザインにも「足し算・引き算」という言葉があります。
装飾・要素を追加して楽しく賑やかにする「足し算デザイン」、
不要な装飾・要素をそぎ落とし必要最低限のものだけで構成した「引き算デザイン」。

足し算デザイン&引き算デザイン 単行本 – 2021/11/2
Power Design Inc. (著)

 


 

Photoshopレタッチ 仕事の教科書 3ステップでプロの思考を理解する 単行本(ソフトカバー) – 2021/9/10
高嶋 一成 (著), マルミヤン (著), 佐藤 悠大 (著)
写真を魅せる正しいプロの技、教えます!

Photoshopレタッチ 仕事の教科書 3ステップでプロの思考を理解する 単行本(ソフトカバー) – 2021/9/10
高嶋 一成 (著), マルミヤン (著), 佐藤 悠大 (著)

 


 

Photoshop Elements 2021(最新) |通常版|パッケージ版|Windows/Mac対応
アドビのストアを表示
プラットフォーム : Windows, Macintosh

Adobe Creative Cloud コンプリート|12か月版|Windows/Mac対応|オンラインコード版
アドビのストアを表示

Adobe Illustrator|12か月版|Windows/Mac/iPad対応|オンラインコード版
アドビのストアを表示
プラットフォーム : Windows, Mac OS X

Adobe Creative Cloud フォトプラン(Photoshop+Lightroom) with 1TB|12か月版|Windows/Mac対応|オンラインコード版
アドビのストアを表示

 


 

Webデザインの基本きちんと入門[第2版] 単行本(ソフトカバー) – 2021/8/19
伊藤 庄平 (著), 益子 貴寛 (著), 宮田 優希 (著),
これからはじめる人、一気に学びたい人へ
一生使えるWebデザインのテクニック集!

Webデザインの基本きちんと入門[第2版] 単行本(ソフトカバー) – 2021/8/19
伊藤 庄平 (著), 益子 貴寛 (著), 宮田 優希 (著),

教科書では教えてくれないHTML&CSS 単行本(ソフトカバー) – 2021/7/17
狩野 祐東 (著)
各種講座や書籍でHTML&CSSの学習を終えても、実際の現場では、求められるレベルの業務をこなせない人が少なくありません。デザイナーから渡されたデザインの全体を把握・解釈して、HTML&CSSで書き起こす力が弱い傾向にあります。

教科書では教えてくれないHTML&CSS 単行本(ソフトカバー) – 2021/7/17
狩野 祐東 (著)

 


 

Webサイト制作の「正しい基礎」を伝える入門書の改訂3版。

Webデザインの新しい教科書 改訂3版 基礎から覚える、深く理解できる。 単行本(ソフトカバー) – 2021/5/28
こもりまさあき (著), 赤間 公太郎 (著)

 


 

Illustrator & Photoshopデザインの作り方 アイデア図鑑 単行本(ソフトカバー) – 2021/6/19
上司ニシグチ (著), 長井 康行 (著), 楠田 諭史 (著), 森 一機 (著)

デザインが作れない。操作がわからない。センスがない。成長してない。アイデア出ない!
プロの技が一気に学べる!
学習用の素材は「全て」ダウンロードできます。

 


 

【Amazon.co.jp 限定】あるあるレイアウト すぐに使えて素敵に仕上がるデザインカタログ集(特典:困った時に使えるレイアウト集 特別編集版PDFデータ配信) 単行本(ソフトカバー) – 2021/5/28
ingectar-e (著)
大好評『あるあるデザイン』のレイアウトカタログが登場

【Amazon.co.jp 限定】あるあるレイアウト すぐに使えて素敵に仕上がるデザインカタログ集(特典:困った時に使えるレイアウト集 特別編集版PDFデータ配信) 単行本(ソフトカバー) – 2021/5/28
ingectar-e (著)

フォントのふしぎ ブランドのロゴはなぜ高そうに見えるのか? 単行本(ソフトカバー) – 2011/1/17
小林 章 (著)

 


 

仕事で一生使える Illustratorトレーステクニック 単行本(ソフトカバー) – 2021/5/1
北村 崇 (著), 渋谷 瞳 (著)
ロゴマーク・手描きのトレース・地図の作成・自由なイラストなどなど、知っておくと仕事で一生使えるイラレのワザを身につけましょう。

仕事で一生使える Illustratorトレーステクニック 単行本(ソフトカバー) – 2021/5/1
北村 崇 (著), 渋谷 瞳 (著)

 


 
初心者からちゃんとしたプロになる Illustrator基礎入門 単行本(ソフトカバー) – 2021/5/7
尾花 暁 (著), 高橋 としゆき (著), 樋口 泰行 (著), & 2 その他

初心者からちゃんとしたプロになる Illustrator基礎入門 単行本(ソフトカバー) – 2021/5/7
尾花 暁 (著), 高橋 としゆき (著), 樋口 泰行 (著), & 2 その他

 


 

【Amazon.co.jp 限定】Illustratorデザインベーシック 制作に役立つ基本とテクニック(特典:井上のきあオリジナル「配色チャート」データ配信) 単行本(ソフトカバー) – 2021/3/18
井上 のきあ (著)
Adobe Illustratorの膨大な機能の中から、誰もが使う基本的な機能をまとめ、複数のアプローチを整理することで、効率よく学べるように集約した機能リファレンスガイドです。

【Amazon.co.jp 限定】Illustratorデザインベーシック 制作に役立つ基本とテクニック(特典:井上のきあオリジナル「配色チャート」データ配信) 単行本(ソフトカバー) – 2021/3/18
井上 のきあ (著)

 


 

Illustratorデザインレシピ集 単行本(ソフトカバー) – 2021/4/16
奥田 直子 (著)
Illustratorによるデザイン制作の究極のレシピ集。

Illustratorデザインレシピ集 単行本(ソフトカバー) – 2021/4/16
奥田 直子 (著)

基礎から時短ワザで覚えるIllustratorの教科書 単行本 – 2021/4/12
広田 正康 (著)

基礎から時短ワザで覚えるIllustratorの教科書 単行本 – 2021/4/12
広田 正康 (著)

 


 

イラレのスゴ技 動画と図でわかるIllustratorの新しいアイディア (日本語) 単行本(ソフトカバー) – 2021/2/20

イラレのスゴ技 動画と図でわかるIllustratorの新しいアイディア (日本語) 単行本(ソフトカバー) – 2021/2/20

 


 

初心者からちゃんとしたプロになる Photoshop基礎入門 (日本語) 単行本(ソフトカバー) – 2021/2/2
画像編集ソフト「Adobe Photoshop」の操作方法や使い方を、初歩からていねいに解説した本。

初心者からちゃんとしたプロになる Photoshop基礎入門 (日本語) 単行本(ソフトカバー) – 2021/2/2

 


 

Amazonで予約が受付中、Amazon予約特典あり

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 サイトの投稿と問題解決

1冊ですべて身につくHTML & CSSとWebデザイン入門講座 単行本 – 2019/3/16
Mana (著)

 


 

WebデザインのためのPhotoshop+Illustratorテクニック(CC 2017対応版) 単行本(ソフトカバー) – 2017/3/30

WebデザインのためのPhotoshop+Illustratorテクニック(CC 2017対応版) 単行本(ソフトカバー) – 2017/3/30

 


 

Webサイト・リニューアル 「見た目だけ変えた」にしない成功の手引き (日本語) 単行本(ソフトカバー) – 2020/4/27

Webサイト・リニューアル 「見た目だけ変えた」にしない成功の手引き (日本語) 単行本(ソフトカバー) – 2020/4/27

 


 

今日から役立つアイデアを満載! Illustrator魔法のレシピ (日本語) 単行本 – 2020/2/10

 


 

思い描いた世界を作る Photoshopレタッチ・加工 魔法のレシピ (日本語) 単行本 – 2020/2/10

 


 

世界一わかりやすい Illustrator 操作とデザインの教科書 [改訂3版] (日本語) 単行本(ソフトカバー) – 2020/2/27

 


 

 


 

ビックカメラ.com
ADOBE パソコンソフト

ビックカメラ.com・パソコンソフト・ADOBE(アドビ)
icon

 


 

ビックカメラ.com
パソコンソフト
週間売れ筋ランキング


ビックカメラ.com・パソコンソフト・週間売れ筋ランキング
icon

 


 

はじめてのWebデザインの教科書 まずは押さえておきたいWebの原則 Kindle版

 


 

初心者からちゃんとしたプロになる Webデザイン基礎入門〈HTML、CSS、レスポンシブ〉 単行本(ソフトカバー) – 2019/9/25

 


 

Webを支える技術 -HTTP、URI、HTML、そしてREST (WEB+DB PRESS plus) 単行本(ソフトカバー) – 2010/4/8

 


 

1冊ですべて身につくHTML & CSSとWebデザイン入門講座 単行本 – 2019/3/16
Mana (著)

 


 

HTML&CSSとWebデザインが 1冊できちんと身につく本 大型本 – 2017/7/21

 


 

HTML5&CSS3標準デザイン講座 30LESSONS【第2版】 単行本(ソフトカバー) – 2019/5/24
草野 あけみ (著)

 


 

価格:¥ 1,480(価格変動あり)

actto BST-02 ブックスタンド(OEM品番:EDH-004)

ブックスタンド

本を見ながらの作業する時に、
本を見開きで、コーディング、プログラミングなどする時に便利。
ブックスタンド。

 


 

できるクリエイター GIMP 2.10独習ナビ 改訂版 Windows&macOS対応 (できるクリエイターシリーズ) (日本語) 単行本(ソフトカバー) – 2020/1/17

 


 

デザインの学校 これからはじめるDreamweaverの本[2019年最新版] 単行本(ソフトカバー) – 2019/8/8

 


 

Amazonチャージ
ギフト券
現金のチャージで、ポイント


 


 

Amazon

Adobe Creative Cloud キャンペーン
Adobe Photoshop
Adobe Illustrator


PCソフト、 Adobe Creative Cloud 特別価格キャンペーン

 


 

Webデザイン・スタンダード 伝わるビジュアルづくりとクリエイティブの最新技法 単行本(ソフトカバー) – 2018/12/26

いま知っておくべき、現場のWebデザイン。

 


 

Adobe Creative Cloud コンプリート|12か月版|オンラインコード版

Adobe Creative Cloud(アドビ クリエイティブ クラウド) コンプリート|学生・教職員個人版|36か月版|オンラインコード版(Amazon.co.jp限定)

Adobe Creative Cloud(アドビ クリエイティブ クラウド) コンプリート|学生・教職員個人版|12か月版|オンラインコード版

Adobe Photoshop CC|12か月版|パッケージ(カード)コード版

Adobe Illustrator CC|12か月版|パッケージ(カード)コード版

Adobe Creative Cloud フォトプラン(Photoshop+Lightroom) with 1TB|12か月版|オンラインコード版

 


 
Adobeの製品は、たまにしか使わない人にとっては、今では高額なソフトです。
Adobe Illustrator(有料)
Adobe Photoshop(有料)

Adobe系のソフトを使うのを辞めた人も増えているそうです。

IllustratorやPhotoshopの代わりに、
無料で使えるソフトもあります。

Adobe Illustrator(有料)
Inkscape(無料)

https://inkscape.org/ja/download/

Adobe Photoshop(有料)
GIMP(無料)
https://www.gimp.org/

 


 

はじめての無料で使えるフォトレタッチ GIMP2.10対応 (BASIC MASTER SERIES) 単行本 – 2019/3/19

 


 

すぐに作れる ずっと使える GIMPのすべてが身に付く本 単行本(ソフトカバー) – 2018/9/26

GIMPの機能を網羅的に解説するリファレンスと各機能を組み合わせて作品を仕上げるチュートリアルが1冊に合わさった入門書です。

 


 

できるクリエイター GIMP 2.8独習ナビ Windows&Mac OS X対応 (できるクリエイターシリーズ) 単行本(ソフトカバー) – 2013/2/22

 


 

Illustratorの代わりに使ってる人も多いInkscape
今ではソフトをPCにインストールしなくても
InkscapeのChromeの拡張機能でも利用ができます。

Inkscape on rollApp – Chrome ウェブストア – Google

https://chrome.google.com/webstore/detail/inkscape-on-rollapp/icjinnaagdniegmfejingjjhljhmkopj

 


 

すぐに作れる ずっと使える Inkscapeのすべてが身に付く本 単行本(ソフトカバー) – 2019/6/17

 


 

無料で使えるイラストソフト Inkscapeスタートブック 単行本 – 2017/1/19

 


 

できるクリエイター Inkscape 独習ナビ Windows&Mac対応 単行本(ソフトカバー) – 2016/9/26

 


 

Amazon
画像素材の売れ筋ランキング
Amazon.co.jpの売れ筋ランキング。ランキングは1時間ごとに更新されます。

Amazon 画像素材の売れ筋ランキング

 


 

便利なアプリや、ソフトもいろいろあります。

Mac用の フリーソフト、アプリ、アップデータの新着情報をお届けするサイト
https://www.macsoft.jp/

フリーソフト100は無料で使える便利なソフトや無料情報を集めました。

パソコンで活用するデスクトップアプリ、USBメモリーを有効に利用できるソフト、Webアプリなど、フリーソフトとシェアウェア情報を紹介。

https://freesoft-100.com/

 


 

Canva
無料ですばらしいグラフィックデザインを共同作業で作成 – Canva

https://www.canva.com/ja_jp/

 


 

小さな会社&お店の Canva超入門 ~お洒落で目を引くチラシ・ポスター・名刺・ポストカードを無料で作る本 単行本(ソフトカバー) – 2018/5/19

内容紹介
会社やお店の販促ツールを、無料であっという間に作れます!

会社や店舗などを運営していると、必ず必要になるのが、販促ツール。

名刺やショップカード、チラシといった紙媒体や、広告用バナー画像、SNS告知用画像といったWeb媒体も。
Canvaは、これらのデザインを外注しないで自分で作りたい! という方のための、無料サービスです。

本書では、Canvaを使って販促ツールを作る方法をわかりやすく解説。
デザインのポイントや便利なテクニックも紹介します。
Canvaを使って、プロ級のデザインが完成する1冊です!

 


 

WebCampPRO
無料体験会実施中
転職を本気で考えている方向けのプログラミングスクール!
転職を保証しているため、未経験からIT業界へ転職を求めている方へおすすめです。
受講完了後、3ヶ月以内に転職・就職できない場合は ”全額返金” しています!

 


 

WordPressデザインレシピ集 単行本(ソフトカバー) – 2019/8/24

 


 

本当によくわかるWordPressの教科書 改訂2版 はじめての人も、挫折した人も、本格サイトが必ず作れる 単行本 – 2019/6/27

「Webサイトを作ってみたい」と漠然と思っている人から、
「一度WordPressを触ってみたけど挫折した」という人まで。

HTML、CSS、PHPなどのプログラミング知識は一切不要。
手順通りに操作するだけで、本格サイトが作れます。

本書の対象読者
・WordPressに興味はあるけれど使ったことがない人
・デザインの良いサイトを簡単に作りたい人
・Webショッピングサイトを手早く作りたい人
・WordPressを使ったことはあるけれど挫折した人、最後まで作るのをやめてしまった人

 


 

WordPressは、難しそう。メンテナンスとか大変。
手軽に、お店のホームページなど運営したいなら。
グーペが、おすすめ。

低コストで簡単、プロのようなホームページ作成「グーペ」
カフェ、サロン、保育園、ビジネス、 マッサージ、レストランなどなど様々な業種の方が、グーペを使ってホームページを作成しています。

グーペは使いやすくて低価格
各プランは 1ヶ月 ⁄ 3ヶ月 ⁄ 6ヶ月 ⁄ 12ヶ月の契約期間からお選びいただけます。

お困りの場合にはすぐにお問い合わせを。グーペのエキスパートが的確にサイト制作をサポートいたします。

 


 

日本で一番選ばれている
ネットショップ作成サービス「カラーミーショップ」

・お試し無料期間30日間でじっくりと体験できます。
・デザインのカスタマイズ自由自在!理想のショップを作ることができます。
・どんなに売れても販売手数料0円!売れるほど利益が上がります。
・「カラーミーショップ大賞」や「開店セミナー」など、運営を支援するサポートが充実

テレビCMでも話題の「minne(ミンネ)」や国内最大級のサーバー「ロリポップ」などでおなじみ
さまざまなWebサービスを展開する【GMOペパボ株式会社】のネットショップ作成サービスです。

食品・ファッション・雑貨などおしゃれなネットショップが多数活躍!
高いデザインカスタマイズの自由度と充実した機能が人気の秘訣。
どこよりも低コストでご利用いただけると幅広いユーザーさまに好評をいただいております。

無料、お試し
ネットショップをはじめよう!
スマホで、かんたん、ネットショップ運営

ネットショップをはじめよう!

 


 

たった15秒でできる!ホームページ簡単作成サービス
PAGEKit(ページキット)

30日間の無料お試し。
ホームページを作ったことがない、ホームページの作り方を全く知らない方が、
ホームページを自分で作ったり編集できるサービスです。
初期費用無料、料金は1ヶ月2,000円です。

登録時、「ホームページタイトル」、「業種」、「デザイン」の3つを入力すれば、
最短15秒で例文や写真入りのホームページが作成できます。

パソコンの超初心者の方、医院・鍼灸院・企業・カフェ・士業・美容室
学校の研究室・同窓会用のサイトを運営したいなど。

 


 

小さなお店&会社のWordPress超入門~初めてでも安心! 思いどおりのホームページを作ろう! 改訂2版 単行本(ソフトカバー) – 2019/6/22

 


 

「ロリポップ!」レンタルサーバー
難しいことや面倒なことは、全部ロリポップ!におまかせ。
つくることに、夢中になれる環境です。

 


 

MixHost
プランも自由に変更可能です。

 


 

ロリポップと同じ値段なら、
ネットオウルのレンタルサーバー
StarServer

独自ドメイン取得サービスならスタードメイン。
取得したいドメイン名を検索!

 


 

お名前.com
ドメイン公式登録サービス
世界中で取引されるプレミアムドメインを提供しています。

お名前.com プレミアムドメイン

 


 

バリュードメインは250種類以上のドメインを低価格でご提供します。
ドメインの取得が69円から!ムームードメインも、おすすめです。

 


 

レンタルサーバーなら
さくらインターネット!
無料お試し実施中。さくらのレンタルサーバー

「ヘテムル」レンタルサーバー
高性能レンタルサーバー
セキュアにWordPressを高速化するモジュール版PHPが使えて電話サポートつき。

 


 

WebCamp
無料体験会実施中
Webスキルを習得!大人気テックスクール
短期で学びたい方のための講座です。
1ヶ月で集中して一気に学ぶことができます。
プログラミングやデザイン未経験者でも安心のサポート体制をご用意しています。

 


 

Udemy(ユーデミー)
世界最大級のオンライン学習プラットフォームである「Udemy(ユーデミー)」
米国シリコンバレー発祥、世界最大級のオンライン学習
プログラミングからヨガ、写真に至るまで、あらゆるコースがあります。

Udemyでは、自分に合ったコースなど、検索で探せるので、おすすめです。
サンプルで動画も見れます。

 


 

Udemy(ユーデミー)
Udemy / 未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース

Udemy(ユーデミー)
Udemy / WebデザインのためのPhotoshop実践講座

Udemy(ユーデミー)
Udemy / 未経験からプロを目指す!実践PhotoshopCC講座

無料
Udemy(ユーデミー)
Udemy / 実践Webサイトコーディング講座 | HTML5とCSS3を使って、カフェのサイトやWebメディアサイトを作ってみよう

 


 

新ほめられデザイン事典 写真レタッチ・加工[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 しっかり入門 増補改訂 第2版 【CC完全対応】[Mac & Windows 対応] 単行本 – 2018/9/21

 


 

世界一わかりやすい Photoshop 逆引き事典 CC対応 単行本(ソフトカバー) – 2018/8/24
ピクセルハウス (著)

 


 

世界一わかりやすいIllustrator & Photoshop & XD Webデザインの教科書 単行本(ソフトカバー) – 2018/10/5

 


 

世界一わかりやすい Illustrator & Photoshop 操作とデザインの教科書 CC/CS6対応版 単行本(ソフトカバー) – 2018/2/23

 


 

Photoshop & Illustratorデザインテクニック大全 単行本 – 2018/4/20

 


 

価格:¥ 1,480(価格変動あり)

actto BST-02 ブックスタンド(OEM品番:EDH-004)

ブックスタンド

本を見ながらの作業する時に、
本を見開きで、コーディング、プログラミングなどする時に便利。
ブックスタンド。

 


 

Webサイトを制作するには、いろんな仕方があると思いますが。

Webデザインの本とかで、
ワイヤーフレームの制作の手順だけの書籍。
デザインカンプの制作の手順だけの書籍とかって、なかなか無いかもです。

Webデザインの本とか、ページの都合上、仕方がないから載せてないかもですが。
ほとんどの、Webデザイン系の書籍とか、完成された、ワイヤーフレーム、デザインカンプなど載ってるだけです。

WebデザインのためのPhotoshop+Illustratorテクニック(CC 2017対応版) 単行本(ソフトカバー) – 2017/3/30

WebデザインのためのPhotoshop+Illustratorテクニック(CC 2017対応版) 単行本(ソフトカバー) – 2017/3/30

自分は、求職者支援訓練で、Webクリエイターのコースに通ってた時に、
制作課題で、Webサイトを作らされました。

PhotoshopやIllustratorなど使った事があったので、コツさえわかれば作れますが、
ほとんどの人が、ワイヤーフレームとかデザインカンプを
PhotoshopやIllustratorを使っての作り方などがわからず、
どうやっていいのか、わからない。

講師も使えなく。
ほとんど説明とかしないので。
生徒は、インターネットとかで調べながら、制作しての作業だった。

「Adobe Photoshop」と「Adobe Illustrator」は
デザインのプロフェッショナルに長く愛用されているアプリケーションです。
現在では、昔とは違い、使う場合は、利用の料金がかかります。

Webサイトの
ワイヤーフレームを作って、
次にデザインカンプを作り
コーディングする時に、デザインカンプから、画像をスライス(切り抜いて)して、画像のパーツを切り出します。

今では違うとは思います。

いろいろな仕方があると思うので。

なんか、Web制作(画像系)=Adobe系のソフトを使うって、ほとんどだけど。

この本、
もっと早くに出て欲しかった本かもです。

WebデザインのためのPhotoshop+Illustratorテクニック(CC 2017対応版) 単行本(ソフトカバー) – 2017/3/30

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デザイン集中講座、
この本を持ってますが、今では内容が古いです。


design

クリエイターの卵のための 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

 


 

DELL

フレームレスパソコン
ビジネスに適したWindows


デル株式会社


デル株式会社

 


 

Web制作者のためのIllustrator&ベクターデータの教科書 マルチデバイス時代に知っておくべき新・グラフィック作成術 単行本(ソフトカバー) – 2015/5/22

こんな方法があったのか!
調整・流用しやすいグラフィックデータの作り方

「リサイズに柔軟に対応できる」「書き出し時に解像度を自由にコントロールできる」など

マルチデバイス時代に最適なベクターデータを
「効率的に作る」ためのプロの考え方を徹底解説!

 


 

Affinity Designer

Illustratorの代用に便利かもです。



Affinity Designer

カテゴリ: グラフィック&デザイン
価格: ¥6,000(価格変動あり)

APP STORE

 


 

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デザインのためのPhotoshop+Illustratorテクニック[2020/2019対応] 単行本(ソフトカバー) – 2020/8/1
瀧上 園枝 (著)

Webサイトなど作る前の手順や、ワイヤーフレームの作り方、デザインカンプの作り方、
サンプルを使っての、IllustratorやPhotoshopの操作方法。
バナーやナビゲーション、写真のトリミングの仕方とか
Webサイトに必要なテクニックなどが、Chapterごとに別れてて、解説付きで載ってます。

Webデザインの本といっても、テキストエディタを使ってのコーディングの仕方とかは、この本では載ってないので、他の本を、参考にしてください。と案内もされてます。

この本は、Chapterは1から5まであり。
サンプルデータもあります。
ページの構成も、Chapterで別れてかれているので見て、わかりやすいと思います。

Illustrator、Photoshopのアイコンが表示されているので
このページでは、Illustratorを使う。
このページではPhotoshopを使うとか、ひと目見て、確認できます。
本ではMacでの操作方法でしてます。
Windows版の操作方法も、メモで解説されてます。


description

デザイナーも、コーダーも必読!
Webデザインをより効率的に行うために、
Webのビジュアルをより魅力的にするために、
知っておきたいPhotoshop、Illustratorの
63の知識とテクニック。

本書が対応しているアプリケーションのバージョン
Adobe Creative Cloud (CC)2017基づいています。
本書の内容は2017年1月の執筆時点です。

WebデザインのためのPhotoshop+Illustratorテクニック(CC 2017対応版) 単行本(ソフトカバー) – 2017/3/30

目次
CHAPTER 1 Webデザイン+Photoshop+Illustratorの基礎知識
CHAPTER 2 ワイヤーフレーム制作で使えるテクニック
CHAPTER 3 画像処理に使えるテクニック
CHAPTER 4 パーツ制作で使えるテクニック
CHAPTER 5 カンプ制作で使えるテクニック

Chapter1はWebデザイン、Photoshop、Illustratorの基礎知識
Chapter2はIllustratorでのワイヤーフレーム制作で使えるテクニック
Chapter3はPhotoshopでの画像処理に使えるテクニック


chapter1


chapter2


chapter3

Chapter4ではIllustratorとPhotoshopを使ってのパーツ制作で使えるテクニック
Chapter5ではIllustratorとPhotoshopを使ってのカンプ制作で使えるテクニック


chapter4


chapter5

 


 

もし、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)

https://www.xquartz.org/

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で開くと、このような感じです。


gimp


inkscape

 


 

WebデザインのためのPhotoshop+Illustratorテクニック[2020/2019対応] (日本語) 単行本(ソフトカバー) – 2020/8/1
瀧上 園枝 (著)

WebデザインのためのPhotoshop+Illustratorテクニック(CC 2017対応版) 単行本(ソフトカバー) – 2017/3/30

サンプルの教材は
「Adobe Photoshop」「Adobe Illustrator」
のCC2017、2015、2014。

サンプルの画像など使って操作します。

コーディングなどする時、テキストエディタの説明などはないです。
AdobeのDreamweaverとか少し解説されてます。

Illustratorの代わりに、Inkscapeと
Photoshopの代わりに、GIMPで開いてみましたが
レイヤーとか、ちゃんと別れてます。

 


 

CHAPTER 1 Webデザイン+Photoshop+Illustratorの基礎知識

Chapter1
印刷物のデザインとは違ったセオリーやルールなど、
Webデザインの基礎知識について解説!


chapter1


chapter1-1

 


 

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の4種類です。

Chapter1-8
Webサイト、Webページの基本的な構成

Webサイトの構成
一般的なWebサイトはサイトの入り口となるトップページと、情報を複数のページに分けた下層ページで構成されています。

Webページの構成要素

ヘッダー
メインビジュアル
フッター
ヘッダーナビゲーション
グローバルナビゲーション
パンくずナビゲーション
メインコンテンツエリア
カテゴリ
フッターナビゲーション
など

 


 

CHAPTER 2 ワイヤーフレーム制作で使えるテクニック

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


chapter2-1

 


 

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で
操作による表示の変化を再現して確認する

 


 

CHAPTER 3 画像処理に使えるテクニック

Photoshopの操作など解説

画像の基本的な補正や加工から、Web用に適切な品質、容量で保存する方法、
Webの機能を盛り込んだ表現まで幅広く解説!

Chapter3
Photoshop
画像処理に使えるテクニック
Webに掲載する画像を基本的な修正や加工など

画像をWebページに最適な状態で書き出す

写真を修正する
写真に特集効果を加える


chapter3


chapter3-1

 


 
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で
スマートオブジェクト化して画質の劣化を防いで編集、合成する

 


 

CHAPTER 4 パーツ制作で使えるテクニック

IllustratorとPhotoshopを使ってのパーツ制作で使えるテクニック
アイコンやロゴ、バナーなどのパーツを効率よく制作する方法から
コーディング作業がスムーズに行えるパーツの書き出し方法まで解説!


chapter4


chapter4-1

 


 

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のコードが表示されます。

ただ、HTML5では推奨されてないタグが使われて表示される場合もあります。

昔とか、Dreamweaverでデザインレイアウトでコーディングすると、タグが適当なので使われるのがあるので
それに近いかも。

本では、コーディングの下地やプレゼンテーション時の確認などにと書いてあります。

 


 

CHAPTER 5 カンプ制作で使えるテクニック

画像やパーツを組み合わせてデザインカンプとして
仕上げる際に必要なテクニックを解説!

デザインカンプの生成にあたっては
PhotoshopとIllustratorのいずれで使っても、かまいません。
Webページのコンテンツいよっては向き、不向きがあります。

自分は、昔に通ったWebスクールでは
Illustratorでデザインカンプを作成し
今度は、そのデザインカンプをPhotoshopで作成してと、教えられたけど
あれは、無駄と思った、
実際、制作とか現場や会社で違うと思うので。

Chapter5
フラットデザインのデザインカンプの作成はIllustratorを使う。

画像が多いWebサイトのデザインカンプの作成はPhotoshopを使う。

デザインカンプの納品方法
PDFに書き出す
パーツごとに書き出す


chapter5


chapter5-1

 


 

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
瀧上 園枝 (著)

WebデザインのためのPhotoshop+Illustratorテクニック[2020/2019対応] 単行本(ソフトカバー) – 2020/8/1
瀧上 園枝 (著)

LINEで送る
Pocket

おすすめ