Creative Edge School Books Webcast 2018

Contents 01

Adobe Photoshop & Adobe XD Cooperation Work

Adobe Photoshopの編集画面

グラフィックデザインからエディトリアル、プロダクト、ファッション、ウェブ、アプリ開発、アートなど、あらゆる業界で使われているイメージプロセッシングツール

Photoshop

ADOBE XD

ペンでスケッチするように素早くアイディアをカタチにして、ワイヤーフレームからインタラクティブなプロトタイプに変換できるUI/UXデザインのプロトタイピングツール

Adobe XDの編集画面

新ワークフローに移行できるように「習得すべきポイント」に絞ったカリキュラム

PhotoshopとXDの連携作業を完全習得

概 要

Adobe Photoshop CC 2018(1月23日にアップデートした最新バージョン)の講座コンテンツです。Web関連作業におけるPhotoshopの役割が変わったことで(Photoshopはアセット制作、ワイヤーフレームやカンプ制作はAdobe XDで行うことになるため)既存のワークフローを変更していくことになると思いますが、本講座ではスムーズに移行できるようにポイントを絞って学習していきます。

形 式

ウェブキャスト形式のコンテンツです。操作画面を表示して解説するビデオ(オンライン視聴)です。

※教材として制作されたものではなく講座のアーカイブです。

達成目標

  • Photoshop の特徴(他のグラフィックツールとの違い)を理解していること
  • Photoshopの基本操作を習得していること
  • レイヤーの種類と特性について理解していること
  • コンテンツの非破壊編集について理解し実行できること
  • コンテンツの埋め込み・リンク配置の違いとメリット・デメリットを理解し実行できること
  • 適切な設定でアセットを書き出せること
  • 人物などの被写体を選択しきれいに切り抜くことができること
  • 画像合成の作業を効率よく進められること
  • 写真画像などを適切に補正できること
  • Adobe XDの特徴を理解していること
  • PhotoshopとXDの枠割分担を理解していること
  • XDにPhotoshopで作成したアセットを配置できること
  • XDでプロトタイプを作成できること
  • XDでプロトタイプとデザインスペックを公開できること
  • 作成したプロトタイプをモバイルで確認する方法を理解し実行できること
  • PhotoshopとXDのワークフローについて「初心者にわかりやすく」説明できること

総再生時間

185分(3時間05分)

付属するもの

レッスンデータ・完成データ・サンプルデータ

※専用ページからダウンロードできます

価 格

1,200円(税込)

本コンテンツは販売終了しました。

「Photoshop基礎編」と「XD基礎編」に分かれて、別々のコンテンツとして再リリースされます。

Adobe Photoshop 基礎編

・正式販売(通常価格1,600円/2018年8月現在)

 

 

 

 

 

 

 

Adobe XD 基礎編

・正式販売(通常価格1,800円/2018年8月現在)

購入ページへ

購入ページへ

Curriculum

Part-01

再生時間:02:40

ワークスペースの設定

Part-01

再生時間:12:07

レイヤーの種類と特性を理解する

Part-02

再生時間:04:23

パネルの操作とリセットの方法

Part-02

再生時間:09:33

レイヤーのグループ化とアセットの書き出し

Part-03

再生時間:07:11

ズーム操作と検索・共有機能

Part-03

再生時間:08:29

埋め込み画像を外部リンク画像に変換

Part-04

再生時間:06:12

レイヤーの基礎知識と調整レイヤーの使い方

Part-04

再生時間:05:20

リンク切れの修正方法とパッケージ機能

Part-05

再生時間:04:11

スマートフィルターの使い方

Part-05

再生時間:10:21

クリッピングマスクの活用

Part-06

再生時間:02:30

画像の書き出し機能

Part-07

再生時間:02:19

画像の保存と開く方法

Part-00

再生時間:16:00

Adobe XD プロトタイピング概論

Step-01

再生時間:10:11

スポット修復ブラシによる除去

Part-01

再生時間:03:17

コピー&ペーストでXDに配置

Step-02

再生時間:03:04

コンテンツに応じた切り抜き

Part-02

再生時間:10:37

CCライブラリを使用してXDに配置

Step-03

