Create a text or logo image for three-dimensional effect in WPF

A long time ago, I wrote a blog post titled "using WPF to draw the Party emblem (three-dimensional effect, cool. Interested friends asked me by email how to make it? This article solves this problem.

Sometimes, for the sake of beauty, we may need to make some pretty cool 3D effects in the application, such as the following:

This is a three-dimensional text effect. You may find related tools on the Internet to automatically generate images. However, if you need to generate vector XAML graphics files, there are few such tools. For questions about 3D text, see the famous Charles Petzold's two articles on msdn, "3D mesh ry" (http://msdn2.microsoft.com/zh-cn/magazine/cc163449.aspx) and "3D text in WPF" (http://msdn2.microsoft.com/zh-cn/magazine/cc163349.aspx ).

In more cases, you may need to draw according to the enterprise standard text or logo provided by the user according to different requirements of the user.
For example, when I design a calendar, some users need to design a "Blessing" word. They want to put it in the calendar:

The word "Fu" was originally provided by the user in the TIFF image file format.

The XAML code (spring. XAML) generated at the end of "Spring" occupies about 22 KB of space, and the code is too long.
The "Fu" word finally generates more XAML code (chinesefu. XAML), up to 42 K.
From the code above, we can see that many things (such as gradient colors) can be shared and resources can be used to simplify the above Code, however, no professional software tools are available to automatically complete this process. I believe that with the promotion of WPF, Silverlight, and XAML, the above situation will change.

You can use various Vector Plotting Software to normalize image text, such as using commonly used illustrator, CorelDraw, freehand, etc. I prefer to use illustrator. Of course, this is just my preference. You can also use your favorite design tools.

If you finally want to generate a XAML file that works with your other WPF or Silverlight programs, you can use Microsoft Expression blend. To do this, you may need to test your patience. Currently, some plotting functions of expression blend are incomplete. Over time, I believe it will become more and more useful.

First, let's take a look at the initialization logo I want to do. This logo is drawn using illustrator:

It is a cute mouse that looks like a radish. I called it a "radish mouse", which I designed three years ago.

(1) make initial preparations.Open the aifile in Illustrator, hold down the Alt key, and drag the entire logo. Here I demonstrate the stereoscopic effect to the right, so, when I dragged the logo, I made a proper shift to the top left. Hold down the Alt key and drag it to copy the backup of another original image. In order to make the foreground and background images easier to operate, I changed the above image to orange and the original one to black, because red looks too much and hurts your eyes :) or your eyes are tired.
The following results are obtained:

Next, we need to take more key steps to plot the 3D effect.

(2) select all, and then click "divide" in the lower left corner of the Pathfinder panel. The goal is to separate all images from each other.Note: If the Pathfinder panel is not displayed, you can use the shortcut key shift + F9 to display it, or click the Pathfinder subitem in the menu window drop-down menu to check the status before it, to display the Pathfinder panel.
After this operation, press SHIFT + Ctrl + G to scatter the image.
The result is as follows: (for ease of operation, the source image has been zoomed in)

(3) Check the unfilled local area.Click pen tool (p) in the left-side toolbox, and select the appropriate paint color (such as red) and brush width in the stroke Panel (such as 0.25pt ). The next step is to draw out all the shadow parts and make them more perfect. Here I will only illustrate a small piece of connection. To facilitate operations, Zoom tool (z) is used to zoom in the local image to be processed, and then pen tool (P) is used to hook out the unfilled local area, and line segment tool is used to connect the image, note that the external line of the polygon and the curve of the source image are "exceeded" to make the shadow look smooth and natural. This will test your patience and depend on your artistic appreciation level. For example:

In some special cases, special processing may be required. For example, line segment tool (/) is used in the lower right part (/).
Then, select all, use "divide" on the path finder panel, and shift + Ctrl + G.

(4) Merge the orange part:Select any orange image, and then click Select-> same-> fill color from the menu to select all the orange-filled images. Then, press the "add to shape area" button in the shape modes on the Pathfinder panel, and then click expand. In this way, the orange image becomes a complete whole (here you can also directly click the merge button below in the Pathfinder panel ). However, the black part is separated into separate image blocks.

(5)The adjacent parts should be black.(The fill color temporarily displayed may be blank)At the same time, click the "add to shape area" button, and then click expand to merge them, As shown in Figure A and Figure B below:

(Figure)

(Figure B)

(6) After the overall completion, it should be similar to the following results:

(7) In order to have a more three-dimensional effect, you also need to perform point processing on the part with a significant "Turning Point ".For example:

(8) Now,Set the foreground color and shadow color of your logo.The following figure shows the effect after I set it:

(9) Finally, convert the image to the XAML code.
The resulting XAML code is: (too many, omitted)