【AdobeXD】グラデーションを設定する方法を紹介!

【AdobeXD】図形とテキストにグラデーションをかける方法を紹介!

takato(@n8takato)です!

XDでグラデーションを設定する方法を知りたい。

この記事は上記の課題に向けて作成しています。

webデザインを作成する際にグラデーションを使用すると思います。

XDでは簡単にグラデーションの設定が出来ます。

この記事ではXDでグラデーションを設定する方法について説明します。

この記事を読むメリット

  • XDでグラデーションを設定する方法がわかる

この記事を書いた人

この記事を書いた僕はこんな人です!

  • 都内制作会社でwebデザイナーとして勤務
  • webデザイナー歴2年目のひよっこ
  • web制作現場で学んだことを発信している人
目次

XDでグラデーションを設定する方法

早速XDでグラデーションを設定する方法を説明します。

グラデーションを設定する手順は下記の通りです。

  1. グラデーションを設定するオブジェクトの作成
  2. オブジェクトをグラデーションへ設定
  3. グラデーションカラーの調節

グラデーションを設定するオブジェクトの作成

まずはオブジェクトを作成します。

アートボード左側にあるオブジェクトメニューから作成出来ます。

今回は長方形を作成します。

グラデーションを設定したいオブジェクトを作成します。
長方形の作成

オブジェクトをグラデーションへ設定

続いてカラー設定をグラデーションへ変更します。

グラデーションへ変更する手順はこちらです。

  1. オブジェクトを選択→「塗り」をクリック
  2. 「ベタ塗り」→「線型グラデーション」に変更

①オブジェクトを選択→「塗り」をクリック

オブジェクトを選択した状態で右側にある「塗り」を選択します。

オブジェクトを選択した上で「塗り」をクリックします。
「塗り」の選択

②「ベタ塗り」→「線型グラデーション」に変更

続いて「ベタ塗り」と表示されている部分を「線型グラデーション」に変更します。

「ベタ塗り」と表示されている部分を「線型グラデーション」に変更します。
線型グラデーションを選択

するとオブジェクトにグラデーションが反映されます。

グラデーションカラーの調節

最後にグラデーションのカラーを調節します。

線型グラデーションに変更すると縦線が表示されます。

線の先端部分の丸をそれぞれ選択するとグラデーションカラーを調節することが出来ます。

グラデーションカラーの調節

オブジェクトにグラデーションをかける方法の説明は以上です。

文字にグラデーションを設定する方法

続いて文字にグラデーションを設定する方法を説明します。

文字にグラデーションを設定する手順は下記の通りです。

文字にグラデーションを設定する手順

  1. 文字を作成する
  2. グラデーションが設定された長方形を作成する
  3. 長方形のグラデーションを文字に反映させる

文字を作成する

始めにグラデーションをかけたい文字を作成します。

文字は左メニューにある「テキスト」から作成出来ます。

テキストツールから文字を作成します。
文字の作成

グラデーションが設定された長方形を作成する

続いてグラデーションが設定された長方形を作成します。

※XDでは直接文字にグラデーションを設定することが出来ません。そのため1度グラデーションがかかった図形を作成し、そのグラデーションを文字へ移行する作業を行う必要があります。

長方形にグラデーションを設定する方法は先ほどと同じです。

グラデーションの設定がかかった長方形を作成します。
グラデーションの長方形を作成

長方形のグラデーションを文字に反映させる

最後に長方形のグラデーションを文字へ反映させます。

グラデーションを文字へ反映させる方法

  • 文字と長方形を選択した状態で「交差」を選択する

下記画像のように長方形と文字を選択した状態で「交差」を選択します。

①文字と長方形を重ねます。②文字と長方形を選択した状態で「交差」をクリックします。
「交差」でグラデーションを文字へ移行させる

※文字が上に来るように重ねてください。

すると長方形のグラデーションが文字へ反映されます。

長方形のグラデーションが文字に反映されました。
文字のグラデーション

文字にグラデーションが設定されました。

XDのグラデーションで他に出来ること

XDのグラデーションは他にも下記のようなことが出来ます。

  • 色を追加出来る
  • 円形のグラデーションもある

色を追加出来る

グラデーションに色を追加することが出来ます。(3色以上のグラデーションが出来る)

グラデーションがかかっている図形の線上をクリックするとグラデーションのポイントが追加されます。

グラデーションが設定されている図形上の線をクリックすると、グラデーションポイントが追加されます。
グラデーションのポイント追加

このポイント部分に新たに色を追加することが出来ます。

追加されたポイント部分の色を変更できます。
ポイント部分の色を変更する

円形のグラデーション

XDは円形のグラデーションにすることも出来ます。

ベタ塗り」→「円形グラデーション」を選択することで可能になります。

「ベタ塗り」から「円形グラデーション」を選択すると円形のグラデーションが作成出来ます。
円形グラデーション

XDは簡単にグラデーションが出来る

この記事ではXDでグラデーションをかける方法を説明しました。

簡単にグラデーション出来ることがわかったと思います。

グラデーションを駆使してかっこいいwebデザインを作成してください。

XDに関する他の記事はこちら

あわせて読みたい
【2022年版】AdobeXDで文字を縦書きにする方法を紹介! XDで文字を縦書きにする方法を知りたい。 この記事は上記の課題に向けて作成しております。 現時点ではXDのデフォルト機能で文字を縦書きにする方法はありません。 その...
あわせて読みたい
【2022年版】AdobeXDでぼかし効果を使う2つの方法を紹介! XDで画像をぼかす方法を教えて欲しい。 この記事では上記の課題に向けて作成しています。 XDでは簡単に画像をぼかすことが出来ます。 この記事ではXDで画像をぼかす方法...
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次