AdobeXDプラグインまとめ

「塗り」のカラーをブレンドするXDプラグイン「Color Blender」

選択した複数オブジェクトのカラー(塗り)をブレンドします。

  • UIデザイン
  • UXデザイン
  • プロトタイピング
  • Webデザイン

公開日:2020/03/27最終更新日:2020/03/27

1.Color Blenderとは?

「塗り」のカラーをブレンド、つまり中間色を作ることのできるプラグインです。
選択するオブジェクトの数でプラグインの挙動が変わります。

  • 3つ以上のオブジェクトを選択して実行すると、最前面と最後面にあるオブジェクトの色はそのままに、中間にあるオブジェクトの色が位置と数に応じてブランドされたものになる
  • 2つの同じ形状のオブジェクトを選択し、ステップ数を入力するとその数だけカラーがブレンドされたオブジェクトが生成される

注意点

ブレンドされるのは「塗り」のベタ塗り(Solid-color fill)カラーだけです。

「線」のカラー、「塗り」のグラデーションカラーはブレンドできません。またオブジェクトの形状も変えられません。

2.Color Blenderのインストール方法

このリンクをクリックしてXDを開くか、プラグインの検索画面から探してインストールします。

3.Color Blenderの使い方

3つ以上のオブジェクトのブレンド

選択したオブジェクトのうち、最前面と最後面のオブジェクトにある色をベースに、中間にあるオブジェクトの配色を変更します。
例として、次の4つのオブジェクト…赤い円形、橙色の四角形、黄色の三角形、青色の星形を作成しました。

これら4つを選択した状態で実行すると、中間の四角形、三角形の色だけ変更されました。

中間色もレイヤーの重なり順によって決まります。四角形と三角形の重なり順を入れ替えると、プラグイン実行したときの結果も入れ替わります。

2つのオブジェクトのブレンド

まず、プラグインパネルを表示し、同じ形状のオブジェクトを2つ選びます。

「Color Blender」をクリックすると、ブレンドのステップ数を尋ねられるので、適当な値を入力します。

「OK」をクリックすると、指定したステップ数になるよう中間色のオブジェクトが生成されます。

ちなみに、異なる形状のシェイプを選択した場合、先に選択したシェイプの形状でステップ数分のオブジェクトが生成されます。

また、先に選択したオブジェクトから、後に選択したオブジェクトに向かってレイヤーが重なっていきますが、後に選択したオブジェクトが先に選択したものより背面にあれば生成されたものより下に表示されます。

理解度チェック

AdobeXDプラグインまとめ

便利なAdobe XDのプラグインまとめ その1

便利なAdobe XDのプラグインまとめ その2

このレッスンの著者