Suppose you are working in Microsoft Expression Design and you want to create a custom gradient using the colors from another bitmap layer. Or, along the same lines, maybe you have an object that you want to surround with a gradient of colors that all originate from that object. What you need to do is apparent: create gradient stops by sampling the color of the original objects. But it may not be immediately apparent how to do that easily. Some users have tried to use the Color Dropper in the Toolbox, and though the Color Dropper does copy an object color, this isn’t the correct tool for this task. There’s another “dropper” tool, though, that will let you do the trick nicely.It’s called the Color Eyedropper. Though both tools are similar in appearance, they perform slightly different tasks.
Let’s knock off a quick custom gradient using the Color Eyedropper.
The Color Dropper in the toolbox (left) and the Color Eyedropper in the Appearance pane (right)
Creating a custom gradient using the Color Eyedropper
For this example, I’m going to perform a basic adornment of my new favorite alien superhero, Captain Zapstar. I want to give him a more heroic presence by giving him a radial background. This background, however, will actually be a radial gradient, and I will take the colors for this gradient directly from my hero’s skin and uniform. That’s easy enough with the Color Eyedropper and a few clicks.
- Open the image that you want to be the source for your gradient colors. The example image used here is a PNG file with a transparent background.
Introducing: Captain Zapstar, imported into Design
- In the Properties pane, expand the Appearance category, if necessary.
- Click the Fill tab. Then, click the Gradient Color swatch. You should see the Color Picker as well as the gradient bar below the Color Picker.
The Gradient color swatch
- Notice, in the lower right corner of the Color Picker, you will see a tiny version of the Color Dropper tool called the Color Eyedropper. This is our target tool.
- First, we want to set up some stops for our gradient. Each stop represents a color in the gradient. You can specify as many stops as you can manage, but I decided that I want the gradient to be spread out over five colors sampled from my superhero, so that means that I need only five stops. The default gradient contains the minimum number of stops, which is two, so I just need to add three more. To do this, just click inside the gradient bar. You can adjust the stop to specify how much of the representative color that you want to appear in the gradient, as well as adjust the midpoint of the color change, but we won’t tackle that just yet.
Click to create stops
- Now, it’s time to load our stops with the sampled colors. Click the first stop to select it.
Selecting a stop
- Now, click the Color Eyedropper tool. Your pointer should now be an eyedropper.
The pointer changes to an eyedropper
- Click the color in your object that you want to sample. That sampled color should now fill the first stop.
Sampling a color
- Repeat steps 7 and 8 for each stop that you created. When you are done, you’ll have a stop representing each color that you sampled. In the example, I decided to sample the colors in the captain’s boots, cape, belt, and outfit.
Other sampled colors
- Now, let’s draw the gradient. First, decide whether you want a linear gradient, which is a gradient with a series of straight lines, or a radial gradient, which is a gradient consisting of a series of concentric circles. Click the appropriate button in the Appearance pane. For the example, I chose Radial.
- Over in the toolbox, click the drawing tool that represents the shape that you want your gradient to be. You can also select the Pen tool if you want to draw a custom shape.
- Draw your gradient. In this example, I created a new layer below the superhero and drew the gradient to spread in a circle around him. Your situation may require that you do something else. For instance, you may want to reduce the opacity of your gradient in order to create a certain effect. Your needs may be radically different, but the key here is that you’ve created the gradient you wanted, using colors from the object.
Drawing the gradient. In this example, we first created a new layer behind the image and then drew the gradient on it so that it would appear behind the image
- If necessary, you can now adjust the stops to change the gradient composition. You can also adjust the midpoints to designate when the colors will begin to change from one to the other. To delete a stop, just drag it down from the gradient bar. For more information on adjusting gradients, see Expression Design Help.
Adjusting the stops
- For fun, I added some effects to the gradient. Now Captain Zapstar is ready for the world, or maybe even the universe.
That’s all there is to it. If you have the need to use this gradient again, you can save it by clicking More swatches, selecting the Gradients category, and then clicking Add Swatch to Library.
That’s it for now. See you next time.