With a few caveats and a bit of apprehension, I present to you my latest pet project: The CSS Zen Garden.
Since I just about missed it (I could have sworn it was May 8th, 2003, but my archives don’t lie) I don’t have anything much planned to mark the occasion. So lacking that, I’ll take you through some of my design process when I was building ‘Tranquille’, the default template.
Everything but the type in ‘Tranquille’ was hand-painted in Photoshop, similar to the process I used for design #013, ‘Coastal Breeze’. (The images for the latter were done years ago for another long-dead site of mine)
It began on a sketchpad, which I don’t have anymore unfortunately. The title text was important to me, since I was interested in a calligraphic, natural brush stroke look. A paintbrush, some india ink, and an hour spent in concentration determined that I just can’t do calligraphy. Lesson learned.
Instead I ended up using some random font I had on hand that seemed to work, ‘Calligraphic 421’ from Bitstream. I’d probably use a different choice if I were doing it again, but that’s just changing tastes for you.
I spent a bit of time researching the Kanji in the ‘scroll’ that hangs down from the top left corner. Rather than pull a ‘Westerner’ and use a bunch of random characters that would quickly prove my ignorance, I tried to find something with meaning, however tenuous.
The symbols I chose represent, roughly, ‘A beginning’, ‘Complete’ or ‘Whole’, and ‘Skill’. I suppose I wanted to say something like ‘We’re trying something new’ or similar, and maybe that even works in some contexts. But if it does it’s more luck than anything.
The pagoda in the top right was also researched, though not heavily. I flipped through Google image search for some inspiration, and ended up finding exactly what I was looking for, completely coincidentally, in a Mozilla Lizard illustration on DMOZ. Somehow that seems appropriate. I traced the shapes with the pen tool in Photoshop and then applied some texture and shading to tie it into the Tranquille style. Stealing? Please. Let’s call it ‘creative misappropriation’.
Remember the project in grade school that had you dump some india ink onto a sheet of white paper, then blow it with a drinking straw to create a black tree-like shape, and finally paste on crumpled pieces of tissue paper as ‘blossoms’?
The tree in the bottom right corner grew out of fond memories of that project. As you can see from the above example, it had to go through a few revisions to start looking right. The simple, solid tree above just didn’t cut it, obviously. So back to my Photoshop painting techniques to flesh it out.
As you can see, the process involves sketching a rough outline with simple colours, then building up layered detail over top. There are many different ways to achieve this, involving burns and dodges and colour/level/saturation adjustment layers.
My preference is to build every new highlight/shadow/shape/whatever on its own layer, so that I can adjust later without affecting anything else. This leads to plenty of layers of course, so the new nested layer folders in Photoshop CS are a welcome addition. (for an extreme example, Coastal Breeze ended up having well over 300 layers by the time it was done)
So there you go, Tranquille in a nutshell. Happy first year, baby.