Gradient Maker Application

Many web pages have a color graded banner as a background. GradientMaker is a simple graphics utility that allows you to create such images. You can also add text to these images. These can also be used as banners, backgrounds or logos.

Introduction

The .NET drawing package includes some useful classes for drawing gradients in objects. Two of these classes are the LinearGradientBrush and the PathGradientBrush. The objects we need are in the Drawing2D namespace. It will be useful to import this namespace into your gradient drawing class.

Visual C#

using System.Drawing.Drawing2D;

Visual Basic .NET

Imports System.Drawing.Drawing2D

Drawing a linear gradient

A LinearGradientBrush describes a gradient between a start color and an end color along a line. The slope of the line is defined by the LinearGradientMode. In each of the following examples, we assume that we are drawing on a Panel object that has already been placed on a Windows Form. This is called panel_Gradient in the C# examples and Panel_Gradient in the Visual Basic examples. We create the Rectangle for the size and location of the drawn object. Then create a LinearGradientBrush using the rectangle and some colors. We also need to set the gradient mode. Finally, we draw the rectangle using the brush.

Here the size of the Graphics object and the colors are hard coded. In GradientMaker, we get these parameters from the controls on the window. Also, in GradientMaker we need to redraw every time the user changes a setting or the form needs a repainting.

Drawing a path gradient

A PathGradientBrush describes a gradient between a start color and an end color at a center point. The gradient goes to an end color along a path of points. In this example, we create an array of PointF objects from the four corners of a rectangle. A PathGradientBrush is created using the array of points as a path. We then set the center color and set the center point of the gradient to the center of the rectangle. Finally, we set the surround color and draw the rectangle with the brush and our rectangle.

Drawing a blend

A blend controls the shading of colors across a gradient. The shading is controlled by two arrays of floats called Factors and Positions. You can define the size of these arrays in the constructor of the Blend object. The Positions array defines the percentage along the gradient line for each factor. The percentages are scaled to the range 0.0f to 1.0f. So 0.5f is half way along the gradient. The first element of the array must be 0.0f and the last element 1.0f. The elements in the Factors array set the percentage of the end color in the gradient at each position across the blend. Each of the Factors elements is in the range 0.0f to 1.0f. So 0.0f represents 100% of the start color and 1.0f represents 100% of the end color. The methods used to create the gradient are the same as in the examples above. The additional code in this example is for creating a Blend object. Set Positions and Factors and then add it to the brush.

In this example the positions increase linearly across the gradient. But the factors form an approximate curve.

Drawing a text gradient

Text can also be drawn using a gradient brush. This example first finds the size of the rectangle to hold the text, given a font. A rectangle is then created using the size and the location for the text. We then create the gradient brush using the same methods that are used in the above examples. Finally, we use the DrawString method with the font, brush and rectangle that we have created.

Conclusion

The basic objects for creating a gradient are the LinearGradientBrush and the PathGradientBrush. These can be used in the draw methods of a Graphics object. The GradientMaker application uses these objects and allows you to set the parameters from the controls on a form. You can view the source code for GradientMaker which is available from automationControls.

History

Version 1.1: September 2005 - Added the following options to the application and help file:

Multi-line text

Text justification

Text rotation

Alpha option for text colors

These options were added following the comments of Kevin Ashaman.

Version 1.2: October 2005 - Added the following options to the application and help file:

Allow the scrolling of just the image (not the whole window) if the image overflows the window

Example image blends

Anti-Alias modes for text

Example text blends

These options were added following the comments of Axel Reitschin and F. W. Southern.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

You could add a combo box with "Linear", "Triangular" and "Bell Curve", plus two sliders, and make use of the SetSigmaBellShape() and SetBlendTriangularShape() methods, exposed by the brush, that everyone seem to miss

The text rendering hints (System.Drawing.Text.TextRenderingHint) could also be worth a check. Just adding

Your basic functions are nice -- however, your UI leaves something to be desired. For example, your "controls" might be better served as a dropdown and your image area the primary focus of the program (occupying the bulk of the screen real estate). Additionally, suggest that you scroll your "image" area rather than your form -- creating a large image causes you to have to scroll to view extremes of the image and your controls scroll out of view. Otherwise, nice work.

I rolled my own gradient tool in C# as well in order to make web page banners. Your version is much, much better and very complete in terms of features. I like your use of regions in the code. Thanks for sharing with the community.

I am pretty impressed with the flexibility in building the gradient blends.

The only think I can think of that I think is crucial is to support rotated text with the alignment controls meaning 'bottom', 'center', and 'top', of course.

When I first saw this article, I thought "hot dog, I'm gonna build a super quick replacement for the background on the SharePoint 'Quick Launch' bar. But... I gotta have rotated text with opacity. Sure, I can do that with Photoshop, but your app makes it so fast, I'd love to see that one more thing.