dandyman.us

Notepad Mayhem

// August 25th, 2008 // Web

When I selected the ‘Notepad Chaos‘ theme (by Evan Eckard) for dandyman.us, I knew that the background had to go. What I didn’t realize was just how daunting of a task that would be. You see the original theme used some really huge images, very little transparency, and most of those images were not easily customized.

The first problem I encountered was the way in which the background was constructed. Rather than using transparency on many of the images, Evan simply cut the graphics from the PSD file with the background still behind them. This can be a minor pain in the ass if your goal is to modify the theme to use a tiled background. In the end, I had to recreate a number of the images as PNGs (I hate GIFs) with transparency. While this can pose problems with IE6 and some other older browsers, I really don’t care. On this site, IE6 is dead.

Issue number two was that the design featured a monumentally large background image on the entire top half of the page. The search box, navigation post-its, title block, recent posts, about 1/3 of the notebook and the entire background from there up were all one image. Other than completely screwing up my vision of a tiled background it made the load time a little sluggish. The first order of business was carving up that giant image in to smaller, more manageable pieces. I created all new sub-images and modified the layout to free the various elements from each other. The end result, being that the layout and overall design is much more flexible.

One minor issue with the design I had was the way the textual images were created. As far as I could tell, the text was created via a Wacom or similar method and not particularly easy to change in the PSD. While the effect was great, I wanted to be able to change text within the PSD and make the design infinitely more flexible. I removed the layers with the custom developed text and replaced it with ‘Bradley Hand ITC’ on text layers. I made the color my own take on ball-point blue, added a little glow and then used a bend effect to give it a more ‘handwritten’ look.

Last but not least, came the biggest challenge of them all. Every time I tinkered with an image or div I threw another image or div off. My seemingly simple quest for a tiled background quickly devolved into tinkering with alignments, positioning, and cutting new images. I’ve learned a lot during this part of the project, but I’m still pretty unhappy about my slices to make the post-it, categories sheet, and notebook tile properly. I’ll probably go back and take another crack at it down the road, but need to move on to other things first.

One other thing I did to the theme was pull out the dynamic page include in the footer in place of hardcoded text/links. I just didn’t seem like it was worthwhile to have given the space constraints. I did add links for Evan Eckard and Smashing Magazine; without them I wouldn’t have learned as much as I have in the past couple of days.

Related posts:

1. Blank Sheet of Paper
2. Design Refresh Coming in November
3. New Additions to the Design
4. OakandSmoke.com Refresh
5. Revolution Theme Previews