Learn Adobe XD

Exercises|design Systems

For the latest information on this website, please visit Twitter (@commonstyle). To contact us ebookcast@gmail.com.

Para obtener la información más reciente en este sitio web, visite Twitter (@commonstyle). Para contactarnos ebookcast@gmail.com.

有关本网站的最新信息,请访问Twitter(@commonstyle)。 联系我们ebookcast@gmail.com。

高校生のためのAdobe XD 週末特別講座(25日と26日)

Exercises

Adobe XD 週末特別講座

第2回 モーションデザイン

アイデアを素早くカタチにする力を身につける

今週末(1日・2日)は、「Adobe XD モーションデザイン 週末講座」です。先週もXDでしたが、今回はモーションデザインに絞った内容になっています。XDの自動アニメーション機能を習得するための練習問題を用意しています。

 

解説動画のアーカイブも週末(6月1日〜2日)に投稿しますので、Twitter(@commonstyle)をご覧になってください。週末は誰でも自由にダウンロードできますので、データを確認したい方は週明けまでにダウンロードしておいてください。

週末講座は終了しました。

データを提供しているCreative Cloud Filesもクローズしましたが、次回の週末講座で、また公開されます(今回の完成データおよび解説動画の高解像度版もダウンロードできますので)。

追記(6/3):Photoshopの方はデータサイズがかなり大きいため、講座期間だけの公開になっていますが、XDは素材・完成データのサイズが小さいので、このまましばらく(1週間くらい)ダウンロード可能にしておきたいと思います。

参加された皆さん、お疲れさまでした!

今回の週末講座は、練習問題-11までいきましたね。モーションデザインに絞った内容だったので、自動アニメーション機能のルールや特性について理解できたと思います。今のところ単機能なのでスムーズに学習できたと思いますが、今後のアップデートによる機能強化で、(初心者にとっての)習得難易度は上がっていきます。今のうちにマスターしていきましょう。

前回のXD週末講座のページも保存されていますので、復習に使ってください。

 

2019年6月2日

 

解説動画のアーカイブは、半分ほど投稿しましたが、引き続きTwitterで公開します。尚、XDデータと解説動画(高解像度版)のダウンロードは、次回のXDの週末講座でまた可能になります。

 

XD実践編」の専用ページではいつでもダウンロードできますので実践編の学習者の皆さんは活用してください(準備でき次第、情報が掲載されます)。

講師:Mr. Creative Edge(Adobe Community Evangelist

週末の課題

解説動画のアーカイブは、Twitterで投稿していきます

練習問題-6

映像表現では必須の手法となっている「モーションブラー」は、少ないフレームでリアルな動きを表現することができます。

XDにはモーションブラーの機能が搭載されていませんので、Photoshopの「ぼかし(移動)」を使って、ブレたイメージを作成します(素材として用意してあります)。XDでは画像をトリミングして、垂直方向に移動するモーションを設定します。

解説動画を見ながら進めてください。

 

下の動画(3分)には、Photoshopでブレたイメージを作成するプロセスが記録されています。Twitterで投稿した動画(2分20秒)には含まれていません。

  • この練習問題は「15分」程度で作成してください
  • 「20190602-1.zip」をダウンロードして、「Images」フォルダの中の4つのPNG画像ファイルをXDのアートボードに配置します
  • シェイプでマスキングします
  • アートボードを複製して、配置した4つのPNGを各々、垂直方向に移動させます
  • ループ再生する自動アニメーションを設定します

完成データと解説動画の高解像度版(MP4)のダウンロード[リンク

  • ※「20190602-1.zip」をダウンロードしてください
  • ※XDファイルではなく、ZIP圧縮されたファイルをダウンロードしてください。アイコンの右下の「…」をクリックして「ダウンロード」を選択しましょう(「保存」ではありません)
  • ※週末(6/1〜2日)は自由にダウンロードできます

再生時間:03分01秒

練習問題-5

練習問題-4のXDデータを使いますが、インタラクションの設定が若干異なりますので、「20190601-5.zip」をダウンロードして、練習問題-5のレッスンファイルを使用してください。今回はXDファイルをクラウドに保存して、スマホで確認しますので(スマートフォンやタブレットを持っている人は)モバイル版のXDアプリをインストールしておいてください。

解説動画を見ながら進めてください。

モバイル版Adobe XDのダウンロード:

  • この練習問題は「5分」程度で作成してください
  • レッスン用のXDファイル「20190601-5-Lesson.xd」をダウンロードして開きます
  • すでにモーションが設定されています
  • カラーアイコンをタップすると、停止していたアニメーションがスタートする仕組みを設定します
  • XDファイルをクラウドに保存して、スマホやタブレットなどのモバイルデバイスで確認します
  • ※XDは「クラウド保存」がデフォルトです。ここでは、ローカル保存されているXDファイルを使って作業していますので、クラウドに保存する操作が必要でした。新規の作業は自動的にクラウド保存になります

完成データと解説動画の高解像度版(MP4)のダウンロード[リンク

  • ※「20190601-5.zip」をダウンロードしてください
  • ※XDファイルではなく、ZIP圧縮されたファイルをダウンロードしてください。アイコンの右下の「…」をクリックして「ダウンロード」を選択しましょう(「保存」ではありません)
  • ※週末(6/1〜2日)は自由にダウンロードできます

再生時間:02分18秒

練習問題-4

コンポーネントを使用したモーションを作成します。コンポーネントについては、前回の週末講座で学習済みなので割愛します。復習したい方は「準備編:XDで使用する用語を理解しよう(6分58秒)」を御覧ください。

解説動画を見ながら進めてください。

  • この練習問題は「10分」程度で作成してください
  • レッスン用のXDファイル「20190601-4-Lesson.xd」をダウンロードして開きます
  • すでにモーションが設定されています
  • 新たにコンポーネントを使用したモーションを追加します

完成データと解説動画の高解像度版(MP4)のダウンロード[リンク

  • ※「20190601-4.zip」をダウンロードしてください
  • ※XDファイルではなく、ZIP圧縮されたファイルをダウンロードしてください。アイコンの右下の「…」をクリックして「ダウンロード」を選択しましょう(「保存」ではありません)
  • ※週末(6/1〜2日)は自由にダウンロードできます

注意:

解説動画は150%ほど早送りになっていますので、実際のアニメーションの速度は、使用しているパソコンのデスクトッププレビューで確認してください。

再生時間:02分14秒

練習問題-3

XDの自動アニメーションは、「同じレイヤー名」のオブジェクトに対して適用できることを学習しましたが、実はレイヤー名だけではなく、オブジェクトも同じタイプにしておく必要があります。

例えば、シェイプの長方形と楕円形はタイプが異なるので、アニメーションを適用できません。長方形から楕円に変形するようなモーションを設定したい場合は、両方を「パス」に変換しなければいけません。

解説動画を見ながら進めてください。

  • この練習問題は「10分」程度で作成してください
  • レッスン用のXDファイル「20190601-3-Lesson.xd」をダウンロードして開きます
  • 上の図形のモーションが不完全であることを確認します
  • 上の長方形と楕円形のオブジェクトタイプを「パス」に変換します

完成データと解説動画の高解像度版(MP4)のダウンロード[リンク

  • ※「20190601-3.zip」をダウンロードしてください
  • ※XDファイルではなく、ZIP圧縮されたファイルをダウンロードしてください。アイコンの右下の「…」をクリックして「ダウンロード」を選択しましょう(「保存」ではありません)
  • ※週末(6/1〜2日)は自由にダウンロードできます

再生時間:01分35秒

練習問題-2

リピートグリッドは、繰り返しパターンを作成するときに便利な機能ですが、アニメーションでも役立ちます。練習問題-2では、連続パターンの簡単なモーションを作成します。

解説動画を見ながら進めてください。

  • この練習問題は「15分」程度で作成してください
  • アートボードと同じ大きさの長方形を描きます
  • 幅の数値に「/4」、高さに「/8」を追加します
    ※「/4」は「÷4」の記述ですから1/4サイズになります
  • リピートグリッドでアートボード全体に敷き詰めます
  • リピートグリッドを解除します
  • プロトタイプモードに切り替えて自動アニメーションを設定します

完成データと解説動画の高解像度版(MP4)のダウンロード[リンク

  • ※「20190601-2.zip」をダウンロードしてください
  • ※XDファイルではなく、ZIP圧縮されたファイルをダウンロードしてください。アイコンの右下の「…」をクリックして「ダウンロード」を選択しましょう(「保存」ではありません)
  • ※週末(6/1〜2日)は自由にダウンロードできます

再生時間:02分38秒

練習問題-1

最初の練習問題は長方形から楕円に変化する簡単なアニメーションを設定します。XDの自動アニメーション機能にはさまざまなルールがありますので、一つひとつ学習していきましょう。

解説動画を見ながら進めてください。

  • この練習問題は「10分」程度で作成してください
  • アートボードを複製します
  • 長方形を描き、隣のアートボードに複製します
  • プロトタイプモードに切り替えてアニメーションを設定します
  • ※同じレイヤー名にしないと「アニメーション設定は適用されません」ので、最初は失敗します。レイヤー名を修正して、正しく動くことを確認します。

重要:

練習問題-1で作成したのは「2つの長方形のアニメーション」です。「長方形と楕円」ではありません。

見た目は、楕円ですが「長方形の角を丸くしたもの」なので、どちらも長方形だということを理解しておいてください。長方形と楕円だとアニメーションは適用されません。

この後の練習問題で詳しく解説していきます。

完成データと解説動画の高解像度版(MP4)のダウンロード[リンク

  • ※「20190601-1.zip」をダウンロードしてください
  • ※XDファイルではなく、ZIP圧縮されたファイルをダウンロードしてください。アイコンの右下の「…」をクリックして「ダウンロード」を選択しましょう(「保存」ではありません)
  • ※週末(6/1〜2日)は自由にダウンロードできます

再生時間:02分00秒

Information

明日からXDを

仕事に役立てたい方へ!

速習の実践講座

大阪の

XDユーザーのための

勉強会+交流会

2019.6.6

2019.6.8

速習Adobe XD 最新プロトタイピング実践

詳細ページへ

6月6日(木)PM19:00〜21:00/会場:東京・六本木(Bitsmith株式会社 セミナールーム)

Adobe XD ユーザーフェス 2019 (大阪)

詳細ページへ

6月8日(土)PM14:00〜17:30/会場:デジタルハリウッド大阪

特別講座の予告

XDとAnimateの連携ワークを習得しよう

Adobe Animate との連携で高忠実度かつインタラクティビティレベル、ファンクショナルレベルの高いプロトタイプを作成する特別講座を予定しています。

一度、トライアルを実施しましたので、解説動画のアーカイブおよび完成データなどを公開します。今週末、自由にダウンロードできます。

Adobe Animate 週末講座(予告編 -1)

HTML5 Canvas/WebGL アニメ入門

PhotoshopのAI機能を活用してアニメーションのための写真素材を作成します。Animateに読み込み、アニメーションを設定、HTMLとJavaScriptを生成してブラウザーで確認します。

※これは正式講座として実施可能かどうかを試すトライアルです

再生時間:02分19秒

Adobe Animate 週末講座(予告編 -2)

HTML5 Canvas/WebGL アニメ入門

Adobe XDでプロトタイプ(簡易モーションを含む)を作成して、必要な素材を書き出し、Animateで最終決定したアニメーションを設定。Animateから、HTMLとJavaScriptを生成してブラウザーで確認します。

※これは正式講座として実施可能かどうかを試すトライアルです

再生時間:01分17秒

完成データと解説動画(高解像度版)のダウンロード:

ZIP圧縮されたファイル「Indicator-Sample」をダウンロードしてください。「…」をクリックしてポップアップメニューから「ダウンロード」を選んでください(「保存」ではありません)。

完成データ(Webブラウザー確認用)[HTMLリンク

高校生のためのXDデザインシステム演習

事例:ベアネイキッド・カスタム グラノーラ

今月の参考事例です。

カリキュラムに事例「ベアネイキッド・カスタム グラノーラ」の解説と、ID(イリノイ工科大学 デザイン大学院)の情報を追加しました。今月の演習で取り上げます。

再生時間:01分06秒

前回のページに戻る

Update: 2019.6.2

Soy activo en la posición de Adobe Community Evangelist. Está principalmente a cargo de "Adobe Sensei" y "Adobe XD".

난은 Adobe Community Evangelist의 입장에서 활동하고 있습니다. 주로 "Adobe Sensei」과 「Adobe XD」를 담당하고 있습니다.

我是Adobe的“社区布道者”。它主要负责“Adobe Sensei”和“Adobe XD”。

Mr.Creative.Edge

Creative Edge School Books

@commonstyle | ebookcast@gmail.com