Creating website buttons quickly using Microsoft Publisher VBA

File under: Automate Everything.

ABSTRACT: This is a simple explanation of how I use Microsoft Publisher to create web images – in this case buttons with a rollover effect. I’ve provided a downloadable publisher file with the necessary VBA code.

I’ll explain the CSS and HTML to make the rollovers happen at a later date.

The Cobbler and His Children’s Shoes

First, I should be automating a LOT more. My consulting company, Pulse Infomatics, automates documents, reports, and other stuff. I’ve been an automation fanatic for 25+ years (yeah, I’m that old). In fact, read my book, Building Your I.T. Career, and you’ll find that I suggest (strongly) that information technology has only two roles: Information & Automation. Automation is the one most often neglected in organizations and is easily the most valuable!

But as with the Cobbler’s children, I rarely stop to automate my stuff.

How to Identify Opportunities to Automate

Any time you find yourself performing a repetitive task – and particularly one that you might need for others at some point, ask yourself, “Is there anyway to automate this?”

Microsoft Office – though much maligned by some IT professionals – is used in most organizations and has a built-in programming language – VBA (Visual-basic for Applications).

VBA is used most often in Microsoft Access, Excel, and Word. But it is available across the entire Office Suite.

Rollover Buttons in Microsoft Publisher

I don’t use Photoshop. I have people that do for clients; but for basic web graphics, I can accomplish 99% of what I need in Microsoft Publisher. I know the “real” graphic designers are rolling their eyes right now… Too bad, they are probably missing an amazing and simple tool they could add to their arsenal.

In Publisher,  you can save any publisher page as a variety of graphics formats. Most often, jpg and png.

In order to create an image rollover effect, you need a base image and the hover image. As of this writing, my main sidebar menu has 5 options – 10 images needed.

I created them in Publisher. I knew I wanted them to be 300px wide and 80px high. Fortunately, Microsoft Publisher – which doesn’t really use pixels as a measurement – will convert pixels to inches.

To create a Publisher document with the size I need, I do the following:

  • Open a new Publisher document
  • Select the Page Design ribbon
  • Under “Page Setup” select “Size” and from the drop-down menu, “Page Setup”
  • Under “Width” type, “300px” and press tab (Publisher converts this to inches)
  • Under “Height” type, “80px” and press tab (again, Publisher converts to inches)
  • Under “Margin guides” I set everything to “0” (zero)
  • Press OK

That’s pretty much it. Now you can design your button image in the page you are presented. Of course, if your button sizes are different, adjust your width and height accordingly.

Name Your Publisher Pages

In order to make my automation routine work, naming your pages in Publisher is helpful. For the buttons I created, I used the following nomenclature.

“btn” prefix + button-name  & “btn” prefix + button-name + “-hover”

So for my coaching button, the non-hover, base button page name is:

The hover image page is named:

The Tasks to Automate

Once the buttons were created, here is what I had to do manually – for each page.

  • Select the page (make it active) – 1 click
  • Select “File->Save As” – 2 clicks (3 cumulative)
  • Select the location to save the file – 1 click (4 cumulative)
  • Select “Save as type” from the “Save As” window and select “.png” as the file type – 2 clicks (6 cumulative)
  • Change the resolution from 150dpi to 96dpi – 3 clicks (9 cumulative)
  • Type the button name in the “File name” box. – 1 click and type (10+ cumulative)
  • Click “Save” – 1 click (11 cumulative)

11 clicks, plus typing the name. Multiplied by 10 buttons (I have another 20 for sub-menus). 110 clicks and manually typing.

Oh wait… I made an adjustment to the buttons and was going to have to do that again. 110 MORE clicks!!!

Automation and 6 Lines of Code

Here we go. Rather than that, the following macro took care of all of it.

strpath = ActiveDocument.Path
intCt = ThisDocument.Pages.Count
For x = 1 To intCt
..strname = ThisDocument.Pages(x).Name
..ThisDocument.Pages(x).SaveAsPicture strpath & strname & “.png”, pbPictureResolutionWeb_96dpi

No really, that’s it!

Get the Code and Watch the Video

Download a sample Publisher file with the macro below. When you extract this zip file and open it, you will need to “Enable” macros as it opens.

This video shows the macro running and creating all 10 buttons in a matter of seconds. Viva la Automation!!

Posted in Blog, Tools and Tips and tagged , , .

Add your thoughts here! You know you want to...