Adobe XD でグラデーションを作成、編集、読み込み、使用します。グラデーションパネルを使って、カラー分岐点を追加し、グラデーション不透明度を制御します。

グラデーションとは、1 つのカラーから他のカラーに徐々に変化させたもの、または 1 つのカラーや複数のカラーの濃度を徐々に変化させたものです。グラデーションを使用して、カラーを交ぜたり、ベクターオブジェクトにボリュームを加えたり、デザインに照明効果やシャドウ効果を追加したりすることができます。

XD では、線形グラデーションと放射状グラデーションがサポートされます。

線形グラデーション

XD では、開始点から終了点に向かって直線的に変わるグラデーションが作成されます。

放射状グラデーション

XD では、開始点から終了点に向かって放射状のグラデーションが作成されます。

グラデーションカラーピッカー

XD でグラデーションのカラーピッカーにアクセスするには、オブジェクトを選択し、プロパティインスペクターで「塗り」をクリックします。XD では線形または放射状のグラデーションを作成できます。

カラーピッカーの上部で、ドロップダウンリストから「線形グラデーション」または「放射状グラデーション」を選択します。

グラデーションカラーピッカー
グラデーションカラーピッカー

A. グラデーションエディター B. カラー分岐点 C. 不透明度スライダー D. カラーフィールド E. スウォッチとして保存 F. カンバス上のグラデーションエディター 

グラデーションカラーピッカーを使用して、カラーを選択し、グラデーションの不透明度を設定できます。

グラデーションカラーピッカーにはグラデーションエディターがあり、グラデーションで使用されるすべてのカラーのクイックプレビューが表示されます。透明部分は、チェッカーパターンで示されます。

また、グラデーションエディターでは、グラデーションのカラー分岐点も表示されます。カラー分岐点は小さい円で示されます。カラーは、カラー分岐点間の距離に応じて変化し、混ざり合います。また、カラー分岐点は、グラデーションが適用されるオブジェクトに表示されるカンバス上のグラデーションエディターにも表示されます。 

初期設定では、2 つのカラー分岐点を利用できます。カラー分岐点を追加するには、グラデーションエディターをクリックします。グラデーションエディターに沿ってカラー分岐点をドラッグして、カラー分岐点の位置や各カラーの広がりを変えることもできます。カラー分岐点を削除するには、グラデーションカラーピッカーでグラデーションエディターから離れた位置にドラッグするか、カンバス上のグラデーションエディターでカラー分岐点をクリックして、「削除」を押します。

カンバス上のグラデーションエディターを使用して、グラデーションの方向を変えることができます。

コーナーハンドルを使用して、放射状グラデーションの起点と角度を変更できます。

グラデーションカラーピッカーの右側にあるスライダーを使用して、カラー分岐点の不透明度を制御できます。

線形グラデーションまたは放射状グラデーションによる塗りつぶしの適用

  1. オブジェクトを選択し、プロパティインスペクターで「塗り」をクリックします。

  2. カラーピッカーのドロップダウンリストから「線形グラデーション」または「放射状グラデーション」を選択します。

    カラーピッカーでの線状グラデーションおよび放射状グラデーションのオプション
    カラーピッカーでの線状グラデーションおよび放射状グラデーションのオプション
  3. グラデーションエディターでカラー分岐点をクリックして、カラーピッカーを使って目的のカラーを選択します。 

    • カラー分岐点を追加するには、グラデーションエディターをクリックします。
    • カラー分岐点に割り当てられたカラーを変更するには、カラー分岐点をクリックします。
    • カラー分岐点を移動するには、グラデーションエディターに沿ってドラッグします。
      注意:カラー分岐点をグラデーションエディターの両端に移動することはできません。
    • カラー分岐点を削除するには、グラデーションエディターから離れた位置にドラッグします。カンバス上のグラデーションエディターを使用した場合は、カラー分岐点をクリックして、「削除」を押します。
    • カラー分岐点を切り替えるには、Tab キーを使用します。
    • 放射状グラデーションの方向や角度を変更するには、コーナーハンドルをドラッグします。
    放射状グラデーションを使用する
    放射状グラデーションを使用する
  4. グラデーションの方向を変更するには、必要に応じて、カンバス上のグラデーションエディターセグメント(オブジェクト上)をドラッグします。

    カンバス上のグラデーションエディターセグメントのエンドポイントをオブジェクトの境界線の外にドラッグすることもできます。カラー分岐点をオブジェクトの境界線の外に配置した場合、(カラー分岐点に関連付けられた)カラーはオブジェクト上に表示されません。

    注意:

    カンバス上のグラデーションエディターセグメントの端を移動するには、矢印キーおよび Shift キーを押しながら矢印キーを使用します。内側のカラー分岐点を選択すると、矢印キーおよび Shift キーを押しながら矢印キーを使用して、セグメントに沿って移動できるようになります。

    Tab キーを押して、カンバス上のグラデーションエディターに沿ってカラー分岐点を変更することもできます。 

  5. グラデーションを作成したら、後で再利用するためにアセットパネルに保存できます。グラデーションを含むオブジェクトをクリックし、アセットパネルの「カラー」の横にある「+」アイコンをクリックして保存します。 

    アセットパネルに保存されたグラデーション
    アセットパネルに保存されたグラデーション

グラデーション塗りが適用されたオブジェクトの読み込み

  1. Adobe XD に読み込む前に、必ずファイルを .svg ファイルとして保存してください。

  2. ファイル/読み込みをクリックし、SVG ファイルを選択し、「読み込み」をクリックします。

グラデーションを SVG として読み込むと、初期設定で、カラーピッカーに「グラデーション」オプションが表示されます。XD でオブジェクトをコピー&ペーストすると、グラデーションの塗りもコピーされます。読み込むグラデーションのカラーやカラー分岐点を変更することもできます。

注意:

原点が中心から外れた放射状グラデーションが読み込まれた場合、XD では編集できません。 

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

法律上の注意   |   プライバシーポリシー