MENU
カテゴリー

【2022年版】XDでドロップシャドウを作る方法!

【2022年版】XDでドロップシャドウを作る方法!

takato(@n8takato)です!

XDでドロップシャドウを作る方法を知りたい

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

XDでは簡単にドロップシャドウを作成することが出来ます。

この記事ではXDでドロップシャドウを作る方法を紹介します。

この記事を読むメリット

  • XDでドロップシャドウを作成する方法がわかる

この記事を書いた人

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

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

XDでドロップシャドウを作る方法

早速XDでドロップシャドウを作成する方法を説明します。

XDでドロップシャドウを作成する手順は下記の通りです。

XDでドロップシャドウを作成する手順

  1. 図形を作成する
  2. 「ドロップシャドウ」をオンにする
  3. 影を調節する

図形を作成する

始めに図形を作成します。

図形はXDの左側にあるメニューから作成出来ます。

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

①長方形ツールで図形を作成します。
図形の作成

「ドロップシャドウ」をオンにする

続いて「ドロップシャドウ」をオンにします。

図形を選択した状態で「ドロップシャドウ」にチェックを入れます。

※ドロップシャドウは右側にあるメニューの「効果」の中に含まれています。

チェックを入れると図形の外側に影が現れます。

②図形を選択します。③「ドロップシャドウ」にチェックを入れます。④図形の外側に影が出来ます。
「ドロップシャドウ」をオンにする

影を調節する

最後に影を調節します。

XDでは下記4つの内容が調節出来ます。

  1. 影の色
  2. 影のぼかし
  3. X座標の影の広さ
  4. Y座標の影の広さ

①影の色

影の色を変更することが出来ます。

「ドロップシャドウ」のチェックボックスの隣から色を変更出来ます。

「ドロップボックス」のチェックボックスの隣から影の色を変更することが出来ます。
影の色を変更
カラーパレットから好きな色を選択出来ます。
カラーパレット

②影のぼかし

影をぼかすことが出来ます。

「ドロップシャドウ」の下にある「B」の数値を変えることでぼかすことが出来ます。

「B」から影のぼかしを調節出来ます。数値が大きくなるほど影がぼけるようになります。
影のぼかし

※数値が大きいほど影がぼけていきます。

ぼかし過ぎると影が見えなくなるので適度にぼかしてください。

③X座標の影の広さ

X座標(横軸)の影の広さを調節出来ます。

「ドロップシャドウ」の下にある「X」から調節出来ます。

※数値が増えること影が右側に広がります。
※数値をマイナスにすると左側に影が広がります。

「X」の数値を増やすと影が右側にずれます。
右へ影がずれる
数値をマイナスにすると影が左へずれます。
左へ影がずれる

④Y座標の影の広さ

Y座標(縦軸)の影の広さを調節出来ます。

「ドロップシャドウ」の下にある「Y」から調節出来ます。

※数値が増えること影が下に広がります。
※数値をマイナスにすると上に影が広がります。

「Y」の値を大きくすると影が下へずれます。
下へ影がずれる
「Y」の値をマイナスにすると影が上にずれます。
上へ影がずれる

XDでドロップシャドウを作る作業は以上です。

XDでは簡単にドロップシャドウを作成出来る!

最後にまとめです。

XDでドロップシャドウを作る手順

  • 図形を作成する
  • 「ドロップシャドウ」をオンにする
  • 影を調節する

ドロップシャドウは簡単に作れます。

まだ作成したことの無い方は是非やってみてください。

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

あわせて読みたい
【AdobeXD】cssコードを自動で取得出来るプラグインを紹介! XDからcssコードを取得したい この記事は上記の課題に向けて作成しております。 XDではデータからcssコードを取得出来るプラグインがあります。 このプラグインを使うこ...
あわせて読みたい
【2022年版】AdobeXDで文字を縦書きにする方法を紹介! XDで文字を縦書きにする方法を知りたい。 この記事は上記の課題に向けて作成しております。 現時点ではXDのデフォルト機能で文字を縦書きにする方法はありません。 その...
あわせて読みたい
【2022年版】AdobeXDで角丸図形を作る方法! XDで角丸の図形を作りたい この記事では上記の課題に向けて作成しています。 XDでは角丸の図形を簡単に作成出来ます。 この記事を読んで角丸にする方法をマスターしまし...
あわせて読みたい
【簡単】AdobeXDでフローを解除する方法を紹介! XDでフローを解除する方法を知りたい この記事は上記の課題に向けて作成しています。 XDで作業していると不要になったフローを解除する場合があります。 XDでは簡単にフ...
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次