
酝酿了好几个月,终于花了一周的时间把witmin的新Wordpress主题做好了,同时也简单优化了一下“关于”和“联系”页面的文字描述。这一次挑战了一下不固定宽度的全屏风格。在设计和代码编写的过程中都有所收获。
设计

设计依旧花了不少的功夫。我所希望的风格是带有一定场景的依旧能体现“榕千岁”这个自品牌的风格。所以在Illustrator里做了好几个版本的Logo,一直想把“榕千岁”的感觉给表达出来,体现网站的整体风格,同时希望它简洁、可爱。大家现在看到的那个树形logo设计好了之后,WITMIN的头图也让人头大,试了一些场景都不满意,于是最后从简,从AI里选了一些元素,放到PS里设计。最后确定了现在的这个样。
PSD to CSS

在Photoshop里确定了网站的基本框架、配色和结构。这一次,右上角的订阅关注按钮、readmore的按钮都是用画笔工具手绘的,字体用到了GoodDog,侧边的背景用上了纹理。这次尝鲜的是手绘+矢量+纹理。
PSD到CSS的过程还算顺利,先用XHTML和CSS写了一版静态页面,机子里装了Xampp和IEtester,除了在FF和Chrome里预览之外,还可以看到IE6、IE7里的显示效果。这次的一大重要收获就是终于会用jquery的pngfix了,折腾了好一番,可是,当它放到Wordpress里时,就不管用了,在WP里当做背景的PNG格式的logo在IE6还是不能正常显示,不过后来用了WP-pngfix的插件,并把logo改到<img>里就ok了。以前每一次写css,IE6的显示都会超不正常,不过这一次,总体还是很顺利的,终于战胜IE6啦。
接着是将它改为Wordpress主题,这一次就把以前写过的主题翻出来,把代码拿出来用了,避免重复劳动。Wordpress的可定制性太强了,不过分类目录的那一段变量代码我还是搞不清楚,最终放弃。
另外还有Favicon,在PS里设计了48*48像素的icon,然后用PNG2ICON转为16*16像素的.ico格式,但这样出来的icon图标会模糊变形,最后尝试在PS导出时直接保存为16*16像素,然后再用PNG2ICON转换,这下效果就正常了。
总之,每一次尝试都需要长时间的酝酿,动手的过程中多多少少都能有所收获。

