Adobe XDをもっと使いこなすヒント! 第24回 線形グラデーション

by akihiro kamijo

Posted on 01-23-2019

連載

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

分岐点にスウォッチの色を適用するには、先に分岐点を選択しておいて、使用したいスウォッチをクリックします。

いかがでしたか?
これは便利そうだ!という使い方はあったでしょうか?

次回をお楽しみに!

Topics: クリエイティブ, UI/UX & Web

Products: