Saveen Reddy's blog

Visio 2007 Trick: Transparent Gradients

In which a Visio shape will be harmed ...

 

The Microsoft Visio Conference 2008 concluded this afternoon. The Visio team presented some exciting things for the next version. One thing I observed is that people have yet to exploit the full power of Vision 2007 with regard to create compelling visuals.

I'm going to spend some time trying to change that.

Today's topic: Transparent Gradients

Before I explain how, here's an example of the desired output: a shape with a gradient fill where the transparency changes from the start of the gradient to the end of the gradient.

What we want will look like this:

The shape in the middle is opaque on the left and transparent on the right.

I drew this shape using Xara. By the time, I'm finished here, you'll know how to do it in Visio 2007.

 

No Cheating

People sometimes employ a technique where a series of tiny shapes each with an gradually increasing amount of transparency are used to create a transparent gradient. That technique may be appropriate in some cases. It's completely unnecessary here and doesn't yield great visual results. I will not be using this technique. Instead, I'll do it "the right way".

 

The Instructions

• Launch Visio 2007
• Create a new drawing via File / New / New Drawing
• Insert a picture using Insert / Picture / From File ... . The only reason a picture is being inserted is to make it obvious that the gradient changes transparency from the beginning to the end.
• Resize the picture to fit within the Page

• Draw a rectangle over the picture.

 

• Create a new drawing via File / New / New Drawing
• On the rectangle, right-click and select Format / Fill ...
• The Fill Dialog will launch

• Set the Pattern to 25
• Set Color to blue
• Set Pattern Color to red

 

• Click OK
• The Fill dialog closes
• The fill of the rectangle will now have changed

• Select Tools / Options

• The Options dialog will launch

• Navigate to the Advanced tab
• Check Run in developer mode
• Click OK
• The Options dialog will close
• Right click on the rectangle and select Show ShapeSheet
• The ShapeSheet will open
• Navigate to the Fill Format section
• NOTE: FillBkgndTrans maps to the transparency of the "Pattern Color" in the Fill dialog
• Set the FillBkgndTrans to 100%.

 

• At this point it should be clear that the gradient has a beginning and end transparency.
• NOTE: Do not close the ShapeSheet (nothing bad will happen if you do, it will just make the next step more obvious)
• Let's look at more closely...

• Withthe ShapeSheet still up, right-lick onthe shape and select Format / Fill...
• The Fill dialog will launch

• Set both Color and Pattern Color to the white
• Do NOT change the Transparency value. It will lose the gradient transparency if you do so.

• Click OK
• The Fill dialog closes

• Close the shapesheet

• Remove the edge for the rectangle

 

• Look what we have created

 

Homework

• In the Fill dialog, change the fill pattern to achieve these effects

 

Tomorrow

Stay tuned. It gets better.