One of my favorite tasks when helping instructors develop their online courses in Blackboard is creating the course banner image. Though I’m no graphic design or creativity guru, I really enjoy the challenge of designing an image that may initiate interest or curiosity when students first enter the course site.
I typically create these banner images using Microsoft PowerPoint. PowerPoint’s versatility in this regard is more than sufficient and allows for easy editing later if I’m using a computer that doesn’t have a “full-time” image-editing application installed. Once I’ve completed my image, I just save it as a .png file and upload to the Blackboard course site.
The one issue I’ve had with creating and saving images in this way is that PowerPoint does not use pixels for its slide dimensions; rather, the dimensions are determined in print-based measurement units, such as inches. If I want to create a banner image of a specific width and height in pixels, I’m never quite sure how to convert those pixels to inches such that, when I save the image using PowerPoint, it will “re-convert” to exactly the pixel dimensions that I want. However, just this weekend I found a resolution to my dilemma upon discovering two tools that make that possible and simple. Here are the steps, with links to these two tools:
- The first step is determining the dimensions, in pixels, that I want for my image. That is just up to my own judgment: let’s assume that I want a banner image that is 800 pixels in width and 300 pixels in height. Along with these dimensions, I need to decide on the resolution at which to produce the image: that is, the “dots per inch” (DPI) or “pixels per inch” (PPI). This piece of the puzzle—the resolution—is a factor I did not earlier realize was so significant in converting my pixel dimensions to inches. Two hundred DPI (200 dpi) should be more than necessary for Web use, so I’ll go with that.
- Using the numbers just noted, I can determine the width and height in inches to use in PowerPoint with a wonderful tool I found on the FinerWorks website (http://finerworks.com/theo/blog/working-with-digital-images/convertpixelstoinches/). Just scroll to the bottom of this page, and click on the “Open Converter” button to find a Flash-based pixel-to-inch converter, as shown below. Using this tool, I’ll add “800” as my width, “300” as my height, and “200” as my ppi. Upon selecting “Calculate,” my resulting dimensions in inches are 4 in wide and 1.5 in high.
- Knowing the dimensions to use for the banner image in PowerPoint, I open PowerPoint (I am currently using PowerPoint 2010) and adjust my “canvas” to those dimensions:
- I then design my banner as desired. (Note: The design below is not at all what I would provide. It’s just a sample for this blog post. I’m not that dull!)
- Now, you may think that at this point you can save the image created and the pixel dimensions will be correct. This is not the case. To understand why, refer to the website from PPTools (see the link below), which provides an explanation much more effectively than I could ever do. As you’ll see, saving the image in the correct pixel dimensions requires inserting a macro into my PowerPoint file, and the PPTools folks provide the generic Visual Basic code necessary, which I copy to the clipboard: http://www.pptfaq.com/FAQ01028_Pixel-accurate_drawing_in_PowerPoint-_measuring_in_pixels.htm. (Thank you, PPTools!)
- Now I access the Developer tab in PowerPoint (if you do not see “Developer” in your ribbon, follow the instructions athttp://office.microsoft.com/en-us/powerpoint-help/show-the-developer-tab-or-run-in-developer-mode-HA010173052.aspx
to make it available), and then I select “Macro,” name my new macro, and then select “Create.”
- In the window that appears, I remove the lines of code that have automatically been inserted and paste the code from step 5. I also make two adjustments to this code (see the yellow-highlighted areas in the image below). The first adjustment is to state where to save my image file: I ask PowerPoint to save it in My Documents and to save it as “bannerimage.png.” (Your path will be different, and you may select any filename you want.)The second adjustment is to make the “lwidth” and “lheight” equivalent to the pixel width and height used in the calculation in step 2 above; in my case, I use 800 and 300 pixels, respectively.
- In the menu, I select “Run” and then “Run Sub/UserForm.” A “Macro” window appears, and I choose to run the ExportAnImage macro. (I can then close my windows for creating and running the macro.)
- Upon reviewing My Documents, my banner image, with desired dimensions in pixels, appears, and I am ready to upload it to my Blackboard course site!