Vertical transparency gradient on text

OmniGraffle
#1

I have a text box where I want the text to fade to transparent (solid at the top, transparent at the bottom). I’ve been trying to do this with a second box over top of the text with a black-to-white gradient, and playing around with the blending drop-down, but can’t find the right combination. Am I even on the right track? Or is this a thing I can’t do?

#2

I’m not sure you can blend to transparent; it might have to be a color.

Even with a filled shape over the text… but…

Try this:

  • Add text to the screen;
  • Add a square/rectangle over the top of the text;
  • Change the Stroke to None;
  • Change the Fill to Gradient
    – beginning color black (or text color);
    – ending color white;
    – gradient mid point 50%;
    – gradient angle 90%;
    – Blending mode: Screen, Lighten, or Plus Lighter (try each and see which looks better for you)
  • Move/Adjust Rectangle size to help fade.
#3

Hmm… okay. I had considered that approach, but I’m trying to put this fade-to-transparent text over something that isn’t a solid colour, so having the text be a gradient to a solid colour doesn’t cause it to fade out.

#4

At this point, the requirement description is not clear enough to say that that will produce what you want or not. Likewise, I am not sure that solution I provide is what you want.

Caveat: I am using OG V5.4.4, which does not have as many things to tweak as the current release, which means I will give you simple instructions, but there may be an even easier way to get the same result in the current release.

First a couple of basics.

  1. Always use a Grid, and SnapToGrid.
  2. For text, do not use a text box, use a rectangle instead. It provides much better text handling and precision, especially when participating in a Grouped object.
  3. Understand how to Handle a Semi-Transparent Shape (Fill less than 100% Opacity):
    Hide object underneath a transparent object.

OmniGraffle Mask Basics

Now for your requirement.

  1. Draw the rectangle with the desired text and characteristics. Works best if this is close to final. I use a blue Stroke to differentiate.

  2. Create the Mask

    • duplicate the rectangle (producing exact size, etc)
    • remove the text & stroke (border)
    • set the Fill to LinearBlend, 90º
      White, Opacity 0% at top
      White 100% at bottom
      I use a red Stroke to differentiate

    Text Fade 1
    Text Fade 12098×1420 175 KB

  3. Place the mask over the subject rectangle and Group them

    Text Fade 2
    Text Fade 22098×1429 107 KB

Enjoy

#5

For understanding …

  • Where you use the term transparent, perceive it as 0% Opacity.
  • Thus one can blend to 0% Opacity.

Cheers