• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

Visio Guy

Smart graphics for visual people




  • Home
  • Hire Me
    • Hire Me
    • Résumé
  • Products
    • Products
    • Bubble Revision Shape
    • Layers to Pages Utility
    • Rack Unit Dimension Line
    • Radial Elements Tool with up to 100 Wedges
    • Text on a Circle Visio SmartShape
  • Index
    • Articles by Date
    • YouTube – VisioGuy
    • Download Information
    • Suggestion Box
    • Shop
    • Visio Art
    • Visio Links
    • – Visio Shapes & Stencils
    • – Visio Templates & Drawings
  • About
    • About
    • Donate
    • GitHub
    • jsFiddle
    • Reading List
    • Subscribe & Follow
      • – E-mail
      • – facebook
      • – Twitter
      • – RSS
    • Privacy Policy
  • Discussion Forum
You are here: Home / Visio Content / Shapes / AV Equipment / Create Better-looking, More-efficient SmartShapes

Create Better-looking, More-efficient SmartShapes

August 9, 2008 By Visio Guy 10 Comments

speaker-thumb

Attractive, realistic-looking Visio equipment shapes don’t have to be heavy and inefficient.

In this article, we’ll look at some innovative A/V equipment shapes from D-Tools that offer the win-win scenario of good-looking and light weight.

We’ll tear these SmartShapes apart and show how you can use custom line patterns and creative shadow techniques to add pizzazz to your shapes, without adding bloat!

Beauty and Intelligence: Mutually Exclusive?

Ah yes, the ShapeSheet giveth, and the ShapeSheet taketh away.

Visio SmartShapes offer a wonderful vehicle for delivering powerful graphical objects with built-in intelligence without code. But the complexity of the ShapeSheet also adds bloat to even the simplest of shapes.

So in the quest to keep file size down, and performance up, Visio shape designers often shy away from adding too much detail to their SmartShapes. Yes, we can hear the Adobe Illustrator guys over in the Art Department snickering, and see them looking down their noses…

But if we dip deep enough into our cauldron of Visio Black Magic, we can often find choice morsels to help us fight back!

And in today’s case, we get some really cool effects without using the ShapeSheet at all, so just about anybody can take advantage of these techniques!

A Fine Speaker is a Work of Art

Take a look at this good-lookin’ speaker shape, which you’ll find on the Speakers stencil that comes with D-Tools System Integrator 5:

speaker

It’s a pretty attractive-looking speaker: it might even qualify for the Visio Art Page! And if you have a high-res printer, it looks even better. But since we’re stuck in 96-dpi-monitor-land right now, we’ll just zoom in to give you a better look:

woofer-tweeter-closeup

Well, those are some mighty attractive speaker shapes! Not bad for a “flowcharting app, business graphics” application, eh?

When I first saw these shapes, my “expert eye” told me that the woofer and tweeter were both composed of at least four circles, each with fancy gradient fills.

Although eight is not a huge number, that many separate shapes could start to get unwieldy if you have to protect and guard formatting or enter smart formulas to control sizing.

I also suspected that the cool shading effects might require my complicated, yet attractive Off-center Radial Fill Effect technique.

Well it turns out that I was wrong.

Keep It Simple With Two “End-user” Techniques

A graphic artist (aka: young whippersnapper) at D-Tools is clearly smarter than I (although I can probably still out-do him in calculus…) He was able to create the woofer and tweeter much more simply, using just two circles for each unit!

He did this using clever application of two formatting features:

  1. Magnified shadow
  2. Custom line pattern

Both of these techniques are readily available to end-users. Custom patterns are a bit more hidden than shadowing, but neither feature requires ShapeSheet development or programming to achieve.

If you’re not familiar with these techniques, I can offer some resources that will help get you up to speed:

I’ve talked before about using shadows to squeeze more formatting and color into a single shape in this article: How Many Fill Colors Can You Put on a Visio Shape?

And if custom patterns are new to you, you can find out more about them by perusing these articles:

  • Developing Visio Solutions: Chapter 10
  • Release the Power of Visio Custom Line Patterns
  • Smart LineWeight: Bigger Shape, Thicker Lines
  • Bubble Revision Shapes

So let’s move along and show how these two techniques were used to create those nifty-looking speakers!

Custom Line Patterns

It turns out that you can create custom patterns that contain gradient fills. At one time in Visio’s history, this was not allowed, but it seems it works just fine in Visio 2007 (and Visio 2003)

Our friend at D-Tools created the “Bevel2” pattern, by creating a simple rectangle, filled with pattern #31. Pattern 31 creates a fill that gradates from the top-left corner to the lower-right.

Here we see the custom line pattern highlighted in the Drawing Explorer tree, as well as the actual contents of that pattern:

custom-gradient-fill-line-pattern

Once the line pattern is created, you can apply it to any shape using the Format > Line dialog.

Custom patterns are listed at the bottom of the Pattern drop-down list. Here’s what Bevel2 looks like when it is applied to various curves. I’ve applied a generous line-weight to help you see what’s going on:

pattern-sample-bevel2

In our speaker shapes, Bevel2 is used as the second-outermost ring on the speakers, not the outermost ring. If you look closely at the speakers at the beginning of this article, you’ll see Bevel2 just inside the really big, outer bevels.

Using similar techniques, several other custom line patterns are used to illustrate the various components of D-Tools equipment shapes. Here’s a sampling of them:

pattern-sample-button-outline

pattern-sample-jack

pattern-sample-speaker

You can imagine these patterns being used in a variety of ways to create some really good-looking buttons, knobs, bezels, frames, switches and other gadgetry that make up A/V equipment!

Magnified Shadows

Starting with Visio 2003, the shadow characteristics of Visio shapes were really opened up and made more flexible. Shadows can now have different sizes, shapes, and projections.

In the right hands, these shadow options can be cleverly manipulated to create effects that look nothing at all like shadows. One such technique was used to create the outermost edge of our example speaker shapes.

Below, we see the Shadow Settings dialog for one of our speaker shapes:

magnified-shadow-dialog

It’s important to note the following settings for this shadow:

  • Style = Offset, custom
  • Offset = (0, 0)
  • Magnification = 120%
  • Pattern = 36

So this shadow has zero offset, which means it sits directly below the shape. But it has a 120% magnification, which means it is bigger than the shape itself. And this extra size projects equally in all directions because of the (0, 0) offset. Therefore, we end up with the outer-bevel effect that we see in the speakers!

The first time I saw this, I smacked myself repeatedly, uttering the words; “Why didn’t I think of this” over and over and over.

Gradient Fills

The center bits of each speaker use standard gradient fills. This is nothing earth-shaking, but I thought I’d mention it here, just for completeness:

offset-radial-fill-dialog

The centers of each speaker shape use some form of corner-radius gradient fill to get that bulbous, protruding effect. This can be achieved using fill patterns 36, 37, 38 or 39 .

Putting it All Together

To better understand the process of creating our speaker shape, let’s how the shape evolves as we apply each effect:

step-1

1. Draw a simple circle, with thick, black line

step-2

2. Apply our custom line-pattern “Bevel2” to the circle.

step-3

3. Apply fill pattern #39 to the circle to create a 3D effect for the speaker cone.

step-4

4. Apply the magnified shadow effect. 120% magnification with zero-offset. This forms the outer edge of the speaker.

step-5

5. Add the center circle. This is simply a smaller circle shape, with fill pattern #36 applied.

I hope you enjoyed reading about these techniques, and I hope you put them to use in creating your own SmartShapes. Let us know what wonders you come up with, we’d love to share!

  • Tweet
  • More
  • Pocket
  • Share on Tumblr
  • Print
  • Email

Related posts:

  1. Off-center Radial Fill Effect
  2. How Many Fill Colors Can You Put on a Visio Shape?
  3. Release the Power of Visio Custom Line Patterns
  4. Smart LineWeight: Bigger Shape, Thicker Lines
  5. Visio Tutorial: Advanced Fill Effects