再生時間:03:52

コンテンツに応じたパッチツール

Part-03

再生時間:07:48

複数のバリエーションをXDに配置

Step-04

再生時間:09:33

コンテンツに応じた塗りつぶし

Part-04

再生時間:11:15

XDでプロトタイプとデザインスペックを共有

Step-05

再生時間:08:29

被写体を選択と自動補正

Part-05

再生時間:08:36

XDでAdobe Stockの素材を使用する

Step-06

再生時間:05:20

境界線の調整とマスク作成の方法

Part-06

再生時間:04:33

モバイルプレビューで確認する

Part-07

再生時間:07:03

プロトタイプのデザインスペックを確認する

Part-08

再生時間:03:10

描画・テキストツールとレイヤーの表示

Part-09

再生時間:02:25

オブジェクトのグループ化/取り出し

Part-10

再生時間:04:35

ブール演算のオブジェクトをレイヤー操作

Part-11

再生時間:04:48

リピートグリッドからオブジェクト取り出し

Part-12

再生時間:02:32

リピートグリッドのシンボル化と活用方法

Part-13

再生時間:02:30

メンテナンス性を高めるレイヤー構造

Part-14

再生時間:03:34

デザインスペックとCCライブラリのベクター対応

Part-15

再生時間:04:13

スクロールの位置を保持する

Part-01

作業を始める前に覚えておくこと

素材データのダウンロード

Part-1.zip(1.1MB)をダウンロードする

Step-01

ワークスペースの設定

再生時間:2分40秒

達成目標

視聴する

  • ワークスペースとは何か理解できている
  • 登録されているワークスペースを切り替えることができる
  • ワークスペースをリセットしてデフォルトの状態に戻すことができる

Step-02

パネルの操作とリセットの方法

再生時間:4分23秒

達成目標

視聴する

  • パネルやツールをワークスペースから切り離すことができる
  • 切り離したパネルやツールをワークスペースにドッキングさせることができる
  • 使いたいパネルを表示したり、閉じることができる

Step-03

ズーム操作と検索・共有機能

再生時間:7分11秒

達成目標

視聴する

  • 画像を拡大表示したり、100%表示にするなど自在に
    ズームツールを操作できる
  • 検索機能を使ってAdobe Stockから必要な素材を見るけることができる
  • 検索機能を使って使い方のわからない機能について調べることができる

Step-04

レイヤーの基礎知識と調整レイヤーの使い方

再生時間:6分12秒

達成目標

視聴する

  • 新しいレイヤーを作成することができる
  • レイヤーの表示/非表示を切り替えることができる
  • レイヤーを削除することができる
  • オリジナルの画像を直接編集せず、調整レイヤーで色調補正などを実行できる

Step-05

スマートフィルターの使い方

再生時間:4分11秒

達成目標

視聴する

  • Photoshopに搭載されているフィルターの種類を
    大まかに把握している
  • オリジナルの画像を直接編集せず、フィルターを適用できる

Step-06

画像の書き出し機能

再生時間:2分30秒

達成目標

視聴する

  • Web用のグラフィック形式
    (PNG・JPEG・GIF・SVG)を書き出すことができる
  • 圧縮率と画質劣化をチェックしながら、適切な品質かつデータサイズのJPEGファイルを書き出すことができる

Step-07

画像の保存と開く方法

再生時間:2分19秒

達成目標

視聴する

  • 画像データを保存することができる
  • 閉じたファイルをすぐに開くことができる

カリキュラムに戻る

Part-02

レイヤーの機能とアセットの扱い

素材データのダウンロード

Part-2.zip(229.9MB)をダウンロードする

Step-01

レイヤーの種類と特性を理解する

再生時間:12分07秒

達成目標

視聴する

  • 3つの基本レイヤーとは何か理解している
  • レイヤーを塗りつぶす専用のレイヤーについて理解している
  • レイヤーの内容を「切り抜く」ときに使用する特別なレイヤーについて理解している
  • レイヤーの内容にドロップシャドウをつけたり、周辺を光らせたり、エンボス効果を適用する方法を知っている
  • スマートオブジェクトとは何か他人に説明することができる
  • 埋め込み配置とリンク配置の違いと理解している

