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 週末特別講座

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

お知らせしていた「Adobe XD 週末講座」をやります。昨年末から実施している「Adobe XD デザインシステム演習」の内容をベースにしますが、今回はこれからXDを学ぶ初心者の皆さんを対象としています。ぜひ挑戦してみてください!

 

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

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

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

週末講座に参加された皆さん、お疲れさまでした!

今回は、9つの課題に挑戦していただきました。

 

今月のアップデートで「コンポーネント」が導入されました。それまで使っていた「シンボル」の強化版というより、新しい概念の機能が入ったという感じです。

今後のアップデートでさらに進化していきますので、覚えるなら今のうちです。できることが増えていくほど、初心者にとっては難解になっていくのですから、敷居が低いうちに習得しておきましょう。

 

2019年5月26日

 

完成データおよび解説動画の高画質版のダウンロードは終了しました。

尚、「XD基礎編」の専用ページ、および「研修実施企業に提供している専用サイト」ではいつでもダウンロードできるようになっていますので、復習などにご利用ください。

 

解説動画のアーカイブは、引き続きTwitter(@commonstyle)で投稿していきます。

講師:Mr. Creative Edge(Adobe Community Evangelist

準備編

XDで使用する用語を理解しよう

XDをこれから学ぶ初心者の皆さんへ。

Adobe XDで使用される用語「オブジェクト・アセット・コンポーネント」について学習してください。まずは、専門用語を理解しましょう(週末講座の練習問題ではこの3つの専門用語が頻繁に出てきます)。

再生時間:06分58秒

週末の課題

残りの練習問題(解説動画のアーカイブ)は、

Twitterで引き続き投稿していきます。

練習問題-4

この練習問題は、素材データが必要です。「Sample-4.zip」をダウンロードして、解凍してください。フォルダーの中には練習問題用のXDファイル「Lesson-Sample-4.xd」、完成データ(スクリーンショット)が入っています。

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

 

※この練習問題は、Adobe Stockのプレビュー画像を加工なしで使用しています。プレビュー画像は再配布することができませんので、完成データは(XDファイルではなく)スクリーンショットになっています。

  • この練習問題は「10〜15分」程度で作成してください
  • Adobe Stockで6つほど素材画像を集めてください(ライブラリに保存すれば、XDのCCライブラリからドラッグ配置することができます)
  • 「Lesson-Sample-4.xd」をダブルクリックして開きます
  • 長方形を描いて、すでに登録されているコンポーネント(テキストとアイコン)を組み合わせます
  • 組み合わせたオブジェクトをコンポーネントに変換してください
  • インスタンスをアートボードに配置します
  • CCライブラリを開いて、Adobe Stockで集めた画像を配置していきます
  • レスポンシブリサイズ機能を活用して配置画像の高さを調整してください
  • マスターコンポーネントを操作して、インスタンスの角の丸みやドロップシャドウを設定してください

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

  • ※先週の「Photoshop週末講座」のアーカイブページを利用していますので、「XD」フォルダをクリックしてください
  • ※XDファイルではなく、ZIP圧縮されたファイルをダウンロードしてください。アイコンの右下の「…」をクリックして「ダウンロード」を選択しましょう(「保存」ではありません)
  • ※週末(25〜26日)は自由にダウンロードできます
練習問題-4の完成画面

練習問題-3

この練習問題は、素材データが必要です。「Sample-3.zip」をダウンロードして、解凍してください。フォルダーの中には練習問題用のXDファイル「Lesson-Sample-3.xd」、4つの画像ファイル、完成データが入っています。

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

  • この練習問題は「10〜15分」程度で作成してください
  • 「Lesson-Sample-3.xd」をダブルクリックして開きます
  • すでにオブジェクトが配置されているアートボードを「コンポーネント」にします
  • 何も配置されていない4つのアートボードにコンポーネント(インスタンス)を配置してださい
  • 素材画像(photo1〜4.png)を各々、ドラッグして配置していきます
  • アートボードの背景カラーを変更します。背景のシェイプは、command(Ctrl)+クリックで選択することができます
  • マスターコンポーネントに配置されているシェイプやテキストの大きさや位置を変更します(インスタンスに反映されます)
  • インスタンスごとの個別編集も可能です

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

  • ※先週の「Photoshop週末講座」のアーカイブページを利用していますので、「XD」フォルダをクリックしてください
  • ※XDファイルではなく、ZIP圧縮されたファイルをダウンロードしてください。アイコンの右下の「…」をクリックして「ダウンロード」を選択しましょう(「保存」ではありません)
  • ※週末(25〜26日)は自由にダウンロードできます
練習問題-3の完成画面

練習問題-2

練習問題-1の続きです。練習問題を始める前に完成データをダウンロードして、XDで開いてください。このデータにはAdobe Fontsの「源ノ角ゴシック」が指定されており、使用しているパソコンに「源ノ角ゴシック」が無くても、自動的に同期を実行し、表示してくれます。

一度、同期したフォントは、フォントメニューから選択可能になります。

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

  • この練習問題は「15分」程度で作成してください
  • 配置した顔写真のフレームを「境界線」の幅と位置で表現します
  • 変更したい顔写真は何度でも生成し直すことができます
  • テキストツールで名前を入力し、リピートグリッドで全ての顔写真に追加します
  • フォントは「源ノ角ゴシック JP」を選択します
  • 人の名前を自動生成するWebサービスを使って、配置している18人分の名前を生成します
  • テキストエディタで新規ドキュメントにペーストして保存、顔写真の下に配置した名前にドラッグします

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

  • ※先週の「Photoshop週末講座」のアーカイブページを利用していますので、「XD」フォルダをクリックしてください
  • ※XDファイルではなく、ZIP圧縮されたファイルをダウンロードしてください。アイコンの右下の「…」をクリックして「ダウンロード」を選択しましょう(「保存」ではありません)
  • ※週末(25〜26日)は自由にダウンロードできます

今回使用した「人の名前を自動生成」するWebサービス:

練習問題-2の完成画面

練習問題-1

最初なのでウォーミングアップを兼ねて、単純な基本操作だけで進めていきましょう。解説動画を見ながら作業を始めてください。

  • この練習問題は「15分」程度で作成してください
  • アートボードを選択します
  • プラグインをインストールします
  • アートボードと同じ大きさの長方形を描きます
  • 幅を1/3に縮小、高さを1/6に縮小します
  • リピートグリッドを使って、長方形を敷き詰めます
  • インストールしたプラグインを実行して「人物の顔」写真を生成します
  • アートボードのカラーを変更します

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

  • ※先週の「Photoshop週末講座」のアーカイブページを利用していますので、「XD」フォルダをクリックしてください
  • ※XDファイルではなく、ZIP圧縮されたファイルをダウンロードしてください。アイコンの右下の「…」をクリックして「ダウンロード」を選択しましょう(「保存」ではありません)
  • ※週末(25〜26日)は自由にダウンロードできます
練習問題-1の完成画面

週末講座に参加される企業の皆さまへ

Adobe XD の本質的な価値と「デザイン経営」を長期計画で実践する企業

再生時間:33分38秒

Information

XDを活用した

チームビルディングを

体験できます

明日からXDを

仕事に役立てたい方へ!

速習の実践講座

2019.5.29

2019.6.6

デザイン思考 & Adobe XD/考えをすぐカタチにするワークショップ[詳細ページへ

5月29日(水)AM9:30〜20:00/会場:株式会社Too本社3F The Gallery Too

主催:株式会社Too/協力:アドビ システムズ 株式会社

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

詳細ページへ

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

大阪の

XDユーザーのための

勉強会+交流会

2019.6.8

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

詳細ページへ

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

Adobe XD User Fes 2019

25日から、Adobe XD ユーザーフェスがスタートします。7月末まで、札幌、仙台、名古屋、大阪、松山、広島、福岡、沖縄など、全国各地をリレー形式で開催。

本日の東京(会場:ソフトバンク 本社ビル)イベントは、Adobeの番組「Creative Cloud 道場」で午後1時から生中継されます。→終了しました

トップページに戻る

Update: 2019.5.25

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