Filling in a shape with another color

This article will show you how to fill in a graphic with another color using two separate graphics. This can be useful when creating controls such as progress bars. The technique will use blending settings so that you can fill in non-rectangular shaped controls.

The graphics

There are two graphics that are in the same group. One is the starting color ("ProgressBar") [1] and the other is the color that will be filled in ("ProgressThumb") [2].

The graphics

The default engine behavior

If graphic "ProgressThumb" is placed over the top of graphic "ProgressBar" notice that the rounded edges of "ProgressBar" disappear.

At first you might be tempted to make "ProgressThumb" a rounded rectangle as well. The problem is that the rounded corners will draw at different sizes depending on the width of the graphic. In addition, you don't want the right side of "ProgressThumb" to have rounded corners.

The default engine behavior

Using blend modes to get the desired result

What we really want is for the "ProgressThumb" graphic color to overlay the "ProgressBar" graphic while maintaining the shape of the "ProgressBar" graphic. For that we need to set the ink property from the Blending property pane.

  1. Select the graphic "ProgressThumb" and set the ink to blendSrcAtop. You won't see a noticeable change yet.
Using blend modes to get the desired result

Set the group ink

  1. Now select the group that the two graphics are in and change the ink to blendSrcOver.
Set the group ink

Success!

Now the "ProgressThumb" graphic changes the color of the "ProgressBar" graphic and maintains the "ProgressBar" shape.

Success!

0 Comments

Add your comment

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.