【adobe XD】線型、円型のグラデーションを引く方法
青木隆之
2020/12/08
お疲れ様です、どうもアオキタカユキです。
この記事はiCARE Advent Calendar 2020の8日目の記事です。
今回はXDでグラデーションを設定する方法をご紹介します。フラットデザイン全盛ですがやはりポイント的にグラデーションを入れたくなりたくなりますよね。私はリッチな表現や流れを表現したり、立体的なデザインをしたい時に使います。
フラットなデザインな中に目を引くグラデーションのオブジェクト。目線の誘導なんかできるので重宝しております。
ほぼほぼデザイン業務はXDでおこなっておりますので作業はXDだけで完結させせたい。手癖でついついイラレなんかで作ってしまいますが、そこはさすがXD先輩。もちろんグラデーション機能はついております。
まずはこのようなデザインをご用意。
料金ページを想定しております。料金上にグラデーションのアイコンを配置して目立つようにしてます。
今回はこのアイコンを例にとります。
何はともあれパスを描きましょう。
そして本題のグラデーション。
右メニューの「塗り」からグラデーションを選択できます。
ここでは「線型グラデーション」を選択して、開始の色と終了の色を選択。
細かい調整を行いつつ、それぞれのパスにグラデーションを付けていくとこのような最終形に。
線型の他に「円形グラデーション」も設定できますので、一通りはグラーデションを作成できます。
XDはUIに特化したツールなのでこういう機能も用意してくれてます！効率的にUIを作成してスピーディーにアウトプットしていきましょう！
