上面那张图是就是这个小站wordpress主题:Blackboard的最初的起源,查看大图。和现在这个线上版本看起来还是有蛮大差别的,我想用How Shimuuu has been done这个系列网志来记录一下这个小站诞生的全过程。可以查看这篇网志,里面包含了目录。
最最最原始的想法
从图里可以看出,最开始我也没有用黑板这个灵感。关键词只是big typography和textured background,最重要的是one page style(把blog, portfolio, about, contact都放在一张页面上),这些都是受了现在网页设计的潮流的影响。在最初的字体选择上,当时对字体的认识还没有现在这样全面,可以从图里看到,sans-serif和sans两种结合得并不是很好(用的是Old style goody和Arial blod)。整个纹理背景,也是在一名国外设计师的博客的基础上修改的,其实也不是很契合我的风格。不过,这只是最初的试水。
黑板的灵感
在这稿出来之后我并不是很满意,太多别人的影子。我试着发挥自己更多的想象力来做,暂且不管最终结果如何,看看能走到哪一步。在几次头脑风暴之后,有了黑板这个灵感。我在网络上搜寻了很多图片,它们都提供了不少创意。





融入黑板元素的稿子
我尝试融入进更多的黑板元素,甚至拍了一块真的黑板的照片并用photoshop处理成了无缝纹理;还有一些插画,我想达成黑板画的风格。这些过程中的稿子我都觉得不错,不过最终还是被我放弃了。因为我发现在主体内容增多之后,我没办法处理好这些烘托气氛的元素,也没办法把他们和谐地融入进主体内容。考虑到网站的性能,我并不打算在主体内容上用太多的图片,所以黑板画风格的插画在我此后的设计中逐渐被精简。
与此同时,为了黑板显得不那么单调,我也加入了一些grunge的元素。有了先前的经验,这次我十分注意它们和主体内容的结合,以及重用。现在线上版本的grunge元素(首页左边导航处的黑板上水迹的模拟等)只用了两张图片,一方面是因为使用了css sprite,一方面也是把这些元素做成无缝衔接的可以运用到页面上任何内容上。
在最开始的创意阶段,我大概花了一两个月时间寻找契合的灵感,试过了很多图形元素、作品和网志排版样式。很多在后期的设计中都换了模样。这是第一次做wordpress主题的必经过程吧。好在这后面的过程中不断有好的想法冒出来,也给我的博客增添了更多的特色。敬请期待下一篇:How Blackboard has been done – the idea grow all the time





jasonouyang
06/24/2010, 11:13
很赞文中有些专业术语的提示,方便了很多百度的过程~
lee
12/05/2010, 17:49
求更新
shimu
12/06/2010, 10:39
最近太忙- – 没空思考哇
准备春节前后做小站改版
lee
12/07/2010, 09:12
@shimu – 我想请教下 你主页的的彩色粉笔效果是怎么做出来的
shimu
12/08/2010, 13:26
PS里面做的啊
做一个笔刷~
lee
12/08/2010, 16:28
@shimu –
自己做笔刷呀…
还是很抽象诶
P.S.
我其实是个前端 刚接触美工…
shimu
12/09/2010, 10:47
@lee –
大概的流程是,先把字母周围的形状用纯色填满,然后做一个不规则的点分布的笔刷,类似于粉笔那种。用这个笔刷在形状蒙版里在字母上画,将纯色的形状里“镂空”一点,做出粉笔的效果。
有空我再写个教程吧- -
lee
12/09/2010, 11:57
@shimu –
恩 其实原理我知道 就是做不出满意的效果来
非常感谢你的热心与耐心 期待那个系列教程的更新