Adobe XDをもっと使いこなすヒント！ 第24回 線形グラデーション
Adobe XDをもっと使いこなすヒント！
この連載では、Adobe XDを便利に使うための様々なテクニックを、Adobe XDチームのツイートからピックアップしてご紹介します。今回は、線形グラデーションの使い方に関連する8つのツイートを取り上げます。
Tip 1. 単色から線形グラデーションに切り替える
#adobexd #protip Switch from solid to gradient using the drop-down at the top of the color picker. By default, XD will choose a color of a darker shade to create your gradient. If it’s a very dark shade, XD will choose a lighter shade for your default. @adobexd pic.twitter.com/pUUsRVUGwh
— Elaine Chao (@elainecchao) November 20, 2018
Adobe XDでグラデーションを使うときは、カラーピッカー上部のドロップダウンを使います。「べた塗り」から「線形グラデーション」に切り替えると、明色から暗色への線形グラデーションが自動的に生成されます。
通常は、べた塗りの色が明色に使われ、暗色にはより暗い色が自動選択されます。べた塗りの色がかなり暗い場合は、反対に明色が自動選択されます。
Tip 2. グラデーションに分岐点を追加/削除する
#adobexd #protip Add color stops to your gradient by clicking either on the gradient control in your object or along the color stripe at the top of your color picker. @adobexd pic.twitter.com/UAqqrcACEV
— Elaine Chao (@elainecchao) November 21, 2018
グラデーションに分岐点を追加して、複雑な色の変化をつくることができます。追加する方法は、カラーピッカー上部の帯（グラデーションエディタ）か、オブジェクト上に表示される線状のグラデーションエディタのどちらかの任意の箇所をクリックします。
#adobexd #protip Delete a color stop by either dragging it off the gradient strip at the top of the color picker or by selecting a color stop and hitting the Del key. @adobexd pic.twitter.com/sa67wLbnU7
— Elaine Chao (@elainecchao) November 27, 2018
分岐点を削除したいときは、削除したい分岐点を選択してからDelキーを押下します。カラーピッカー上部のグラデーションエディタでは、分岐点をドラッグしてグラデーションエディタの外でドロップして消す方法も利用できます。
Tip 3. 分岐点を選択してグラデーションを調整する
#adobexd #protip Easily adjust your gradient by sliding your color stops along the color stripe at the top of your color picker or along the gradient control on your object. @adobexd pic.twitter.com/1UXd5E7GMT
— Elaine Chao (@elainecchao) November 22, 2018
分岐点の位置を変えるときは、グラデーションエディタに沿って分岐点をドラッグするのが簡単です。キーボードを使う場合は、矢印キーを使うと、選択されている分岐点を移動させることができます。
#adobexd #protip Quickly switch between color stops by pressing Tab to go in one direction, and Shift+Tab to go in the other. @adobexd pic.twitter.com/v1EjkIrjyD
— Elaine Chao (@elainecchao) November 26, 2018
分岐点が選択されている状態で、他の分岐点に選択を手早く切り替えたいときは、Tabキーが使えます。Shift+Tabキーを使うと選択の順番を逆にできます。
Tip 4. グラデーションの角度と位置を調節する
#adobexd #protip If you want to change the angle of the gradient, simply move the endpoints on the canvas. These endpoints will snap to objects. @adobexd pic.twitter.com/e9ZlAHQREI
— Elaine Chao (@elainecchao) November 28, 2018
線形グラデーションの角度を変えたいときは、カンバス上のグラデーションエディタの端の位置を変更します。ドラッグするとオブジェクトにスナップするようになっています。
#adobexd #protip Your gradient’s endpoints don’t need to live within your object – you can move them outside your canvas for more subtle effects. @adobexd pic.twitter.com/rqTL5PWIxW
— Elaine Chao (@elainecchao) November 29, 2018
もちろん、端点は任意の位置に配置することが可能です。オブジェクト外やアートボード外に移動することもできます。
Tip 5. スウォッチの色を適用する
#adobexd #protip You can apply the color from a swatch to your color stop just by selecting the stop and clicking the swatch. @adobexd pic.twitter.com/uTyfsOqgDP
— Elaine Chao (@elainecchao) November 23, 2018
分岐点にスウォッチの色を適用するには、先に分岐点を選択しておいて、使用したいスウォッチをクリックします。
いかがでしたか？
これは便利そうだ！という使い方はあったでしょうか？
次回をお楽しみに！