Heads up

I finally decided to spruce up my Windows Live space by giving it a touch of personal branding. I’ve always maintained a simple layout, but I’ll admit it was pretty boring. It was important to me to keep my main page looking neat, uniform, and consistent with the rest of my Windows Live pages, but still I wanted to add a little tasteful pizzazz. I’ve already received some positive feedback about the changes, so I thought I’d share my tricks with my readers.

The Blog Title

Previously, my Windows Live space had just been known as “Greg’s Space,” but that’s not very creative, now is it? So I thought about a name that would sum up what I’m trying to accomplish with my space. In many ways, it’s just my way of saying, “Hello, world.” So that’s what I decided to call it.

Renaming my space was simple. I just clicked Options > General, entered my space’s new name in the Space title field, and added a tagline as well (if you use the stock Title and Tagline module, then you can edit the module and make your changes there instead). While I would opt to hide the Title and Tagline module in favor of something more customized, renaming my space ensured my new title was reflected consistently in the links atop all pages.

The Headers

Instead of using the stock Title and Tagline module, I decided to design a header graphic for my main page. Windows Live Spaces provides an array of custom themes, some of which include background graphics, but let’s face it, most of them suck and don’t really provide the layout options to suit more advanced users. So I turned to my old friend, PowerPoint, to assemble a custom header image. If you don’t have PowerPoint, then you can accomplish all of these techniques using the awesome (and free) Paint.net.

I started with a blank slide, into which I pulled an abstract texture background from photos.com that worked well with the overall color scheme of my space. To make the design blend into the white background of the page, I placed an oval mask around the texture and then softened the edges using PowerPoint’s built-in picture effects. For a little visual pop, I pulled in the stock icon for Windows Live Writer. The PNG image’s alpha channel made it easy to realistically layer the icon on top of the texture. I wanted to make sure my title would stand out from the busy texture, so I placed a radial gradient mask over the left side of the composition before creating my title text. A handwriting font was selected to soften the look of the title text, and I sampled my heading colors to create continuity with the rest of my space. To tie in the Windows Live branding, I snagged a Windows Live orb stock icon and incorporated it into my tag line. Finally, I used SnagIt (although Windows free Snipping Tool works nicely, too) to capture and crop my composition into a PNG file. It also helped me to smoothly resize the graphic to 966px, so that it would fit perfectly into a module on my main page.

Of course, a custom image must be hosted somewhere on the web so visitors can see it. I uploaded the image to a publicly accessible folder on SkyDrive. By clicking on the uploaded image, I was able to view the URL, which I copied for the next step.

To hold the header graphic, I added a Custom HTML module to my space’s main page, which I moved to the top of the page and configured to use the maximum available width. I also hid the border and the header to help the image blend into the rest of the page. Then, I created an <IMG> element in my Custom HTML module, which pointed to the header image on SkyDrive.

Using the same process, I also replaced my module headers with graphics that match the typeface and color of the large header graphic at the top of my space’s main page to bring it all together.

The end result can be seen on the new home page of Hello, world. All that’s missing now is a happy little tree.

– Greg