Composing a Wedding Page in Expression Design

In August of 2008 I was lucky enough to marry the woman of my dreams with a small wedding ceremony in Las Vegas. I really enjoy web design and while I am not a professional web designer, I get to play one at my new job as a software tester on the Expression Web team at Microsoft in Redmond. Because I wanted to learn more about the products in Expression Studio I chose to use them to build a website to commemorate our wedding and to share this event with the world.

Wedding homepage

The first step was to compose a homepage. Expression Design turned out to be the perfect tool for this because of its ability to create beautiful scalable vector art and how very easy it is to export web-ready bitmaps from it.

I began by designing a logo for the site. My wife, Paula, loves lilies and made them a big part of the wedding and so I decided to use a pair of these flowers to represent our union. The color for our wedding was black and white so that drove the decision to use those colors for the art. She's also a pretty cool chick so she really likes the tribal border that creates a heart shape around the lilies. The tribal border is a preset brush labeled “Tattoo” that you can “paint” with in Expression Design.

Heart with lilies in Expression Design

Once I saved the individual logo, I created a new Expression Design file that would be the overall composition image for the page. I made the file 955 x 600 pixels because I am targeting a monitor with resolution 1024 x 768, and the page size option in the status bar of Expression Web recommends that size:

Expression Web page size context menu.

 ...so that's the size I based the Design file on. I copied the logo into the composition and created the other page elements quickly with Design. Looking at the layout I decided that I would take each element on the page and use CSS to lay them out on the web page.

Homepage Composition in Expression Design

Next, I copied the individual elements that made up the composition into another part of the document, modified the titles to give them a different look when users mouse over them.

Titles for mouseover in Expression Design

Once I had all of the individual parts in place, I was able to use the "slice" functionality of Design to create the bitmaps which will be used in the final page and give them each a name which will control the filename for the bitmap when they are exported.

Homepage elements with layers displayed.

One note about the titles: by using the layers on top of the titles first and then copying the titles along with the slices, it was very easy to simply change the text color and border values to produce the mouse-over effect images.

Title images copied in Expression Design

The exporting functionality really came in handy when I remembered that IE6 did not handle transparency in PNG files correctly. I was easily able to change the file type of the layers to GIF images and then re-export them in seconds.

Exporting slices from Expression Design

I'm still working on it but you can view the work in progress here: wedding website . I'll keep blogging about my progress as I continue to use Expression Studio programs to add to the site more and more. Next I will explore using Expression Web for behaviors and layout of the homepage.