Step-02

レイヤーのグループ化とアセットの書き出し

再生時間:9分33秒

達成目標

視聴する

  • 関連した複数のレイヤーを「グループ化」することができる
  • 特定のレイヤーに対して、画像アセットの書き出しを実行することができる

Step-03

埋め込み画像を外部リンク画像に変換

再生時間:8分29秒

達成目標

視聴する

  • 埋め込まれた画像を外部ファイルとして
    書き出すことができる
  • ビッグドキュメント形式(拡張子「.psb」)の特性について理解している

Step-04

リンク切れの修正方法とパッケージ機能

再生時間:5分20秒

達成目標

視聴する

  • リンク切れが発生した場合、すぐに修正することができる
  • 別々の場所からリンク配置している複数の画像を1つのフォルダーに
    まとめることができる

Step-05

クリッピングマスクの活用

再生時間:10分21秒

達成目標

視聴する

  • クリッピングマスクとは何か理解している
  • クリッピングマスクを適用して図形やテキストなどで切り抜くことができる

カリキュラムに戻る

Part-03

イントロダクション

Step-00

Adobe XD プロトタイピング概論

再生時間:16分00秒

達成目標

視聴する

  • プロトタイプ制作が重要だと言われる理由について
    説明できること
  • プロトタイピングツールに求められる機能について理解していること
  • プロトタイピングツールにおけるPhotoshopとXDの違いについて説明できること

Adobe XDとの連携

素材データのダウンロード

Part-3.zip(11.1MB)をダウンロードする

Step-01

コピー&ペーストでXDに配置

再生時間:3分17秒

達成目標

視聴する

  • Photoshopで作成した画像をXDのアートボードに
    配置できる
  • Illustratorで描画した図やテキストをXDのアートボードに配置できる

Step-02

CCライブラリを使用してXDに配置

再生時間:10分37秒

達成目標

視聴する

  • Creative Cloudライブラリ(CCライブラリ)経由で
    Photoshopの画像をXDのアートボードに配置できる
  • PhotoshopのCCライブラリがサポートしているアセットのタイプを理解している
  • IllustratorのCCライブラリがサポートしているアセットのタイプを理解している
  • XDのCCライブラリがサポートしているアセットのタイプを理解している

Step-03

複数のバリエーションをXDに配置

再生時間:7分48秒

達成目標

視聴する

  • レイヤーカンプを活用して複数のバリエーションを
    CCライブラリに登録することができる
  • CCライブラリに登録した画像を編集することができる

Step-04

XDでプロトタイプとデザインスペックを共有

再生時間:11分15秒

達成目標

視聴する

  • デスクトッププレビューを実行してプロトタイプを
    確認できる
  • 作成したプロトタイプを公開することができる
  • プロトタイプのデザインスペックを公開できる
  • 公開したリンクを削除することができる
  • 修正したプロトタイプのリンクを更新することができる

Step-05

XDでAdobe Stockの素材を使用する

再生時間:8分36秒

達成目標

視聴する

  • XDでAdobe Stockを活用することができる
  • XDのシェイプツール(長方形や楕円形)で画像を切り抜くことができる
  • 繰り返しのパターンを「リピートグリッド」機能で素早く作成することができる
  • リピートグリッドで作成した繰り返しパターンの中に「CCライブラリの画像」を挿入することができる

Step-06

モバイルプレビューで確認する

再生時間:4分33秒

達成目標

視聴する

  • XDで作成したプロトタイプをスマートフォンで
    確認することができる

Step-07

プロトタイプのデザインスペックを確認する

再生時間:7分03秒

達成目標

視聴する

  • 「デザイン」モードと「プロトタイプ」モードの
    違いを他人に説明できる
  • 2つのアートボードを(ボタンをクリックして)行ったり来たりできる仕組みを作成できる
  • XDの「シンボル」機能を他人に説明できる
  • シンボルを作成できる

Step-08

描画・テキストツールとレイヤーの表示

再生時間:3分10秒

達成目標

準備中

  • XDの描画ツール・テキストツールを使うことができる
  • レイヤーパネルの特性と役割について理解できる

