この記事は2分で読めます

【XD】グラデーションの作り方

  • 投稿日
  • 更新日

あとで読む

【XD】グラデーションの作り方

今回はAdobe XDを使ったグラデーションの作り方を解説します。

XDには線形グラデーション、円形グラデーション、円錐グラデーションの3種類のグラデーション機能があります。

その中でも基本的な線形グラデーションの使い方をマスターしましょう!

イッパイアッテナ

はじめまして、イッパイアッテナです。

ITと教養で、優秀なネコの手となり、あなたのあらゆる問題を解決します。あなたの相談役だったり、デザイナーだったり、広報だったり、わたしたちは”イッパイ”の顔をあなたに見せることができます。

XDのグラデーションの種類

XDには線形グラデーション、円形グラデーション、円錐グラデーションの3種類のグラデーションがあります。

線形グラデーション

線形グラデーションは、直線方向にかかるグラデーションのことです。
グラデーションの一般的な形です。

円形グラデーション

円形グラデーションは、中心から外側に向かってかかるグラデーションのことです。
立体的な表現をする場合や少し印象的に仕上げたい場合に使うことが多いです。

円錐グラデーション

円錐グラデーションは、任意の点を中心にかかるグラデーションのことです。
ボタンなどに立体感を出したい時に役立つグラデーションです。

実際にグラデーションを作ってみよう!

今回は線形グラデーションを使い、実際にこの画像を作ってみましょう。
STEP
アートボードを選択する
XDを開き、Web1920(1920×1080px)のアートボードを選択しましょう。
STEP
長方形ツールで長方形を作成する
左側のツールバーから長方形を選択し、1920×1080pxの長方形を作成します。
STEP
長方形の塗りを設定する
①長方形を選択した状態で、右側のパネルの塗りをクリックします。
②カラーピッカーの左上にある「べた塗り」をクリックします。
③ブルダウン内の「線形グラデーション」を選択します。
線形グラデーションを選択すると以下のような画面が表示されます。
STEP
グラデーションに色を付ける
カラーピッカーのグラデーションエディター(上部の細長い長方形)の左右のつまみをそれぞれクリックして色を設定します。(青色:#332DD2、オレンジ:#E88732)
さらに他の色を入れたい場合は、オブジェクト上のグラデーションを調整する線をクリックしてつまみを追加します。
追加したつまみをクリックして色を設定します。(赤色:#E12950)
STEP
グラデーションを調整する

オブジェクト上の上のつまみを右端まで、下のつまみを左端までドラッグします。
真ん中のつまみも任意の位置に調整しましょう。

STEP
画像を挿入する
画像をドラッグ&ドロップで挿入します。
大きさや位置を調整しましょう。
STEP
画像の描画モードを「ソフトライト」に変更する
画像の描画モードを「ソフトライト」に変更するとグラデーションと馴染みます。
STEP
テキストを挿入する
ツールバーの「テキスト」を選択しテキストを挿入します。
フォントの大きさは100px、種類はNoto Sans JPのBoldです。
STEP
長方形ツールで長方形を作成し、設置する
長方形ツールで960×286pxの長方形を作成し、アートボードの中央に配置します。
以上で完成です!

まとめ

XDのグラデーション機能はできることがたくさんあります。
実際に手を動かすことで新しい発見が得られると思いますので、是非いろいろ試してみてください!

この記事で使用したデータの
ダウンロードはこちら

利用規約 ※必ずお読みください

この記事を書いた人

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

Web制作について相談してみませんか?

必須は必須項目です。弊社へお問い合わせいただく方は、下記の「個人情報の取り扱いについて」を必ずお読みください。

会社名

任意

お名前

必須

メールアドレス

必須

電話番号

任意

お問い合わせ内容

必須