Creating images to customize the Ribbon in Word 2007 and Word 2010

For time immemorial, Word had toolbars (also known as command bars) at the top of the screen, with buttons to invoke commands. In Word 2007 that all changed. Microsoft introduced the Ribbon to replace toolbars.

Developers of templates and tools can customize the Ribbon by adding new tabs, groups, buttons, menus etc to the Ribbon. Those new controls can have custom images.

This article identifies issues in creating images used to customize the Ribbon in Word 2007 and Word 2010.

For lots of images of the Ribbon, see Word 2007 and Word 2010: Ribbon tutorial.

Image size

There are two sizes of images used in customizing the Ribbon:

• large: 32 x 32 pixels
• normal: 16 x 16 pixels.

In Word 2010, we can allocate an image to a group, as well as to an individual control. Group images are always displayed at 16 x 16 pixels.

Generally, using a 16×16 image on a large control looks terrible. In some cases, a 32×32 image on a normal-sized control will look fine. But sometimes it will look ghastly.

So it's important to produce all images for custom controls in two versions: at 32 x 32 pixels and at 16 x 16 pixels.

Image format

It is possible to use .jpg, .jpeg, .gif, .wmf, .bmp, .ico or .png files to customize the ribbon.

Some formats work better than others. For example, if you use an .ico file, and you need to unenable a button to show that it is not relevant in some circumstance, then Word can't show the button as 'greyed out'.

The best format is png, with a transparent background if the image does not cover the entire square of 32×32 pixels or 16×16 pixels.

It's a bit trickier for the developer to use a .png file because you have to use GDI+ to load it. But it's worth it for the image quality and transparency that png provides.

For tehnical information on image format see RibbonX Image FAQ by Eric Faller at Jensen Harris's blog [Lene Fredborg, 13-Oct-2020: Removed outdated link to http://blogs.msdn.com/b/jensenh/archive/2006/11/27/ribbonx-image-faq.aspx].

Background transparency

It's fine if the image for a button covers the full square. If the image does not cover the full square, the background needs to be transparent. And that's one reason that a .png file is good for images for the Ribbon.

A black or white background looks terrible.

The alternative to a transparent background would be to match the background of our button image to the colour of the ribbon itself, so it 'blends in'. But that is not possible, for two reasons:

• the background colour of the ribbon in Word 2007 is different from the ribbon in Word 2010 (and if we're developing for 2007, we can reasonably expect the client to upgrade to 2010 one day, and we wouldn't want to have to re-create all the images)
• in both Word 2007 and Word 2010, the user can change the overall colour scheme, so a button made to 'match' one colour scheme will look poor if the user chooses a different colour scheme.

So transparent backgrounds are essential.

For more technical information about transparency for ribbon images see Preserving the alpha channel when converting images by Andrew Whitechapel [Lene Fredborg, 13-Oct-2020: Removed outdated link to http://blogs.msdn.com/b/andreww/archive/2007/10/10/preserving-the-alpha-channel-when-converting-images.aspx].

Look and feel

Custom images look best if they match the general look and feel of the built-in images.

There are two reasons for this:

1. I want the tools I create to look like they belong, not like a bad house extension. I'm building an add-in, not an add-on! The images on my custom tools should look like they come from the same school as the built-in images.
2. If I'm creating custom controls on the Ribbon, I will first look to see if there is a built-in image I can use. Microsoft has provided hundreds of them, and there is often something appropriate for my needs. If I can't find something built-in, then I'll create a custom image. So I might create a menu with half a dozen buttons, and those buttons may have a mix of built-in images and custom images. Therefore, to look like it all fits together, I find it works best if the custom images have the same look'n'feel as the built-in images.

Colours for ribbon images

It is very easy to create very ugly customizations for the Ribbon.

The first time I created a substantial custom tab on the Ribbon was for a project I was converting from Word 2003 to Word 2007. Where possible I used my existing command bar (ie toolbar) button images. In some cases I created new ones.

The effect was horrid. Brightly coloured buttons that worked OK in Word 2003 looked garish and out of place in Word 2007.

I think there are two reasons for this:

1. By default, the colour scheme for Word 2007 is blue. And not just one blue, but a significant gradient of blues. Bright colours on top of the blue just didn't work.
2. In Word 2003 and before, a toolbar was one-dimensional: buttons were all the same size, and sat in neat horizontal rows. While we could use combo boxes and text boxes on old-fashioned toolbars, it was rare.

   The Ribbon is more complex. It's in two dimensions; buttons are not all the same size; and there is a wide variety of controls: buttons, menus, boxes to type in, tick boxes etc. The Ribbon is complex enough. Adding a variety of colours just looked messy.

I had to re-think.

By observation, and by using an on-screen colour picker, I discovered that the built-in Ribbon controls use a very small palette of generally muted colours.

My aim is to make my custom controls look like they belong in Word. So I generally try to use images that fit the general look'n'feel of the built-in controls.