The Zen of CSS(翻译)(3)

缺省的设计Tranquille

    Zen Garden的前五个设计已经证明了这个项目最初的成功，只有默认的设计方法能够在长时期内保持较高的可用性。该项目的默认设计中往往尽可能少地包含Tranquille,在#002设计中，Salmon Cream Cheese有考虑过更直接使用tranquille的效果，值得庆幸的是，这一设计由于Tranquille而增色不少。

         在默认的设计中，所有的图像与文字，除了文本的字体外，都是通过photoshop以手绘的方式作出的。在最初的设计中，Shea花费了整整一个小时的时间，用笔刷和墨水的效果一笔一画地来表现标题的字体，但是后来，他却发现Calligraphic 421字体是一个更好的选择。（如图）

 

         由于汉字的错综复杂、美妙无比，很多设计者都非常欣赏用汉字来表现出额外的细节。Shea 在设计中，试图避免仅仅利用汉字神秘性与复杂性来表现思想，而是花费了更多的时间，让布局在页面左上角的汉字的意义能够使设计更为丰满。虽然经过了诸多的苦心经营，这些汉字元素只是粗略地表达了几个意思：开始、结束、或者完整、熟练。

你在小学的时候，做过这样的活动吗？把墨水随意地泼洒在纸面上，然后用吸管去吹那些墨水，使它形成一棵树。然后粘上一些弄皱了的纸来代表花。设计页面右下脚的树的灵感，就来自于我们小时候玩过的这种活动。就如你在屏幕上所见一般，这棵树的设计经过了几个步骤的修改。这几个步骤就是从草图然后到添加简单的颜色再在草图之上添加各个层次的细节。

 

原文

Default DesignTranquille

Though the first five designs would prove important for the project's initial success, only the default design would retain a high visibility over the long term. The subtle and minimal Tranquille was always designed to be the default, though design #002, Salmon Cream Cheese, was considered for a while due to its more immediate impact; thankfully, the decision was made in favor of Tranquille.

All images and text within the default design, aside from the body type, were digitally hand-painted in Adobe Photoshop. The intended rendering of the title text was a series of hand-painted calligraphic brushstrokes, but after spending an hour with a brush and india ink, Shea decided that the Calligraphic 421 font from Bitstream was a much more desirable option (FIGURE 12).

 

Figure 12. Calligraphic 421 samples.

 

Because Chinese characters are intricate and beautiful, many designers appreciate the extra detail they can add to a piece. Trying to avoid the typical Westerner method of joining a bunch of random Chinese characters together for mystique and detail, Shea spent some time researching the characters to add some meaning to the scroll hanging down from the top-left corner of the design. Well intentioned as this approach was, the result still ended up largely nonsensical anyway: The symbols chosen roughly represent a beginning, complete or whole, and skill in English.

Remember the project in grade school where you dumped some india ink onto a sheet of white paper, then blew on it with a drinking straw to create a black treelike shape, and finally pasted on crumpled pieces of tissue paper as "blossoms"? The tree in the bottom-right corner of the design grew out of fond memories of that project. As you can see from the screen shot, it went through a few revisions (FIGURE 13). The process involved sketching a rough outline with simple colors and then building up layered detail over top of it.

 

Figure 13. Building the tree illustration.