Filed Under: AV Equipment, Development Tagged With: A/V, Artistic Effects, Custom Patterns, Fill Format, Illustration, Power User, Shadows

Previous Post: « Top 9 Reasons for Turning-on Developer Mode
Next Post: Crayon Network Shapes »

Reader Interactions

Comments

  1. Wapperdude says

    August 11, 2008 at 4:34 pm

    Very nice. Pretty too!

  2. AdamS says

    August 11, 2008 at 6:34 pm

    Hey VisGuy,

    Thanks for the props. It is always nice to have your work recognized by an expert. I think a lot of our users just take this kind of functionality for granted. Your readers may also want to know about the Line Weight formula in the speaker shape, LineWeight:=Height*0.02*User.AntiScale. This allows the bevel size to re-size intelligently with the height of the master shape so this one shape will look “right” no matter what the size. Lets see the Photoshop/Illustrator geeks top that!

  3. Visio Guy says

    August 11, 2008 at 7:56 pm

    Thanks for pointing that out, Adam! My articles tend to get too long, so I’ve been trying to cut out details. Your comment reminds me that this web site could use a few articles about sizing and scaled drawings.

    – Chris

  4. metal says

    June 24, 2010 at 11:51 am

    Speaker Stencil no longer exists.

  5. Darr247 says

    January 1, 2014 at 1:22 am

    The info metal mentions should be moved to the top of the article.

  6. Visio Guy says

    January 13, 2014 at 9:13 am

    “Speaker Stencil no longer exists”, you mean in the latest D-Tools release of SI?

    I think the technique in this article might also have issues in Visio 2013. I don’t have time to research it right now, but maybe someone can chime in if they know for sure.

  7. Chuck Hamdan says

    February 7, 2015 at 7:54 pm

    Hi,

    I need some help in understanding how to copy a let us say a milestone shape from the timeline stencil and have this shape when moved to the swim-lane to drop at a particular vertices related to the timeline and based on external data from an excel workbook.

    I am a bit confuse about how to set the values in the shapesheet to make the milestone take the value from a column of excel external link data and display the project activity and ensure the color to change to green when the activity is completed.

    A documentation could not be found on the net so far unless you may direct me to one.

    Regards,

    Chuck

  8. Visio Guy says

    February 9, 2015 at 10:42 am

    Hi Chuck,

    Not really sure how your question relates to this article, but anyway…

    There is no syntax to directly link from the ShapeSheet behind a Visio shape to an Excel workbook. While they look similar, they are separate systems.

    You can link Shape Data fields in shapes to external data sources using the old DataBase Wizard, or using the newer data linking capabilities that appeared in Visio 2007 Professional, and continue in Visio 2010 Pro/Premium and Visio 2013 Pro.

Leave a Reply Cancel reply

Primary Sidebar

Buy Über Rack Unit Dimension Line
Article — Purchase

Categories

Buy my book!

Meta

  • Log in
  • Entries feed
  • Comments feed
  • WordPress.org

Tag Cloud

A/V Artistic Effects BPM Code Connectors Control Handles Countries Custom Patterns Custom Properties Data Graphics Data Linking Data Visualization David Edson David Parker Fill Format Formulas Functions Geometry Gradient Images Links Maps Multi-shapes Network Programming repeating shapes Resources Right-Click Actions Scale Shape Data ShapeSheet ShapeSheet Formulas ShapeSheet Functions SharePoint shiny SmartShapes Sport Sports Text Themes Tools Transparency User-defined Cells Visio 2007 Visio SmartShapes

Top Posts & Pages

  • - Visio Shapes & Stencils
  • - Visio Templates & Drawings
  • Amazon AWS Visio Shapes
  • Sankey Diagram Shapes for Visio
  • Free Visio People Shapes
  • Bubble Revision Shapes
  • Visio Network Server Shape Icon Customization Tool
  • AV Engineering Diagrams with Symbol Logic ECAV
  • Release the Power of Visio Custom Line Patterns
  • Crayon Visio Network Shapes, Revisited

www.visguy.com - Visio Guy - since 2006