Drawing RSS icons in Visio

In Part 1 of this post I looked at how to draw a 2D RSS icon shape for Visio using it as an example of how to use operations that manipulate a shape’s underlying geometry. In this post I’m going to move on to a 3D version and whilst I’m going to use some similar techniques the focus, this time, is going to be on breaking down a complex shape based on colour…

One shape, one colour

Shapes in Visio basically support a single fill colour. This can be a gradient and you can also achieve some form of multiple colour by clever use of line colour and background shadow colour, but as a general rule you need a separate shape for each colour element.

In order to build up efficient complex shapes it can be useful to try and identify the individual colours and build your shape based on those colours rather than the apparent geometry.

As an example I’ve taken the 2D icon I produced in the previous post and generated a 3D extrusion using Adobe Illustrator. I’m not going to go into this part of the process as it’s really only an example for tracing over and could be any bitmap or vector image that you want to reproduce (it’s really just an image to trace over). So here’s a walkthrough (you can download the demo file here):

3D icon walkthrough – Shape creation

Add a new background page. Rename it “BackgroundImage” and using Insert / Picture… add the image (in case the 3D icon) to the page.
Return to your target page (for example “Page-1”) and set the page’s background to “BackgroundImage” (File / Page / Background). Your image should now be visible on Page-1 and you can now start to trace over the image without it becoming selected.
Using the Arc tool (Ctrl+7) draw three arc lines followed by a straight line using the Line tool (Ctrl+6) over the inside arch of the outer ring of the 3D icon. This will give you a single closed path shape, hopefully resembling something like this:
As you can see, the new arc lines don’t match the arcs of the icon, so the next step is to modify the control point and eccentricity handles so that they do. Press Ctrl+4 to select the Pencil tool and click on the new line shape you created above.
This should display both the shape’s vertices and the control points at the mid point along each segment. By clicking on each of the control points you can modify the bow of the arcs so that they match the underlying arcs of the 3D icon as follows:
If you repeat steps 3 to 5 for each of the colour components in the outer arches you should end up with eight shapes (in blue below):
To add the circle press Ctrl+9, to select the Ellipse tool, and draw an ellipse over the 3D icon hole. Note that the way that Illustrator renders the shading inside the hole looks pretty close to a diagonal gradient and you can apply that via Format / Fill…
The next stage is to create the front face. Using the Rectangle tool (Ctrl+8), draw a square that’s roughly aligned with the top and bottom left corners and then use the Pencil tool to move the top and bottom right control points to the correct position.
Select Format / Line… to display the Line formating dialog and set Rounding (under Round Corners) to 5mm. The result should now look like this (the new front face shape is shown in transparent blue):
Next you need to cut the hole and arch shapes out of the front face. So, using the Pointer tool (Ctrl+1) draw a marquee around the front face shape to select both it and the hole and arch shapes and press Ctrl+D to create a duplicate set.
Move the duplicate set of shapes to a clear area of the page and press Shape / Operations / Fragment to create fragmented set of shapes, one of which is now the new front face with the correct cut outs (note that I’ve added a blue line format to the image below to make it easier to distinguish between the different shapes):
Now run through the fragmented shapes and select and delete all of the hole and arch shapes.
Select your original front face shape and delete it, replacing with the new cut out shape you produced in step 12.
The remaining top and side shapes are produced using much the same method as above – ie drawing a rectangle and then modifying the vertices’ control points. The one different shape is the top left corner shape that shows the gloss or reflected light. This is just another rectangle but with a gradient applied.

Once you’ve created these additional shapes (and deleted the two gap shapes) you should end up with the following (exploded for clarity):

Completing the shape

At this stage, if you look at View / Drawing Explorer you’ll see that you’ve produced ten shapes, which is fine but not as efficient as it could be. There are some clear areas where you can combine shapes based on colour. By selecting shapes of like colour and pressing Shape / Operations / Combine you can create single shapes with multiple geometries and reduce the total count to just six shapes:

Now you’re down to the least number of individual shapes, it’s time to group them into a single unit. You can do this by selecting the front face shape and clicking Format / Grouping / Convert to group – then select all of the shapes and click Format / Grouping / Add to group.

If you’ve followed the above steps then, with any luck, you will finally have a vector based 3D RSS icon shape that scales and responds as all well behaved Visio shapes should…

If you’re interested in more information on the Arc tool and drawing tools in general then there’s lots of good stuff out there. Here’s a few:

Drawing RSS icons in Visio – Part 2

One shape, one colour

3D icon walkthrough – Shape creation

Completing the shape

Visio Blogs

Visio Resources