How to Use Gradients in Experience Design CC (Beta)

How to Use Gradients in Experience Design CC (Beta)

One of the new features in Experience Design CC for Windows 10 is the ability to use gradients. This feature is available starting with June 13, 2017, update.

How to access and use gradients

How to apply gradient

The very first question you may have is how to access gradients because by default you won't see word gradient anywhere on your screen. The trick is to select an existing object like the rectangle, circle... or to draw the brand new shape. With vector object selected ensure that Fill on the right side of the screen is checked then click on the rectangle with fill color to expand color picker dialog.
Open color picker dialog in experience design cc

To use the gradient for your shape click arrow on the right side of Solid Color and choose: Gradient.
Create gradient in Experience Design CC

How to change color for gradient color stop

By default gradient is linear, created using two color stops at the beginning and the end of the gradient. To change color for color stop click on it either in color picker dialog or directly on vector object to which you want to apply the gradient. Choose color by clicking to select color in color picker dialog or type numerical value on the right side of: Hex. You can also use some of the saved colors which appear at the bottom of the color picker dialog.
Change color for color stop in Experience Design CC


How to change opacity for color stop

To change opacity for active or selected color stop use slider on the right side of color picker dialog. Drag circle toward the bottom to a lower opacity and vice versa.
Change opacity for color stop in Experience Design CC


How to change gradient angle

You can always play with gradient angle. The good thing is that you can visually preview result while dragging end color stops which are visible in the shape to which gradient is applied.
Change gradient angle in Experience Design CC

How to add color stop

To add a color stop or additional color in other words to your gradient use one of two available options:

  1. Click anywhere on gradient rectangle in color picker dialog
  2. Use gradient drawn directly on the shape to which is applied. Click anywhere on tiny line which connects gradient stops.

Add color stop in Experience Design CC

How to remove color stop

To remove color stop you must use gradient rectangle in color picker dialog. Click on color stop and drag it toward top or bottom.
Remove color stop in Experience Design CC


How to remove gradient

To remove gradient use color picker dialog and change Gradient to Solid Color from the drop down list in top left corner.
Remove gradient in Experience Design CC


Product used in this tutorial:
Experience Design CC (Beta) for Windows 10

Reference:
What’s new in Adobe XD 

Comments

Popular posts from this blog

How to Change Artboard Size in Adobe Photoshop

Free Puzzle Pieces Actions For Photoshop and Elements

Old Weathered Vertical Wooden Planks Free Image