Gradient Text

[SmoothTofu]

Is there any way to make your text gradient? (e.g. Start dark blue on the first word and slowly change to light blue) :?

[korteck]

Try this: After you draw your text, use the magic wand and ctrl-select each letter. While the text is selected, use your gradient feature. It will only fill the selected areas.

Alternatively, while the text is selected, you can manually place any color combination you choose and blur them together on one layer or several layers, one layer at a time.

Hope this helps.

[MadJik]

Tip: instead Ctrl+Click on each letter, I use Shift+Click only one time to select all letters at once.

[Crazy Man Dan]

It's also possible, albeit a might more complicated, to use Illnab's Alpha Mask Importer to get your gradient in antialiased text. That way, it'll look as smooth as regular text.

If you'd like to try this method, I could post a step-by-step tomorrow.

[korteck]

If you'd like to try this method, I could post a step-by-step tomorrow.

I wish you would do that Crazy Man Dan. I can't see how the two things are related.

I use the alpha mask quite often, so if there's another application for it's use, I'd love to know about it. Thanks.

[Crazy Man Dan]

Alright then! (Sorry, I made the images yesterday, I just neglected to post the steps...)

First, make your image whatever size you'll need for the text. Since you'll need a mask as large as the canvas size of your text, if you're using the text as an element in a larger composition I'd suggest only making the canvas as large as you need for the text element, then saving it as a .png with a transparent background layer and importing it into the final composition.

Now, create a new layer and type your text in black, a-like so:

Position it where you want it, and flatten the image. Then, since black parts of Alpha Masks represent transparency and white areas indicate opacity, invert the colors of the mask ([Crtl]+[shift]+) so that the gradient appears in the text instead of everywhere but the text.

Save it with a name something like textmask.png (Since .png is lossless, I'd suggest using it. A .jpg with a 100% quality setting would probably work too, but since it's on your own machine, who cares!)

After you save it, you can continue working with the same canvas, since it's already the size of your text anyway, and you can then reference the mask so you can position your gradient properly. Create a new layer and draw your gradient in it. 3.0Beta users can use the built-in Gradient tool, 2.7x users (or those that want to draw HSV fades :wink:) can use the BoltBait/Illnab Gradient plugin.

If you need to make sure you have the Gradient in the right spot, you can drop the opacity of the layer so you can see your mask image underneath (working on the same canvas has its advantages). Once you're happy with the gradient's position, make sure you have the gradient layer selected and use Illnab's Alpha Mask Importer. When the dialog pops up, click Browse and navigate to wherever you saved your file. Click Open in the File Browser, and you will see the text appear within your gradient like magic!

(I created a new layer here and filled it with white to cover the mask still behind the gradient. You may want to do the same so you can see the final look.)

Now, all that's left to do is click OK and finalize the effect! Play around, find out things, have fun. Here's the result after toying with the Outline and Median Blur effects in 3.0:

And that's the end. Or rather, this is: :o

[Illnab1024]

Hey CMD, if you wanna do this method, just make your mask and apply this CodeLab script to the mask layer:

void Render(Surface dst, Surface src, Rectangle rect)
{
   for(int y = rect.Top; y < rect.Bottom; y++)
   {
       for (int x = rect.Left; x < rect.Right; x++)
       {
           ColorBgra col = src[x, y];
           col.A = (byte)(col.R * 0.3 + col.G * 0.59 + col.B * 0.11);
           dst[x, y] = col;
       }
   }
}