XDで文字にグラデーションを設定する方法を紹介!

XDで文字にグラデーションを設定する方法を紹介!

takato(@n8takato)です!

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

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

webデザインでは文字にグラデーションを設定することがあります。

XDでは簡単に文字にグラデーションを設定することが出来ます。

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

この記事を読むメリット

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

この記事を書いた人

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

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

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

早速XDで文字にグラデーションを設定する方法を紹介します。

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

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

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

文字を作成する

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

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

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

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

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

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

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

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

①オブジェクトの作成

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

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

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

長方形ツールから図形を作成します。
オブジェクトの作成

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

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

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

オブジェクトにグラデーションを設定する手順

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

①文字と長方形を重ねます。②文字と長方形を選択した状態で「交差」をクリックします。
「交差」を選択

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

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

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

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

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

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

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

色を追加出来る

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

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

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

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

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

円形のグラデーションが作成出来る

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

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

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

XDで文字にグラデーションを設定するのは簡単!

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

文字にグラデーションを設定するのは簡単です。

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

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

あわせて読みたい
【XD】文字を斜体にする方法を紹介! XDで文字を斜体にする方法を知りたい この記事は上記の課題に向けて作成しています。 デザイン内の一部のテキストを斜体にすることがあります。 XDでは簡単に文字を斜体...
あわせて読みたい
【2023年版】AdobeXDで縦書き出来る[Tategaki for Adobe XD] XDで文字を縦書きにする方法を知りたい。 この記事は上記の課題に向けて作成しております。 現時点ではXDのデフォルト機能で文字を縦書きにする方法はありません。 その...
あわせて読みたい
【2023年版】AdobeXDでぼかし効果を使う2つの方法を紹介! XDで画像をぼかす方法を教えて欲しい。 この記事では上記の課題に向けて作成しています。 XDでは簡単に画像をぼかすことが出来ます。 この記事ではXDで画像をぼかす方法...
  • URLをコピーしました!
目次