This content requires Flash

To view this content, JavaScript must be enabled, and you need the latest version of the Adobe Flash Player.

Download the free Flash Player now!

So now, I have got my fill selected and my fills has got two gradient stops one is black and the other is white. If I go down to the bottom here, I can choose which gradient I want to edit and edit each color individually. So as I drag this up here, I have changed the left gradients stop from black to red. I can also select the other gradient and change its color. All the same techniques that we used before to set a solid color can be used here to set the individual gradient stop colors. Now, here I am going from red to blue but I can also drag those gradient stops around, it changes the speed at which the gradient moves from one color to another. When the red and blue gradients stops are close together, the gradient will be red for a significant portion of time and then quickly but smoothly move over to the blue. Now gradient stops are not restricted to only have two colors. I can click anywhere in the bar to create additional gradient stops and change their colors as well. If I happen to have too many gradients stops, I can always click and drag any of the gradient stops downward to remove that given gradient stop.

However, once you are down to two gradients, you cannot remove it anymore. Now another interesting thing that Blend has introduced in this version is the gradient eye dropper. That is this tool over here and when I click on that one, I am now going to be able to draw a line anywhere inside the Blend application and Blend will create a gradient that represents that particular line. So for instance, I am going to drag it up here. I am going to click and drag and I am starting in white. I am going over the black and red rectangle. Go through some white and then go over the blue to some more white. So if you look at that line, you can see the individual colors that I am passing over. When I release the mouse, you will see that the gradient that was created start to white, goes over the black to red region and then includes the blue region and so on. So this allows me to capture any piece of UI and turn it into a gradient for use elsewhere.

Now this particular example may not seem very exciting but one of the places that I have seen a lot of people use the gradient eye dropper is right here over the hue bar itself. By doing this, I can get a nice rainbow gradient without too much effort. Another aspect of the linear gradient is everything that we have been doing right now has the left most gradient stop on top and the right most gradient stop on the bottom. Now I showed you a little bit of this earlier but with the gradient transform tool, I can click on it and move the vector around that represents the gradient. As I move the two closer together, the gradient changes and in this case, everything beyond the tail of the vector will take on the initial gradient stop color and then everything beyond the head of the vector will take on the final gradient stop.

The reason why the gradient ends look the way they do is because under the options venue here, you can see that the gradient is set to pad which means over the vector, we displayed the gradient but on both of the ends, we just used the color that was at the end of the gradient, we pad the remainder of the space. If I want to, I could choose reflect and when I do that, the gradient will go from the red through its different colors to the orange and that will reflect backwards from the orange back to the pink, back to the orange and so on so I get a nice oscillating style gradient. I could also go to my options and choose repeat and when I do this, it will go from the pink all the way over to the orange and then immediately jump back to the pink and repeat the gradient in the same order. These are just other ways that you can modify your gradient to get a different look.

Now some people go into the options menu and notice that there is an absolute versus bounding box option and ask what that does most notably because if I switch it, the gradient does not seem to change. The only difference between a bounding box gradient and an absolute gradient is how the gradient is specified in the XMAL itself. If you are not planning or modifying where the gradient is from your code, this two options are not really going to do anything useful for you. Now in addition to a linear gradient, down here at the bottom, we have the option to switch to a radial gradient. Now you will notice when I switch from the linear gradient to the radial gradient, it will keep my gradient stops but just change the overall appearance.

Now a radial gradient uses the tail of the vector as a rotation point and rotates the entire vector around it to create the circular appearance that you got. Now, just like we did with the linear gradient, I can grab the tail and move it around and that will just change your overall appearance. But unlike the linear gradient which you can only move around the individual points, you can also skew or resize your gradient to get a different appearance. You do have the same options though so once I have got it the way I want, I can choose repeat and have the gradient repeat outward. Again, these are just the different tools that you can use and I leave it to you to figure how to use it to get the visual display that you want.

So now, I have got my fill selected and my fills has got two gradient stops one is black and the other is white. If I go down to the bottom here, I can choose which gradient I want to edit and edit each color individually. So as I drag... click to read more