Text Effects

Many applications require text effects such as those offered by CorelDraw, Word and PhotoShop. While there are no methods specifically designed to produce these effects in one operation, GDI+ can be used to create them by aggregating several layers of text into one image.

A classic example of this is the alpha blended drop shadow as shown in another GDI+ FAQ article. Other examples include embossed or distorted text. This article will show you how to create some of he more popular ones.

Embossed and chiseled text.

This is one of the most effective text drawing methods and produces a nice 3D bas relief image. To produce this effect, the text is drawn several times in different places. For example, a lightly embossed effect will be seen by drawing the same string three times in a light colour at an offset of -1,-1, in a dark color at offset +1,+1 and in the normal text color at offset 0,0. Like so many 2D graphics tricks, the technique works by leading the eye to believe that something is a certain way. Windows programs always suggest that light is shining from the top-left of the screen. We can take advantage of this and maintain illusion for text output as shown in figure 1.

Figure 1.

The colours used to create the edges must be carefully chosen to contrast correctly with the background and the final text colour. The offset used should also be carefully adjusted. Small offsets for small fonts and proportionally larger offsets for larger font heights.

The code that produced the effect shown in Figure 1 is shown in Listing 1.

Listing 1.

private void Form1_Paint(object sender, System.Windows.Forms.PaintEventArgs e)

{

Font fn = new Font("Times New Roman",50);

string s="Embossed Text";

e.Graphics.DrawString(s,fn,Brushes.White,28,28,StringFormat.GenericTypographic);

e.Graphics.DrawString(s,fn,Brushes.DarkGray,32,32,StringFormat.GenericTypographic);

e.Graphics.DrawString(s,fn,Brushes.Black,30,30,StringFormat.GenericTypographic);

s="Chiseled Text";

e.Graphics.DrawString(s,fn,Brushes.DarkGray,28,108,StringFormat.GenericTypographic);

e.Graphics.DrawString(s,fn,Brushes.LightGray,32,112,StringFormat.GenericTypographic);

e.Graphics.DrawString(s,fn,Brushes.SeaShell,30,110,StringFormat.GenericTypographic);

fn.Dispose();

}

Outline text.

The outline from any shape can be stroked with a pen after being placed into a GraphicsPath object. The Graphics.DrawPath method is provided for this purpose. Figure 2 shows both hollow and filled outline text.

Figure 2.

Listing 2 shows how this effect was obtained.

Listing 2.

private void Form1_Paint(object sender, System.Windows.Forms.PaintEventArgs e)

{

//create a path

GraphicsPath pth = new GraphicsPath();

//Add a string

pth.AddString("Outline Text.",

new FontFamily("Times New Roman"),0,70,

new Point(30,30), StringFormat.GenericTypographic);

//Select the pen

Pen p=new Pen(Color.Blue,2.0f);

//draw te hollow outlined text

e.Graphics.DrawPath(p,pth);

//clear the path

pth.Reset();

//Add new text

pth.AddString("Filled outline Text.",

new FontFamily("Times New Roman"),0,70,

new Point(30,120),StringFormat.GenericTypographic);

//Fill it

e.Graphics.FillPath(Brushes.Red,pth);

//outline it

e.Graphics.DrawPath(p,pth);

//tidy up.

p.Dispose();

pth.Dispose();

}

Warped text

Effects such as perspective or a distortion similar to that seen on the "A long time ago in a galaxy far away..." titles of Star Wars can be achieved using the GraphicsPath.Warp method.

The Warp takes an array of three or four points that define a parallelogram or non regular quadrilateral. Where three points are used, a fourth is implied for you.

Figure 3 shows a GraphicsPath object containing text that has been warped to fit a window and provide a perspective view of the character glyphs.

Figure 3.

Listing 3 shows how this effect was accomplished.

Listing 3.

private void Form1_Paint(object sender, PaintEventArgs e)

{

//create a path

GraphicsPath pth = new GraphicsPath();

string s = "Bob Powell's GDI+ FAQ ";

FontFamily ff=new FontFamily("Verdana");

//Add the text strings

for(int y=0;y<5;y++)

{

pth.AddString(s,ff,0,70,new Point(0,90*y), StringFormat.GenericTypographic);

}

//Create the warp array

PointF[] points=new PointF[]{

new PointF(this.ClientSize.Width/2-this.ClientSize.Width/4,0),

new PointF(this.ClientSize.Width/2+this.ClientSize.Width/4,0),

new PointF(0,this.ClientSize.Height),

new PointF(this.ClientSize.Width,this.ClientSize.Height)

};

//Warp the path

pth.Warp(points,new RectangleF(0,0,820,450));

//Fill the background

e.Graphics.FillRectangle(Brushes.Black,this.ClientRectangle);

//Paint the warped path by filling it

e.Graphics.FillPath(Brushes.Yellow,pth);

pth.Dispose();

}

Obviously, graphics in a GraphicsPath object will also be distorted by this process so you can freely mix text and graphical outline shapes in the same warp.

Back to the GDI+ FAQ