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.
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.
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:
...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.
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.
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.
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.
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.
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.
Comments
Anonymous
September 29, 2008
I used Expression Design to layout and create the elements for my wedding homepage (see my blog ComposingAnonymous
January 25, 2010
you are a so good artist. Hope you will share happy life with your wife/husband. :)