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

Creative Cloud UI/UX & Web

この連載では、Adobe XDを便利に使うための様々なテクニックを、Adobe XDチームのツイートからピックアップしてご紹介します。今回は、線形グラデーションの使い方に関連する8つのツイートを取り上げます。

Tip 1. 単色から線形グラデーションに切り替える

Adobe XDでグラデーションを使うときは、カラーピッカー上部のドロップダウンを使います。「べた塗り」から「線形グラデーション」に切り替えると、明色から暗色への線形グラデーションが自動的に生成されます。

通常は、べた塗りの色が明色に使われ、暗色にはより暗い色が自動選択されます。べた塗りの色がかなり暗い場合は、反対に明色が自動選択されます。

Tip 2. グラデーションに分岐点を追加/削除する

グラデーションに分岐点を追加して、複雑な色の変化をつくることができます。追加する方法は、カラーピッカー上部の帯(グラデーションエディタ)か、オブジェクト上に表示される線状のグラデーションエディタのどちらかの任意の箇所をクリックします。

分岐点を削除したいときは、削除したい分岐点を選択してからDelキーを押下します。カラーピッカー上部のグラデーションエディタでは、分岐点をドラッグしてグラデーションエディタの外でドロップして消す方法も利用できます。

Tip 3. 分岐点を選択してグラデーションを調整する

分岐点の位置を変えるときは、グラデーションエディタに沿って分岐点をドラッグするのが簡単です。キーボードを使う場合は、矢印キーを使うと、選択されている分岐点を移動させることができます。

分岐点が選択されている状態で、他の分岐点に選択を手早く切り替えたいときは、Tabキーが使えます。Shift+Tabキーを使うと選択の順番を逆にできます。

Tip 4. グラデーションの角度と位置を調節する

線形グラデーションの角度を変えたいときは、カンバス上のグラデーションエディタの端の位置を変更します。ドラッグするとオブジェクトにスナップするようになっています。

もちろん、端点は任意の位置に配置することが可能です。オブジェクト外やアートボード外に移動することもできます。

Tip 5. スウォッチの色を適用する

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


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

次回をお楽しみに!

POSTED ON 2019.01.23

Products Featured

  • Adobe XD

Tags

タグはありません