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日)
今週末(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で投稿していきます
映像表現では必須の手法となっている「モーションブラー」は、少ないフレームでリアルな動きを表現することができます。
XDにはモーションブラーの機能が搭載されていませんので、Photoshopの「ぼかし(移動)」を使って、ブレたイメージを作成します(素材として用意してあります)。XDでは画像をトリミングして、垂直方向に移動するモーションを設定します。
解説動画を見ながら進めてください。
※下の動画(3分)には、Photoshopでブレたイメージを作成するプロセスが記録されています。Twitterで投稿した動画(2分20秒)には含まれていません。
完成データと解説動画の高解像度版(MP4)のダウンロード[リンク]
再生時間:03分01秒
練習問題-4のXDデータを使いますが、インタラクションの設定が若干異なりますので、「20190601-5.zip」をダウンロードして、練習問題-5のレッスンファイルを使用してください。今回はXDファイルをクラウドに保存して、スマホで確認しますので(スマートフォンやタブレットを持っている人は)モバイル版のXDアプリをインストールしておいてください。
解説動画を見ながら進めてください。
モバイル版Adobe XDのダウンロード:
完成データと解説動画の高解像度版(MP4)のダウンロード[リンク]
再生時間:02分18秒
コンポーネントを使用したモーションを作成します。コンポーネントについては、前回の週末講座で学習済みなので割愛します。復習したい方は「準備編:XDで使用する用語を理解しよう(6分58秒)」を御覧ください。
解説動画を見ながら進めてください。
完成データと解説動画の高解像度版(MP4)のダウンロード[リンク]
注意:
解説動画は150%ほど早送りになっていますので、実際のアニメーションの速度は、使用しているパソコンのデスクトッププレビューで確認してください。
再生時間:02分14秒
XDの自動アニメーションは、「同じレイヤー名」のオブジェクトに対して適用できることを学習しましたが、実はレイヤー名だけではなく、オブジェクトも同じタイプにしておく必要があります。
例えば、シェイプの長方形と楕円形はタイプが異なるので、アニメーションを適用できません。長方形から楕円に変形するようなモーションを設定したい場合は、両方を「パス」に変換しなければいけません。
解説動画を見ながら進めてください。
完成データと解説動画の高解像度版(MP4)のダウンロード[リンク]
再生時間:01分35秒
リピートグリッドは、繰り返しパターンを作成するときに便利な機能ですが、アニメーションでも役立ちます。練習問題-2では、連続パターンの簡単なモーションを作成します。
解説動画を見ながら進めてください。
完成データと解説動画の高解像度版(MP4)のダウンロード[リンク]
再生時間:02分38秒
最初の練習問題は長方形から楕円に変化する簡単なアニメーションを設定します。XDの自動アニメーション機能にはさまざまなルールがありますので、一つひとつ学習していきましょう。
解説動画を見ながら進めてください。
重要:
練習問題-1で作成したのは「2つの長方形のアニメーション」です。「長方形と楕円」ではありません。
見た目は、楕円ですが「長方形の角を丸くしたもの」なので、どちらも長方形だということを理解しておいてください。長方形と楕円だとアニメーションは適用されません。
この後の練習問題で詳しく解説していきます。
完成データと解説動画の高解像度版(MP4)のダウンロード[リンク]
再生時間:02分00秒
明日からXDを
仕事に役立てたい方へ!
速習の実践講座
大阪の
XDユーザーのための
勉強会+交流会
2019.6.6
2019.6.8
Adobe Animate との連携で高忠実度かつインタラクティビティレベル、ファンクショナルレベルの高いプロトタイプを作成する特別講座を予定しています。
一度、トライアルを実施しましたので、解説動画のアーカイブおよび完成データなどを公開します。今週末、自由にダウンロードできます。
PhotoshopのAI機能を活用してアニメーションのための写真素材を作成します。Animateに読み込み、アニメーションを設定、HTMLとJavaScriptを生成してブラウザーで確認します。
※これは正式講座として実施可能かどうかを試すトライアルです
再生時間:02分19秒
Adobe XDでプロトタイプ(簡易モーションを含む)を作成して、必要な素材を書き出し、Animateで最終決定したアニメーションを設定。Animateから、HTMLとJavaScriptを生成してブラウザーで確認します。
※これは正式講座として実施可能かどうかを試すトライアルです
再生時間:01分17秒
ZIP圧縮されたファイル「Indicator-Sample」をダウンロードしてください。「…」をクリックしてポップアップメニューから「ダウンロード」を選んでください(「保存」ではありません)。
完成データ(Webブラウザー確認用)[HTMLリンク]
今月の参考事例です。
カリキュラムに事例「ベアネイキッド・カスタム グラノーラ」の解説と、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”。