Step-09

オブジェクトのグループ化/取り出し

再生時間:2分25秒

達成目標

準備中

  • アートボード上のイメージやテキストを
    グループにしてまとめることができる
  • グループ化したまとまりから特定のオブジェクトを取り出すことができる
  • グループから取り出したオブジェクトを戻すことができる

Step-10

ブール演算のオブジェクトをレイヤー操作

再生時間:4分35秒

達成目標

準備中

ブール演算の機能を理解して活用することができる

レイヤーパネルを使ってブール演算オブジェクトを編集できる

Step-11

リピートグリッドからオブジェクト取り出し

再生時間:4分48秒

達成目標

準備中

リピートグリッドとレイヤー構造の関係を理解できる

作成したリピートグリッドから特定のオブジェクトを取り出すことができる

リピートグリッドから取り出したオブジェクトを戻すことができる

Step-12

リピートグリッドのシンボル化と活用方法

再生時間:2分32秒

達成目標

準備中

  • リピートグリッドをシンボル化して活用することができる
  • 複数のリピートグリッドをシンボルにして管理できる

Step-13

メンテナンス性を高めるレイヤー構造

再生時間:2分30秒

達成目標

準備中

  • XDのレイヤーと他のアプリケーションソフトの
    レイヤーとの違いを説明できる
  • レイヤーパネルでグループやリピートグリッドの構造を操作できる

2018年2月アップデート追加版

素材データのダウンロード

Step-14/15の素材をダウンロードする

Step-14

デザインスペックとCCライブラリのベクター対応

2018年2月アップデート追加版

再生時間:3分34秒

達成目標

視聴する

  • アートボードにレイアウトグリッドを設定・表示
    することができる
  • デザインスペックのリンクを更新できる
  • Illustratorで作成したベクターデータをCCライブラリを介して利用できる

Step-15

スクロールの位置を保持する

2018年2月アップデート追加版

再生時間:4分13秒

達成目標

視聴する

  • スクロールの位置を保持する機能がどのような表現に
    役立つのか説明できる
  • チェックボックスのON・OFFなどの機能を再現できる

カリキュラムに戻る

Part-04

選択と切り抜き・合成の基本技

素材データのダウンロード

Part-4.zip(146KB)をダウンロードする

Step-01

スポット修復ブラシによる除去

再生時間:10分11秒

達成目標

視聴する

  • スポット修復ブラシツールの機能を理解している
  • ブラシのサイズをキーボードを使って調整することができる
  • オリジナルの画像を直接触らない「非破壊編集」で作業を進められる

Step-02

コンテンツに応じた切り抜き

再生時間:3分04秒

達成目標

視聴する

  • 切り取りツールを使って画像をトリミングすることが
    できる
  • 画像の傾きを補正することができる
  • 「コンテンツに応じる」の効果を理解している

Step-03

コンテンツに応じたパッチツール

再生時間:3分52秒

達成目標

視聴する

  • コンテンツに応じたパッチツールの機能を理解している
  • パッチツールを使用して画像の中から不要な要素を除去することができる
  • スポット修復ブラシツールを併用しながら効率よく除去作業を実行できる

Step-04

コンテンツに応じた塗りつぶし

再生時間:2分40秒

視聴する

Step-05

被写体を選択と自動補正

再生時間:2分40秒

視聴する

Step-06

境界線の調整とマスク作成の方法

再生時間:2分40秒

視聴する

カリキュラムに戻る

商品購入

価格:1,200円(税込)

購入する

本コンテンツは販売終了しました

銀行振込をご希望の方は「ebookcast@gmail.com」宛に「PhotoshopとXD銀行振込希望」と書いて送ってください。

AIクリエイティブ・トライアルレポート(旧シンクゼロマガジン)を購入されている方々へ

同コンテンツは、Creative Edge School Books がリリースする全てのコンテンツを無償提供していますので(2019年3月末まで)、Photoshop基礎編・XD基礎編も提供されます。誤って購入しないようにご注意くださいませ。

更新日:2018年9月8日(土)/公開日:2018年1月29日(月)

ホームに戻る

2018 - Creative Edge School Books

ebookcast@gmail.com