« Visio 2007 Trick: 3-Point Gradient Fills with Transparency | Main | Visio and F# interop: a more complex example »
Wednesday
Feb062008

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:

image

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

image

  • Draw a rectangle over the picture.

image

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

image

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

image

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

image

  • Select Tools / Options

image

  • The Options dialog will launch

image

  • 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%.

image

  • 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...

image

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

image

  • 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.

image

  • Click OK
  • The Fill dialog closes

image

  • Close the shapesheet

image

  • Remove the edge for the rectangle

image

image

  • Look what we have created

image

Homework

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

image

Tomorrow

Stay tuned. It gets better.

PrintView Printer Friendly Version

EmailEmail Article to Friend

Reader Comments (1)

Thanks! Exactly what I was looking for.

October 22, 2013 | Unregistered CommenterRuben Bentein

PostPost a New Comment

Enter your information below to add a new comment.
Author Email (optional):
Author URL (optional):
Post:
 
Some HTML allowed: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>