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 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.
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.
- Select the graphic "ProgressThumb" and set the ink to blendSrcAtop. You won't see a noticeable change yet.
Set the group ink
- Now select the group that the two graphics are in and change the ink to blendSrcOver.
Success!
Now the "ProgressThumb" graphic changes the color of the "ProgressBar" graphic and maintains the "ProgressBar" shape.
0 Comments
Add your comment