【Adobe XD】テキストにグラデーションを設定する方法

こんにちは、ryohei(@ityryohei)です!

本記事では、Adobe XDでテキストにグラデーションを設定する方法をご紹介しています。

Adobe XDでテキストをグラデーションにしたいな。良い方法ないかな?

上記の疑問にお答えします。

では、解説していきます。

Adobe XDでテキストにグラデーションを設定する手順

下記の操作手順の内容で進めていきます。一つ一つ手順を踏んでいけばグラデーションテキストが完成します。実際の操作画面のキャプチャも掲載していますので、説明だけでわからない場合はキャプチャを参考にしてくださいね。

操作手順

  • 「テキスト」でグラデーションする文字を入力する
  • 「長方形」で入力した文字より大きな長方形を作成し、文字の上に重ねる
  • 「長方形」の「塗り」を選択する
  • 「線形グラデーション」を選択する
  • 「線形グラデーション」の色を選択する
  • 「長方形」の「線」のチェックを外す
  • 「テキスト」と「長方形」の重なり順を変更する(テキストが前面になるように調整)
  • 「テキスト」と「長方形」を選択状態にして「交差」を選択する
  • グラデーションテキストの完成

Adobe XDの起動からアートボードの作成までの操作内容は省略しています。予めご了承ください。

ではゆっくり進めていきましょう!

Adobe XDでテキストにグラデーションを設定する

Adobe XDでテキストにグラデーションを設定します。操作画面のキャプチャを使って解説していきます。キャプチャの番号は操作手順です。キャプチャの下の操作内容とあわせて進めていってください。

「テキスト」でグラデーションする文字を入力する

  • ①ツールバーの「テキスト」を選択します。
  • ②アートボード内で「テキスト」を展開し、文字を入力します。

「長方形」で入力した文字より大きな長方形を作成し、文字の上に重ねる

  • ③ツールバーの「長方形」を選択します。
  • ④手順②で入力したテキストよりも大きな長方形を作成し、文字の上に重ねます。

「長方形」の「塗り」を選択する

  • ⑤手順④で作成した長方形のプロパティインスペクターから「塗り」を選択します。
  • ⑥「塗り」のプロパティ内に左上に表示されている下向きの矢印を選択します。

「線形グラデーション」を選択する

  • ⑦プルダウンリストが表示されますので、「線形グラデーション」を選択します。

「線形グラデーション」の色を選択する

  • ⑧「線形グラデーション」の開始色を選択します。
  • ⑨「線形グラデーション」の終了色を選択します。

「長方形」の「線」のチェックを外す

  • ⑩「線」のチェックを外します。

「テキスト」と「長方形」の重なり順を変更する

  • ⑪レイヤーパネルから対象レイヤーをドラッグ&ドロップして重なり順を入れ替えます。

「テキスト」と「長方形」を選択状態にして「交差」を選択する

  • ⑫レイヤーパネルの「テキスト」と「長方形」を選択状態にします。
  • ⑬プロパティインスペクターの「交差」を選択します。

グラデーションテキストの完成

グラデーションテキストの完成です!

最後に

最近ですがWebデザインを一からさせていただく機会があり、Adobe XDを使って進めています。

Adobe XDはプロトタイプツールでワイヤーを作れるもの、といった認識を持っていましたが、シンプルなデザインであればサクサク作れる神ツールであることが判明しました。PhotoshopやIllustratorを扱いなれている方はもちろん、Adobe製品に慣れていない方でも直感的に扱える印象でしたので、デザイナーではないけれどデザインやバナーを作ってみたい!という方はぜひ触ってみてくださいね!

以上、Adobe XDでテキストにグラデーションを設定する方法のご紹介でした!

おすすめの書籍

Adobe Creative Cloudを通常価格で購入していませんか?

Adobe Creative Cloud(Adobe CC)はAdobe社が提供するクリエイター向けのサービスです。WEB制作の幅を広げる「Photoshop・Illustrator・XD」Youtuberや動画クリエイターの編集作業に欠かせない「Premiere Pro・After Effects」など全20以上のアプリが提供されており、幅広いプランが用意されています。

コンプリートプランはAdobe CCの全20以上のアプリが使用できるプランです。多くのアプリが使用できるため定価で購入すると年間7万円以上するプランですが、デジタルハリウッドのAdobeマスター講座では「基礎動画教材+Adobe CC コンプリートプラン(12ヵ月)」がセットになって39,980円(税込)で利用できます。定価より安価にAdobe Creative Cloudのライセンスを購入でき、以降のライセンス更新も可能。動画教材で基礎スキルを習得できるので、入門する方にも便利な講座です。詳しくは下記のリンクからチェックしてみてくださいね。