Adobe XDをもっと使いこなすヒント! 第25回 放射状グラデーション

by akihiro kamijo

Posted on 01-31-2019

連載

Adobe XDをもっと使いこなすヒント!

この連載では、Adobe XDを便利に使うための様々なテクニックを、Adobe XDチームのツイートからピックアップしてご紹介します。今回は、放射状グラデーションの使い方に関連する6つのツイートを取り上げます。

Tip 1. 線形グラデーションから放射状グラデーションに切り替える

#adobexd #protip Your gradient stops will be carried over if you switch between linear and radial gradient in the color picker. @adobexd pic.twitter.com/baVNq7JS4L

— Elaine Chao (@elainecchao) February 20, 2018

Adobe XDで放射状グラデーションを使うには、カラーピッカー上部のドロップダウンから選択します。線形グラデーションから切り替えた場合は、グラデーションエディタの色情報がそのまま持ち越されます。べた塗りから切り替えた場合は、線形グラデーションを選択した場合と同様に、自動的にグラデーションが生成されます。

Tip 2. 分岐点を追加/移動/削除する

#adobexd #protip The gradient stripe works the same way on radial gradients as it does on linear gradients; add, move, and delete stops using either the stripe or the on-canvas control. @adobexd pic.twitter.com/Ngk7sruOCr

— Elaine Chao (@elainecchao) December 3, 2018

グラデーションエディタを使った分岐点の操作方法は、線形グラデーションと同様です。追加するにはグラデーションエディタの任意の箇所をクリック、移動や削除は既存の分岐点を選択してマウスでドラッグ(またはキー操作)を行います。

Tip 3. グラデーションの配置を調節する

#adobexd #protip Grab the center point of the radial gradient control to move it around the object. @adobexd pic.twitter.com/TTqEfgYclJ

— Elaine Chao (@elainecchao) December 7, 2018

放射状グラデーションの配置を変更するには、カンバス上のグラデーションエディタの中央をドラッグして移動します。

Tip 4. 放射状グラデーションの広がりを調整する

#adobexd #protip Grab the endpoint of the on-canvas radial gradient control to adjust the radius of the gradient. @adobexd pic.twitter.com/c4S8HaU7oj

— Elaine Chao (@elainecchao) December 4, 2018

放射状グラデーションの半径を変更したい場合は、カンバス上のグラデーションエディタの外側の端点をドラッグします。

#adobexd #protip You can move the radial gradient endpoint to change the angle and radius at the same time. @adobexd pic.twitter.com/CVUADyiWNr

— Elaine Chao (@elainecchao) December 5, 2018

端点は半径を変えるだけでなく、角度を変更するためにも使えます。楕円形の放射状グラデーションの場合に便利な使い方です。

Tip 5. 円の形状を操作する

#adobexd #protip The second control point can be easily moved in any direction to scale and resize the radial gradient control. @adobexd pic.twitter.com/MxSCfqDoaa

— Elaine Chao (@elainecchao) December 6, 2018

カンバス上のもうひとつのコントロールをドラッグすると、放射状グラデーションの形状や大きさを変更できます。縦長や横長の楕円状のグラデーションを作成したいときに便利な機能です。

いかがでしたか?
これは便利そうだ!という使い方はあったでしょうか?

次回をお楽しみに!

Topics: クリエイティブ, UI/UX & Web

Products: