2007年10月2日星期二
23:48

Inkscape,让我有替代CorelDRAW的念头

Inkscape,一款免费的矢量绘图软件。虽然模仿CorelDRAW或者Illustrator等矢量绘图软件,却有独特的亮点。

Inkscape 的网站:http://www.inkscape.org/
前几天把Inkscape下载下来,粗略了解了一下,对它的毛笔功能甚为喜欢,个人认为这个功能完全超越其他昂贵的绘图软件。

今天想为另一篇文章配图,于是便用Inkscape画了一幅作品。

Inkscap完全支持Wacom的压感笔,手感相当好。无论是绘画细线还是模拟毛笔,感觉非常流畅,比Painter中的感觉还要好。

这幅作品前后大约用了10分钟时间。

先是黑色线条,然后上色,整个过程和自然的手绘没什么区别。而文件却是完完全全的矢量格式,而且还是SVG标准。

在完成作品的那一瞬间,一个念头闪过:可以考虑卸载CorelDRAW了。

还是慢来,毕竟Inkscape还没有实现一些常用的矢量绘图功能;完全可以相信,Inkscape 将来肯定可以取代CorelDRAW的地位的。

标签:

2007年9月2日星期日
18:37

为网站添加图标

今天为网站添加上了图标(ico),地址栏上、和标签上不再是白色的页面图标,而是显示为自己网站的个性图标。制作过程使用了CorelDRAW,Photoshop,Iconworkshop几个软件。下面是详细的制作过程......
为网页设置ico图标本来不是html的标准,只是当年微软为IE5所增加的一个功能,为的是让IE收藏夹中的网页连接能显示各个网站的图标。因为越来越多的网站采用了微软的这种标准,所以其他浏览器也加入了支持ico的功能。
网页图标的规范
要为网站的页面增加图标,需要满足下面几个标准:
  1. 必须采用ico文件格式
  2. 图标的大小为16X16像素,256索引色。
  3. 如果命名为favicon.ico,上传到网站的根,IE会自动调用该图标;但这个标准其他浏览器不一定支持。
  4. 普遍支持的标准是,在网页的head部分,加入如下代码:
    <link rel="icon" href="http://网站URL/favicon.ico" type="image/x-icon">
    其中favicon.ico可以采用其他文件名。
工具和步骤
制作ico文件的工具很多,网上搜索一下,可以找到一堆。我自己比较喜欢用Iconworkshop
概括地说,制作过程可以简单分成两个步骤:用自己喜欢的绘图工具(例如Photoshop等等)制作成图片,然后用图标工具转换成ico文件。

细节,学习Pixel Art的知识
步骤说起来简单,但是图标的尺寸非常小,所以每个步骤都有很多细节需要讲究。
如果想制作好一个图标,建议先学习一下“像素画(pixel art)”的基本知识。像图标那么小的图片,要做出好的效果,最终还是要精确地对每一个像素进行细致的调整。
“像素画”的教程,可以看看这个地址的:http://www.blueidea.com/design/pixel/index.asp

我的制作过程
构思:
最开始我想用我的士气章做图标,但是要把那么复杂的图形放入16X16的像素格子内,难度实在是太高了,估计作出来,都看不出是什么东西。
16X16的图标只能走简单图案的路线。于是我想用“小麦”两个标准字做图标的元素。试了一下,还是太复杂了,两个字,相当于每个字只有8个像素的空间,而且两个字之间还不能有间隙。12像素是中文显示的最低极限,再低,文字会很难看。
最后决定用“麦”的标准字做图标。

原始素材

在CorelDRAW中把当年制作的“麦”字的标准字单独导出为PSD文件,带背景透明。导出的尺寸大很多,选择背景透明。

在Photoshop中打开该文件,加入一个渐变的蓝色背景。把图片的尺寸调整为16X16。把“麦”字修改小,让周边留出1像素的空间。

合并所有图层。

导出到IconWorkshop
打开IconWorkshop,新建一个16X16的图标。
回到Photoshop中,选择菜单,filter/axialis/Transfers To Axialis IconWorkshop ...... 。 因为我安装的是IconWorkshop,会自动为Photoshop增加一个滤镜。
选择“粘贴到当前图标中”。
从预览中可以看到,这样的图标效果还算理想,直接做ICO也不会有什么大问题。

但是有些笔画好像比较模糊,整体感觉还是不够锐利清晰。仔细观察放大的像素图,可以看到很多地方的色彩比较杂乱。

调整优化
下一步就是手工对像素进行调整了。很难说清楚到底遵循什么标准来进行调整,基本上都是根据自己个人的感觉。
  1. 用纯白色,对主要笔画重新描绘。
  2. 去除一些杂乱的像素点。
  3. 加上边框和圆角
还是看看前后对比吧:

最后保存为ICO文件,上传,修改网页的HTML。

标签:

2007年8月10日星期五
20:29

"极限编程"的精神价值--居然可以用到广告行业中

今天重温了一下"极限编程"。这次不是为了管理软件开发团队,而是为了让公司的广告设计团队更有效率。似乎有点不可思议,但我觉得可以......


广告设计和软件设计是不同的两个专业,肯定是不能照搬“极限编程”里面的一些规则的。

而我所看中的是“极限编程”里面的核心价值--“沟通、简单、反馈、勇气”。这些核心价值同样可以为广告团队的精神指引,竖立起共同的价值信仰,达致众人一心,建立起一套人性化的工作流程。

沟通:与客户、与同事、设计师与文案、与策划师之间要不断地沟通;沟通是为了更快地了解需求,了解各自的想法,达成一致。为了沟通方便,甚至可以把客户也纳入工作团队,当成团队的一分子

简单:流程简单、沟通要简单,减少繁文缛节;面对面的地沟通是最直接的方式,一对一的沟通也是最简单最容易达成共识的;让设计师直接和客户沟通也是最容易纠正误解的。

反馈:在工作前,要设定好一些标准规范,工作过程中随时检查是否有偏离这些标准和规范,及早发现问题,及时纠正。

勇气:正如极限编程里面说的:要"拥抱变化",广告设计也一样,要有勇气迎接变化;一旦发现偏离客户的需求或者偏离方向目标,就要勇于推翻自己原来的想法,重新开始;作为一个需要创新的行业,还要用于推翻自己的经验,迎接新的挑战;总之要有勇气改变自己。

“极限编程”的12条具体实践对于广告设计行业也有参考意义;广告行业中具体怎样实践,我还会继续思考。

标签: ,

2007年8月9日星期四
01:15

小麦工作室进入Beta境界,渐进式网站设计

重新对页面进行了设计。定为Beta版,一种软件开发的版本命名习惯。所谓bate就是正式推出之前的测试版本,接近正式的版本,但是承认还有很多不完善的地方,正待改进。“罗马不是一日建成的”,网页的设计也是这样,不要说“完美”,在完善之前,还是需要不断地调整的。


原来的页面是修改自某个博客模板,为的是尽快能把自己写的博客展示出来。

渐渐地,发现这个页面不是那么的好看,尤其是色彩方面,缺乏自己的个性。

翻查旧文件,觉得05年时候设计的主页还依然让自己感觉兴奋。

在卡其色的主色调下,蓝色和黄色的强烈对比营造出一种特别的兴奋感,让整个版面显出一种独有的味道。时隔2年,依然觉得符合自己的个性。

新页面的设计依然要满足一些理性的诉求。

  • 版面特别,表达自己的个性;
  • 版面以内容为先,能有足够、清晰的版面放置足够充实的内容;
  • 主内容区域以白色为底,让文字和图片都能清晰显示,符合日常的阅读习惯;
  • 符合阅读思维。
  • 能通过CSS随时调整页面的排版,而不需要重新发布所有页面。

版面划分为下面几个部分:

  • header:页眉,也可以看作是整个页面的标题栏;
  • content:主要内容区域,文章列表、文章的内容都在这个区域显示;
  • rightMenu:右菜单,个人资料、连接、标签、广告等等内容;
  • bottom:版权信息或者其他一些说明。

先在本子上画一个草图。我的经验是,先不要急着动手制作,花点时间作一下规划,把一些关键地方的尺寸、比例想清楚;这样在做的时候有参照,避免反复尝试浪费时间。


每个板块都在CSS中定义一个ID,将来只要修改CSS文件就可以改变每个板块的样式,包括尺寸大小、色彩背景。

我曾经想过用比较深的主色调,甚至黑色。但是如果背景用这样的色调,文字就要用白色或者其他明亮的颜色。如果是纯文字,不会有什么不好。但是如果包含图片,尤其很多图片的底色是白色,或者很浅的颜色,版面中就会出现一个白色的方框,打破了整个版面的氛围。如果不希望图片打破氛围,那么就要花点时间处理一下图片,让图片的颜色能和主色调调和。甚至一张很小的图片都要花不少的时间处理。

所以均衡了一下各方面的问题,最终还是选择了用白色作为内容区域的主色调。

首先在Firework中,做好版面的设计。然后根据需要输出图片。

在Dreamweaver中参照Firework中的设计做html。这次我把样式表是单独书写一个CSS文件。开始的时候,修改样式是比较麻烦的事情。因为是博客模板,所以页面的效果不能在Dreamweaver实现真实的预览,必须每修改一次CSS,就要把CSS文件上传到服务器,才能看到设计的效果。所以开始的时候要不断地FTP上传,然后刷新模板预览。这也是我之前不喜欢用CSS+XHTML的原因。

传统的页面设计,主要利用Table、图片的分割,这样可以马上看到设计效果。这种方式在设计开始会比较轻松,但是页面的维护和更新则缺乏灵活性。而采用CSS+XHTML则相反,开始时候麻烦,维护更新的时候更有效率。一旦把最初的CSS调整好,维护修改工作就非常简单了。

现在的色彩基本满意,版面还有很多有待改善的地方。例如右边的菜单栏还是显得乱了一点;中间的版面不够精致,有点粗糙;还缺乏一些主要的链接:回首页、个人相册、留言板等等。所以定为Beta版,继续完善。

标签:

2007年8月6日星期一
23:29

脸谱的色彩魅力--6幅旧作品

上一篇日志中的Duke,曾经喷绘出来,作为挂画,挂在公司的墙壁上。
同时喷绘的还有我的几幅脸谱作品,同样也曾经挂在公司的墙上,作为装饰。
为了处理成为色彩构成风格的装饰画,特意把脸谱的颜色处理成纯度非常高的色彩。


晁盖和公孙胜

关羽

后羿

孙悟空

张苞

赵天君

标签: ,

2007年7月23日星期一
20:55

探索最利于阅读的页面排版,一行多宽最合适?

排版的方式直接影响了阅读的效率。同样一篇文章,采用不适当的排版会让读者敬而远之;若采用利于阅读的排版,会让读者更有阅读的兴趣。我把一些关于思维和快速阅读的理论和经验,套用到页面的排版中,用自己的实践探讨能提高阅读效率的排版方式。


上图是新小麦工作室最初的排版。内容区域的宽度自动缩放。让版面在任何分辨率下面都能保持饱满。很多网页都喜欢采用这样的排版。

我想很多人看这种网页的时候都有这样的感受:每行拉得太长,眼睛要来回扫瞄,感觉有点累;而且每行的字数太多,视线折返到下一行的时候要稍微迟钝一下,寻找下一行的开头,往往因为这一点点停顿,上一行所说的内容便忘记了。

所以很多时候,文章的文字其实不多,但因为“行”太长,让读者产生畏惧心理,及早地跳开这个页面。

我对页面的排版作了调整。如图:


我对整个版面的宽度作了约束,让内容区域的宽度,保持在仅仅比两眼焦点距离稍微宽一点的范围。

这个宽度有什么标准尺寸,我觉得要根据字体大小来决定。通常字体越大,读者阅读的距离可能会远一些,那么内容的宽度就适当宽一些。

现在很多页面都采用12像素到14像素的字体,我觉得内容区域的宽度在380-450像素之间都可以。

每行的字数在20-30以内,这样会比较适合阅读。想想我们以前的作文纸也是20来字一行,所以这个字数也应该是比较利于快速阅读的字数。

再看看很多国外的新闻网站,也都是采取这样的“窄行”排版。

我自己以前在做《CorelDRAW 创艺》的时候也是采用窄行排版。但是为了让版面丰满,采用了分两栏的方法(包括后来在自己网站上发表的一些教程也是采用分栏的排版)。这样做,让读者可以“一目十行”,快速、流畅地接收信息。不过当时可没有什么理论基础,完全是出于一种感觉。现在是看了一些关于思维和快速阅读的书籍,才了解了其中的道理。

新的页面刚刚建立,版面还要不断地调整,让阅读起来更舒服。

标签: ,

小麦工作室 2007
Creative Commons License
本作品采用 知识共享署名 2.5 中国大陆许可协议进行许可。