Search HELP:  by:
Chapter - 1.3 Split Gradient


Split is a way to enhance gradient by "hard" splitting it at the center of the gradient points. Split effect is applied by checking the box next to gradient type selector. It does apply for all types of gradients except sector.

Split works as following:
Line Gradient

Two sets of gradients are drawn side by side - top/bottom for vertical gradient and left/right for horizontal gradient respectively. Color points 1-4 are used to draw the first set and 6-9 to draw the second. Color point 5 is not used and would be ignored. Split creates a distinctive border line between 2 sets of gradients.
The most popular use of Split method for line gradient would be creating a gloss top menu navigation bars with appropriate color combination applied to gradient points.
All Other types of gradients (except sector)
Works similar to line gradient splitting with one exception. Point 5 is not completely ignored and color points 4 and 6 should be specified for the full Split effect. Point 5 (if specified) renders a thin border visible on a substantially large image at the center of gradient color transition. If point 5 is not set with color, then splitting occur without the border.
Note1: Split border (when point 5 is specified), is an artificial border created with gradient. It might appear washed when certain image size is set. Play with the image size to get a contrast border if necessary.
Note2: It is not recommended to set color point 5 for radial gradient when splitting gradient for images less than 150 px. Even with Anti-Aliasing ON, it does create a distorted border inside the image.
Split with Stripes
"Hard Split" could also be created by the mean of stripes - without "Split" checked.
The advantage of split with stripes is that "split point" regulated. Which means the "split point" could be moved across the image. The image in this case would be constructed with 2 layers.

Bottom payer - original gradient image with 9 color points (effective points are 5 through 9 or all 9 points in case of the half-opaque stripe)
Top layer - a stripe (with optional shadow).
Here is an example:
Create 40px high vertical gradient. Now enable stripes, set Stripes Size and Stripes Spacing to 20. Check Horizontal Stripes orientation and reload the image.
You would get an image split at the center. Top part of the image is rendered with stripe and bottom part with original vertical gradient. The gradient for bottom part could now be controlled by points 5 9 and top part by stripe itself (2 point gradient for a stripe).
Further enhancement could be achieved by enabling a shadow, alternating shadow direction, shadow color, creating another split point at the bottom part by the mean of reversed shadow as well using stripe opacity. Combining all the mentioned settings with various types of gradient, shifting gradient center for bottom layer (original gradient image) could create amazing 3D effects for the resulted image.
To shift the "split point", use Stripes Size and Stripes Spacing:

Stripes size - controls upper part of the split.
Stripes Spacing - controls lower part of the split.
However, for a proper splitting you need to keep in mind that the sum of Stripes Size and Stripes Spacing should be equal to image height for vertical gradient and image width for horizontal gradient (usually automatically controlled by a stripe rendering algorithm).
For instance:
Gradient- vertical
Stripe: horizontal
Stripe Size: 15
Stripe Spacing: 35
Image height: 50
Result - Split point is shifted to the upper side of the image.
Gradient- horizontal
Stripe: vertical
Stripe Size: 35
Stripe Spacing: 15
Image height: 50
Result - Split point is shifted to the right side of the image.
As you may see the split is regulated and can be moved across the image.
2003-2007  Online Gradient Image Maker  GA Soft