rant whine 'splain espouse: The many faces of Velma

Monday, June 13, 2005

The many faces of Velma

My latest little web project is a fairly simple, one-page photo gallery which I created as a surprise for Velma's birthday, which is today (happy birthday, V!).

She's very hard to buy gifts for. She eschews material things, so I have to be creative when it comes to gifts. To top it off, she's about 1,000 miles that-a-way right now, which makes celebrating her birthday in person out of the question. At least until Friday night when I arrive in Missourri.

So I came up with this little gallery idea. Interestingly, it's almost becoming a tradition for me to do something for her website. Last year I turned her static website -- which I never had time to update for her -- into a Blogger-powered site, so she can update it herself whenever she wants.

Velma's been taking self-portraits for years, so it makes for a wonderfully interesting album of pictures over time. It really shows a lot of faces of that cute redhead Ilike to hang out with.

"She's very chameleon-like," said Jason when I showed it to him.

I want to start doing a better job of keeping notes on how much time it takes to make these sorts of side projects (I rarely bother to keep track when it's not a paid job and I'm therefore not billing someone), and I thought aspiring web designers might find my description of the process useful, so here's a brief synopsis of how I put it together.

Scanning: 2.5 hours
On Monday night, after work, I slid my portable Canon scanner, which I like a lot, into my backpack with my laptop and headed over to a nearby caf�, and sat down with a large mocha to scan 36 photos. I had borrowed the pictures several months ago from Velma, telling her I'd like to scan them at some point when I had time. Since she knows me so well, she probably thought it would happen about the time hell froze over. Placing 4 pictures on the scanner at a time, careful to keep them in order, I scanned them all at high resolution (600 dpi at 1:1), knowing that I might want to use them in larger versions at some future point. However, the versions for this project would be sampled down to 400 x 300 pixels.

Design & imaging: �6 hours
I spent Tuesday, Wednesday, and a part of Thursday night designing the template in Photoshop, then imaging all the scans. The design is based on Velma's blog template, which is a variation on a standard Blogger template that I had tweaked the colors and spacing on until I liked it better. The high res photos had to be separated (from 4 to 1), cropped, and then laboriously color-corrected (some of the prints had horrible color casts). Then there was retouching, sharpening, and placing all 36 images into the template I'd designed. Then I had to make smaller versions for the tiny thumbnails.

HTML & CSS: �4 hours
I built the page and the CSS in Dreamweaver on Thursday and Friday nights. I decided to do most of the HTML without nesting lots of tables, although I did use one table to contain everything. But CSS positioning is used to place all the images and the text. The paper background and the white photo border and black photo corners are actually one image, and the 300 x 400 pixel photo in the middle actually floats on top. When you click the thumbnails, a JavaScript loads a new image (pre-loading all 36 photos would have made a slow-loading page). All the photos are JPEGs (naturally) saved at 55% quality using Photoshop CS's standard Save for Web function. Each is about 35KB on average, although they vary from 24KB to 44KB or so.

Fixes for Internet Explorer XP Professional: 2.5 hours
Of course, even after Jason used his PC to preview the page for me and confirmed that it looked fine in IE, Firefox, and even Opera, I checked it at work on XP Professional and all the spacing was off. So I had to redo all the CSS, which then somehow inexplicably broke the JavaScript (which I hadn't actually touched, go figure). So I fixed it best I can... Of course, it works fine in everything else. Bloody Microsoft. Seems the JavaScript doesn't want to reliably load the new photos every time. It works sporadically, which is infuriating. I'd be willing to bet good money that it's related to Microshite's unreliable implementation of JavaScript and its use of the competing Jscript language.

Overall time spent: approx. 15 hours
» Check out the gallery...