Adobe XDといえば、WebサイトやアプリなどのUI/UXデザインができる
Adobeが提供しているソフトウェアですが、自動アニメーションという機能を使って
このような簡単なカウントダウンタイマーを作っていこうと思います。
2パターンで比較していくのでチェックしてみてください。
今回はマスキングとリピートグリッドを使ったやり方を紹介します。
Adobe XDは無料で利用出来るので、この機会に試してみてもいいかもしれませんね。
https://www.adobe.com/jp/products/xd.html?sdid=19SCDRPN&mv=search&ef_id=Cj0KCQjwn_LrBRD4ARIsAFEQFKtmxAZHK6aMmJYUpdmP7VOvBdYs79685JeGoGo0qN_oN0RD5DzIkSMaAj1qEALw_wcB:G:s&s_kwcid=AL!3085!3!341513906623!b!!g!!%2Badobe%20%2Bxd
作り方
まずはソフトを開いて、IPhoneX/XSのアートボードを開きます。
左のタブから楕円形を選択して、Option/Alt を押しながらドラッグするとキレイな円が出来ます。
ちょうどいい円をアートボードの中央に作っていきます。
次に最後のGO!を円に入る大きさに作っていきます。
フォントのサイズは四角の下の小さい丸を上下にドラッグすると、簡単に大きさを変えられます。
リピートグリッド
GO!を右上のリピートグリッドで選択して必要な文字の数だけ下に伸ばしていきます。
文字の間のピンクの帯をドラッグすると文字同士の幅を変えられます。
ここではー40にしておきます。そして、GO!の下に残りの数字を入れていきます。
マスキング
円の中央にに3がくるよう配置します。
そのあと、一番大きいGO!が収まる大きさの長方形を3の上に配置します。
理由は長方形が小さいとマスキングした際に文字が途切れてしまうからです。
長方形と文字をShiftを押しながら両方選択して、Shift+Command⌘/Ctrl + M でマスキングできます。
下が寂しいので、ちょっとしたフレーズを入れてみました。
アートボードの名前を Option を押しながらドラッグすると、アートボード全体の複製が出来ます。
後は、3,2,1,GO!となるように文字をリピートグリッド内でスライドさせていきます。
このようになります。マスキングしているので、長方形内の文字しか見えません。
これで最後です。
左上のプロトタイプを選択します。
3のアートボードの名前を選択して、青いタグを2のアートボードにつなげます。
設定は、時間 1秒 自動アニメーション イーズアウト 0.3秒にします。
イーズアウトは自分で変えてみて試してください。
後は最後のアートボードまで青タグを同じようにつなげてください。
右上の再生ボタンを押して、
はい完成です!
簡単でしたね、次は違ったパターンをご紹介します。
ではまた!
Adobe XDおすすめの本
僕はAdobe XDやイラストレーターなどの使い方をこのサイトで学びました。
英語の勉強にもなりますよ!とてもおすすめです。
[…] […]