For a while now, I’ve had this idea of designing a website to look like a wanted poster from the old west. I like the color scheme that it suggests: Almost black and white with lots of gritty, sandy hues. I like the idea of using something as precise and the digital medium to replicate something as time-worn as a dusty old poster. And I like the message it seems to send about the organization: Tough, unyielding, and carrying the authority of law. This kind of a design is heavily dependent on background images though, and here I’ll discuss the related problems and solutions I encountered on this project.
This tiled background image is a .png with a transparent drop-shadow.
The page displays contact information across the top, against a background of old, torn paper. But to achieve the three-dimensional effect I was looking for, I needed the image to feature a drop shadow. There were a couple of other methods for doing this, but I chose to tile a partially transparent .png along the x-axis of the contact information bar. This presents a problem for IE6, which would normally show an opaque blob instead of proper .png alpha-transparency. The fix for that is the following block of ridiculous CSS:
* HTML #top_right {
background: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../../images/background_images/top_right_bg.png", background-repeat="repeat-x", background-position="left bottom", sizingMethod="scale");
}
The * HTML in the selector means that this rule will only apply to IE6. The background:none rule prevents the existing background image, which would display incorrectly in IE6, from displaying at all. And the filter property is a proprietary Micrsoft property that, for whatever reason, can be used to force-feed IE6 an alpha-transparent .png.
The darker imperfections indicate that this is a tiled background image.
The main body of the page features a wide, short image tiled all the way down the y-axis, no matter how much or how little content is on the page. I blended the top and bottom edges a bit so the repetition would be harder to detect, but there are still some imperfections that give it away. Additionally, this repeating body image needs to blend with the header image and the footer image–which is a lot to ask. The good news: I know that the top of the body image will always align to the bottom of the header image, so I was able to blend that transition. The bad news: There is no way of knowing how much content will be on a given page, therefore there is no way of knowing how much of the final iteration of the body image will be revealed. Thus, there is not an easy way of blending it into the footer image. One option would have been to save the footer image as a .png with a gradient to transparent all the way across the top, but this would have been a huge file.
The wide but short image used for the footer.
The design closes with a modern, clean feel.
The last image is quite different from all the others in that it abruptly departs from the wanted poster theme. I actually had no choice here but to use a white background because I couldn’t get a layered version of any of the logos. But I think it serves another purpose as well. The clean, sharp appearance snaps the viewer out of the old west, back to the present, suggesting that while the UTU has withstood the test of time, it is also prepared for the future.
