乐闻設計

微软雅黑字体设计分析

Wed, 24 Feb 2010 07:40:14 +0000

一．雅黑设计理念

雅黑字体是为微软公司设计的屏幕显示汉字。它具有个性独特、结体优美、识别性强、块状效果好、显示清晰等优点。在当今数字化时代更是用途广泛。这副字可以说是科技进步的产物，是人类社会的需要，在设计上也有所突破。

首先打破传统结体方式，采用大字面设计，字怀放开，增大内白，使文字方正，布白匀称。由于字体中宫放开，使文字的适用性也随之增强，不但适合小级数文字的使用，更适合屏幕显示。

在笔型塑造上去除“喇叭头”。为防止文字笔划缺乏美感、没有精神，在撇、捺、点、勾的处理上使其粗细有略微的变化，使之富有弹性。

在制作上，力求精良，笔划间尽可能少搭笔，使文字清新、爽朗、易读。

追求字体的整体形式美，强调文字设计的审美性和文化性，朴实大方，典雅端庄。

下面从字体设计理论方面与实际字体应用的角度来阐述一下雅黑是用什么方法和字体设计技巧来完成和完善设计目标的。

二．按用途来设计字体

1．字体设计类型

字体设计可细分为平面美术字体设计和印刷“活字”设计。在这所要谈的字体设计是指在印刷“活字”范畴内的字体设计，主要研究字在缩小后的清晰度、可读性以及整体效果。在字型的处理上它不能象美术字和书法字那样，可以无视大小地尽情抒发情感，而要受到一定规矩的约束，讲究共性和个性的关系，来达到一种机械的美观。这种设计也是一门比较冷僻的视觉艺术。近年来，随着科学技术的不断发展，印刷“活字”设计又可分为出版印刷用字设计和屏幕显示用字设计这两个大类。

雅黑是属于屏幕显示用字，设计时更要注重研究字在低分辨率下的清晰度和可读性，尽可能做到小字号显示时的清晰易读，要达到这一目标，关键在于设定字面大小、笔型塑造和严谨合理的结构处理……。

2．字面大小的含义

我们有必要先来搞清楚两个不同的概念：“字面大小和字身字面比”。字体设计专用方格都有两个方框，外框称字身框，内框称字面框。

图1

字面大小：“就是在字面框不变的情况下，可以把字设计成大小不同的字，大字称字面大，小字称字面小。”

图2

字身框和字面框之间的距离就是半个自然字距。能正确地运用好他们之间的关系，是字体设计的基础。

字身字面比：“简单说就是在字身框不变的情况下，两者之间的百分比值，比值大字就大，比值小字就小，说白了就是把字放大和缩小。”

图3

现在有许多用户，为了能挤排，图省事，不惜把字缩小，造成字与字距之间的关系失衡。这样使用，即使有再好的字体也排不出完美的版面来，这是非常不科学的用法，与其这样，还不如缩小字号来用显得完美。

3. 字面的可测量大小和视觉大小

字面大小又可分为可测量的字面大小和视觉上的字面大小。已故字体设计大师谢培元老师在1962年归纳总结的“第二中心线”理论已表明，汉字由形声组合的字都是可以测量的，形旁和声旁这两个部件的中心距离越大，字面就越大，反之，字面就越小，我们只要测量这两个部件的中心距离就可以得到相应的字面大小值。同时，这也是控制整副字大小的有效工具。

图4

雅黑在保持文字个性的基础上，尽可能的扩大形声这两个部件的中心距离来增大字面。同时，运用这种方法使得80%以上的字，大小保持一致。对于那些不能测量的字和一些易见小的字，雅黑又是如何处理呢？

从几何形角度来看，汉字形状众多，最典型的可分为四种类型：“方形、圆形、三角形和菱形”，从面积上看方形最大，菱形最小，要想把图形面积变得一样大小，就必须按菱形大小走，这样设计出的汉字才能在视觉上保持一致。

图5

要想做大字面的字，我们首先要考虑面积最小的菱形，那么，怎样才能把菱形字做大？很简单，只要适当调整改变菱形的形状，那么，我们就能得到比原来菱形面积大的形变图形，用这种方法来设计，就可以得到在视觉上比原先字面大的字。

图6

雅黑在设计初期就是用视觉大小这种方法来定字面大小的。

4. 字面大小和屏幕显示的关系

字面大小和屏幕显示又有什么关系呢？为了说明问题，用少点阵图来比较说明。

图7

从上面两图比较中我们可以看出，左图字面大，占像素多，内白均匀舒适、清晰易读。右图字面小，占像素少，因此，内白不匀称、识读效果变差。

雅黑设计时考虑到这一因素，不但采用大字面设计，同时，在字距较合理的范围内调大了字身字面，多争取到了每一点宝贵的像素，为小字号使用的清晰易读奠定了基础。

5. 去掉影响屏幕显示效果的“喇叭”口

现用黑体字的笔锋过大，成喇叭状，我们戏称为“喇叭头”或“喇叭口”。传统手写的黑体本应没有这么大的“喇叭头”，只稍微有点笔锋。那么，这 “喇叭头”又是从何而来？有两个原因，第一，可能是个别写字人员认为喇叭口稍大些精神，故意写大些，第二，在把照相字模版的字翻制成电脑字库时，做字人员在不明白黑体字应有笔型的情况下，把原本制作照相字模版时，为防止在拍照缩小的过程中笔划变得虚弱、变圆走型而装上的“小辫”给融进了笔划，形成现在这样的“喇叭口”。

图8

过大的喇叭头，不但失去了黑体字应有的品格，在屏显时，“喇叭头”能在笔划两头多出一块，如果两笔离得较近，头就有可能连上，使笔划交代不清，可读性变差。

图9

雅黑属无装饰风格的字体，少了不必要的累赘，自然避免了这类问题的出现，使文字清晰易读。

三．雅黑设计中的要点

1．雅黑是根据我在90年代初期设计的黑体系列样张改进设计的。

图10

从上述样张中可以看出，字体符合屏显字体的基本要求，字面大，无“喇叭头”，属无装饰风格的字体，可以作为雅黑的设计基础来改进提高。

2．雅黑设计上主要改进了字的粗细，“钩”的僵硬和“八”字点的写法，使其符合规范要求。同时，更注重线条的刻画，使其柔和挺拔富有弹性。

图11 部分笔划笔型图

3．为了使正文字的阅读效果更好，对所有的口和带框的部件加“脚”，也就是口下面出头，其目的是为了给眼睛以适量的刺激，来提高阅读速度，这是正文用雅黑设计的一次新尝试。

图12 口和带框的部件加“脚”

4. 为适合屏幕显示用，在字结构的处理上“计白当黑”，严格控制“白”在各部位所占的比例，使其舒朗匀称。

图13 黑白处理示意图

这种处理方式不但使字稳重大方，而且使字撇捺舒展、飘逸潇洒、富有姿态。

5. 采用独创的手法对笔划进行特殊处理，减少交错连笔处的黑度，使字的整体灰度更好，更清晰，更适合屏显。

图14 特殊笔划处理示意图

6．避免笔划交代不清，粘连过多

图15

这些字笔划交代不清，粘连过多，既降低了识、读的速度，又有错字嫌疑。雅黑在设计时就尽量避免这种问题的发生。

图16

四．笔划粗细与结构、留白、重心之间的关系

这是活字设计中的一个综合问题，并非一朝一夕就能掌握的，它不但对字的个性要有深刻的理解，而且还要具有非常敏锐的观察力。做字的过程其实就是练眼的过程，眼睛练“凶”了，字自然越做越好。

下面通过调整统一字体的粗细，来了解笔划粗细与结构、留白、重心之间的关系。为了更好的说明问题，便于理解，选用多笔划和少笔划的粗体字为例。

图17

1 调整字的粗细，使之成为一个整体

这两个字一粗一细，视觉上看是两款字，粗细调整不当。首先，把细的“體”字加粗，使两个字的视觉粗细一致。

图18

2 字的内白影响字的重心

“體”字在加粗后，虽然在粗细上合适了，但是，看着还不舒服，仔细分析一下原因，问题在于内白，各部件的重心位置欠妥，骨字重心偏高，曲、豆重心偏低，使得互相间的呼应性、协调力变差。那么，我们只要调整“體”字的内白，改变重心位置就行。

图19

3 调整字的局部粗细来改善字的结构，提高字的品位

现在我们来调整“粗”字，先分析一下粗字的那些地方需要改进，米字过大过黑，形象欠佳并压迫且字，从而使结合部太紧，整字见窄。改进的方法是：缩小米字，放大且字，减细米字上方的八字点，改善横眉竖眼的“凶”相并使点见长，加长撇梢，使其舒展，分清下点使其交代清楚。通过这些调整，粗字变得面貌一新，提高了品位。

图20

“粗體”两字通过调整粗细、内白，改变重心与结构，使“粗體”两字变得更完美。

图21

从上面的几次调整中可以看出，笔划粗细与结构、留白、重心之间是相互相成的关系，是一个不可分割的整体，只要协调好它们之间的关系，就能提升字的品格，并有良好的排版效果。

雅黑在设计制作过程中就是运用这种设计技巧使字既有品位，又整齐划一，灰度良好。

五．文字的形象、表情与气质

笔型是构成文字笔画、风格的基本元素，笔画制作的完成度会影响到成字后字的品质，而字的结构就好比人体的比例、五官的位置，它直接能体现文字的形象、表情与气质。因此，对于字体设计制作来说，每一环节都是至关重要的。我们设计黑体字，要表达出黑体字本身具有的庄重、典雅的特性，就必须先把笔划做好，把字写端正。

图22

从上面这些字我们可以看到，这些字就没有写端正，笔划生硬，制作粗糙，部件之间的位置安排欠妥。大头小头缩头，重心有高有低，结构松散，整体形象不好，给人以不整齐、不稳重的印象，缺乏正气感。下面雅黑的感觉就比较整齐舒适。

图23

我们再来具体的对比分析一些字的常见病例。

1. 笔划僵硬，制作粗糙，严重影响字的品质。

图24

2. 撇捺不舒展，使字失去应有的姿态。

图25

3. 缩头

图26

点划的头已伸不出去，还要斜，既不美观，又破坏形象。在头见短，伸不出去的情况下，还是做的稍平些比较妥当，头也长了，字也显得正气。

图27

4. 短腿

图28

节、帝两字下半部的外框做的太长，使主笔中竖见短，就象人的两只手长到脚背上，比例失调。

图29

5. 钩短

图30

钩短，有钩不出的感觉，使字显得拘谨、局促、小气，缺乏气度。

图31

我们常说的一句话：“字的姿态要像仙鹤的舞姿，引项高歌”，也就是说要想把字做得正气漂亮，必须“有头有脚有腰身，撇捺舒展有姿态”。

一个字的含义，并不一定只有字典上的意义，而有感情上的另一种心理感觉，他不但有表情，而且能直观地体现出字本身的气质来。

例一

图32

这些字东倒西歪，毫无庄严的正气感。

图33

主要问题出在字的结构和重心上，给人的感觉是：自卑，没自信，唯命是从，低头哈腰，没有高雅庄严的气度，它的潜台词是：“叔叔阿姨行行好”。

图34

例二

图35

八字点犹如人的双眼，富有表情，不同的角度、形状都能使人产生不同的联想。上面这些字的问题在于八字点上，有的内八字点变成外八字点，有的过大过小，像人倒挂着双眼，呆滞的眼神，带有悲苦哀伤的表情，没有朝气……。

图36

例三

图37

走之底脚短且软弱，向左倾斜，就像建房时地基没打好，不堪重负，摇摇欲坠。同时，也像一个人没有肩负重任，独自擎天的气概。

图38

从上面所举的这些例子中我们可以看出，字要设计得既庄重高雅，又有豪华富贵的气质，是最难能可贵的。雅黑在设计时就注重字的内涵，对文字的表情与气质进行了研究。>

六．雅黑最初的设计样张

图39 雅黑细体

图40 雅黑粗体

文字既是一个文明传承的载体，又代表了中国人的审美观。因此，我们在设计时严格地把好每一关，尽最大的努力做好每一个字，追求字体的整体形式美，力求表现出对比、和谐、均衡、韵律等艺术特征。强调文字设计的审美性和文化性，真正做到给读者以关爱。

附：雅黑是屏显专用字体，用于印刷还有缺陷，我们经过精心修整，并逐步扩充其系列字体的款数，现已有多款字体上市，方便用户使用。衷心希望用户能把意见反馈给我们，让我们把字做得更好。

兰亭黑系列字体设计样张

Tags - font , 微软 , 微软雅黑

用户界面(UI)设计的真实感

Thu, 28 Jan 2010 03:19:21 +0000

用户界面的视觉设计的历史，可以描述成是一个逐渐向真实感变化的过程。就如同计算机已经变得越来越快一样，设计师增加了越来越多的现实的细节--比如色彩、立体效果、阴影、半透明甚至于简单的物理学原理。这些改变中有一部分已经帮助提高了界面的可用性。WINDOWS界面中窗口背后的阴影让我们知道哪个是当前窗口。iPhone手机用户界面的物理学体验令设备用起来更自然。

在其它领域，改善还值得商榷。图形用户界面（GUI）是最典型的例子。你在你的屏幕上看到的很多图形元素都是为了表达一定的想法或概念。桌面上的小房子不是一所小房子，而是“我的电脑”；眼睛并不是真的眼睛，而是表示“看这个选中的元素”；齿轮也不是齿轮，它的意思是“点击我从而能看到可用的命令”。

细节和真实感能让用户分心，而不是关注于它们所要表达的概念。我从一本每个设计师都应被要求阅读的斯科特麦克劳德著的《漫画--看不见的艺术》 ( Scott McCloud’s «Understanding Comics») 选取了一页，来详细解释这个道理。

“(除最左之画像外)其它的都是漫画里普遍存在的形象。例如，更卡通化的面孔就是指有更多的人可以被其描述。”

最左边的图像，是一个特定人物的脸。最右边的图像，是“脸”的概念，它可以是任何人。当设计用户界面时，我们很少会去展现一个特定的实物，通常我们都想传达一个想法或概念。细节能很容易分散对要表达的意思或概念的关注。

(左图)点我来拍照片！ (右图)呃。。。？？

与此同时，一些细节显然也还是必需的。细节太少，用户就完全不能理解所要表达的意思。

左边的圆形很显然是一个人的脸。而右边的圆形不再能够识别出是一张脸。

让我们看一个我们在用户界面实际看到的标志“我的电脑”按钮。通常，这个按钮用一个小房子作为它的标志。

最左边的是一所房子。最右边的是“我的电脑”的意思。在二者之间的，是从“一所特定的房子”到“概念化的房子”的变化。越真实的东西，就越难弄明白它所表达的意思。同样，如果图像过于简单，它就不再能被准确而迅速地辨识出来。

最左边的是“我的电脑”按钮。最右边的可能也是一个向上的箭头；或者是SHIFT上档键。让我用一个完全不科学的图来说明这个概念：

横轴代表"细节"，纵轴代表"识别度"，粉色区域代表"困惑"

细节太多或太少，都会使人困惑并难以理解其含义。人们会识别出处在图中间地带的UI元素。

诀窍在于找出哪些细节是能帮助用户识别出UI元素，而哪些细节分散了对它想要表达意思的关注。一些细节帮助用户识别出他们在看什么以及他们可以怎样与这些它做交互；而另一些细节却分散了对你想去表达的意思的注意。他们把你的界面元素从一个概念转变成一个真实的东西。所以，如果一个界面元素与真实生活中的实物过于不同，那就会很难识别。另一方面，如果它过于真实，人们就不能识别出你想表达的意思以及可能的意思。

最左边的按键过于真实了。最右边的按键没有足够的细节使其能被马上识别出是一个按键。

同样地应用在这些条状按钮上。阴影和倾斜度让用户明白他在看什么以及如何去和它做交互。增加太多的细节，无论如何最终都会成为困惑。条状开关不再只是个条状开关，而应是用户界面的一个组成部分，用真实的条状开关的图片可以很清楚的被辨识出来，但却失去了它的意义。它不再是一个图标，而成了一个特定的东西。

（左图）让我们回到主菜单。（右图）呃。。。。

一个例外

至少有一个特殊的区域里多一点细节是好的：应用程序图标。你希望你的图标表达出一个独特的想法：您的应用程序。

科达的叶子（Coda’s leaf ）不是为了表达一个叶子的概念，它是一片非常具体的叶子：科达的叶子。 Acorn’的橡子（ Acorn’s acorn）不是随便哪只橡子，它就是Acorn的。添加细节将这些图案从普通的概念变成了一个特定的实物，对于一个应用程序图标来说，这正是你想要的。

结论

图形用户界面到处都是图标。图标需要简至其本质。这可以帮助避免用户界面因无意义的干扰信息而凌乱，使人能更容易地去“阅读”图标并弄明白界面元素的含义。真实的细节能阻碍你想传达给用户的意思。

目标就是不要把你的用户界面做得尽可能的真实。目标就是添加那些可以帮助用户能识别出元素是什么及怎样交互使用的那些细节，除此之外都不要添加。UI元素是表达概念及想法的抽象体；它应当只保留那些对其意途有用的细节。UI元素几乎是从来不描述真实的东西。添加太多的真实感会导致用户的困惑。
Tags - ui , icon , design

Office2010形象与界面

Wed, 20 Jan 2010 06:16:04 +0000

微软Office系列换装，Office2010上线。新的Offoce形象相较之前的版本，更为简洁与锐利。摒弃了微软常用的红蓝绿黄四形象色，转而采用黄->橙的单一色彩，从原来的4种颜色的标志的Word，Excel，PowerPoint和Outlook的标记，转而全面拥抱办公室 Orange品牌迈进无疑是这次Office换标的最大变化，当然没变的是LOGO的组合形态字体样式。

基于Windows系统的Office形象，从最初到现在最新的Microsoft Office的标志，经多次的演化，虽然不断的推陈出新，但并没有意想中的美好，但好在不至于让人觉得糟糕。现阶段橙黄色的渐变效果还是显得相当不错的，但仅仅是从Office07版的一个简化，并没有像从其早期版本升级到07版的那种跳跃式的前进，仍缺乏新的创意。相比之下，Mac版的Office2007形象被认为是win版形象中不可超越的一环。

往下的是Office2010的应用图标，貌似仅仅是为了迎合Win7的整体形态而做的仓促设置，无论从其中字符的样式与图形的设计都多少不尽人意。同时也能在其见窥视到Adobe与Mac图标设置的影子，只不过是无过之且遥不及罢了。

从上面的图标上看，很难想象，如果不是熟记颜色的分配的话，用户如何区分3个”P”之间的区别，这样就需要考验人的色感了。而下图则相当明显的看出Adobe对其的影响。

当然，也不是所有改版后的设计都不可取，如下图界面，经调整后确实比07版要简洁明了，同时不同皮肤颜色的运用也增强了用户的互动与选择。

Tags - 微软 , 2010 , microsoft , office

弃简从繁——不一样的欧洲杯EURO2012

Thu, 14 Jan 2010 03:23:41 +0000

国内设计风格开始追随着北欧的简约风跑时，来自Brandia Central 的设计却给我们带来了更多的不一样的效果，2012年的欧洲杯形象。

之前网路上已经有相关的LOGO的报道，当看到这个LOGO的时候你会想到什么？一般人都会觉得很赞，但包括我在内的很多所谓的设计从业者都会认为漂亮但过于复杂，然后进一步思考其如何应用，现在答案出来了，在做应用的时候，设计者不但延续了LOGO的风格，并且加以发展，彻头彻尾的将复杂进行到底。

这些图形真的适用于足球运动么？或许这些对于要拿冠军的球队来说只是一种附着的装饰，但这些通过黑白的正负形结合诞生出的美妙而华丽的图案以及准3D的矢量风格不能不说是给人们带来耳目一新的感觉。

Tags - euro2012 , logo

Firefox 4.0最新用户界面设计

Wed, 23 Dec 2009 09:22:56 +0000

12月23日消息，据国外媒体报道，Firefox4浏览器界面日前在互联网上曝光，一个最新设计的界面外观今天被公布出来，它更为节省空间，看上去更简约，一个Firefox按钮替代了原有的菜单栏。

　　新版浏览器的用户界面借鉴了谷歌Chrome浏览器和微软Office2010的界面。它的优点很明确，整洁干净的外观，并提供统一的菜单项位置，让它和Windows 7与Office 2007/10的风格整齐划一。

与当前的Firefox3相比，Firefox4在界面上有较大改善，如支持Aero透明效果，将浏览标签至于顶部，与谷歌Chrome类似。

　　按钮的应用在几个不同版本已经探讨，考虑各种因素，包括什么颜色、是否有一个图标、只是一个图标、图标和文字、部分标签栏，一个单独的按钮。Firefox图标为橙色，尤为引人注目。

Firefox 3.5和Firefox 4界面的差别

1、增加应用按钮

　　在如何处理MenuBar上，Firefox4考虑增加应用按钮，类似于Windows7和Office2010的文件按钮。它占用更少的空间，减少混乱的导航工具栏。

火狐

　　2、完善的工具栏按钮外观
　　更多的工具栏按钮变成浅色背景和更加清晰的三维可见效果。

　　3、位置栏和独立的搜索栏
　　地址栏妥善凹进，取代了浮动效果。同时随着LocationBar载有越来越多的功能，它可以最好的保留两个领域之间的明显区别。

　　4、书签小工具
　　在默认配置文件或现有的配置文件尚未修改书签工具栏被默认的情况下，隐藏的书签小工具放置在导航工具栏上。

使用书签栏

标签在导航栏下面

标签在导航栏和书签栏下面

　　Firefox 4预计于2010年底发布，因此，Mozilla还有足够的时间来继续完善Firefox 4。据调研公司Stat Counter数据显示，Firefox 3.5已经超越IE 7，成为全球使用最广泛的浏览器。

Tags - user , interfaces , firefox

09年最好和最坏的logo设计 / The Best and Worst Identities of 2009

Tue, 22 Dec 2009 08:53:59 +0000

2009 has been a great year for Brand New, with a bottomless source of new and redesigned identities from around the world, and we’ve all had good fun critiquing them in sickness and in health.

---------------------------------------------------------------------------------

Yale University Press

Designed by: Matthew Carter (Yale Typeface)
Release Date: September, 2009
Voting Highlight: 12% (152 of 1,194) Hate Paul Rand’s logo

To be perfectly fair, there is nothing formally wrong with the new logo, as it’s simply the word Yale typeset in the masterful work of Matthew Carter. But it is definitely sad to see one of Paul Rand’s most recognizable logos go away.

LendingTree

Designed by: Mullen
Release Date: July 2009
Voting Highlight: 87% (605 of 694) Voted it a Futuristic and Trendy logo

The old logo wasn’t much to get excited about but if fit the service and the audience, while the new one is awfully misguided to Terminators. Nice TV ads though.

Hilton Worldwide

Designed by: Landor
Release Date: September, 2009
Voting Highlight: 62% (795 of 1,274) Thought the Icon was Better without Bevels

This could have been a solid corporate redesign, but then they had to go mess it up by adding unnecessary bevels, and all the elements are a little too disparately placed, sized and aligned.

Art Directors Club

Designed by: Trollbäck + Company
Release Date: November, 2009
Voting Highlight: 73% (895 of 1,226) Voted it A Step Backward

Everyone pretty much agreed: Been there, done that. For an organization catering to the creative industry this was neither creative nor, um, industrious. And the follow-up showing the logo in action didn’t help much.

Burnley

Designed by: N/A
Release Date: October, 2009
Voting Highlight: 70% (835 of 1,178) said Wow… with Sarcasm

I was actually surprised at some of the positive comments for this one, which I still think is a sorry excuse of a logo. My cat has turned out hairballs with better execution and strategy than that. Also noteworthy: some clients competed for the privilege of using this logo.

Wisconsin Department of Tourism

Designed by: Red Brown Klé
Release Date: March, 2009

Poor choices in color and typography and even poorer decisions in configuration and scale make this one of the strangest logos of the year. Live like you mean it, but design like you mean it too.

Kraft Foods
Designed by: N/A
Release Date: February, 2009

While the well-known “race track” Kraft logo will remain on consumer product packaging, the parent company decided that it was too cool for them and instead opted for a crappy carnival of typefaces and random shapes.

Kraft Foods, Redux
Designed by: N/A
Release Date: July, 2009

Only five months later Kraft Foods unveiled a revised logo that was supposed to be an improvement. You know the expression “Putting lipstick on a pig”? This is like switching the lipstick from the pig’s mouth to the pig’s you-know-what.

City of Philadelphia
Designed by: The Star Group
Release Date: December, 2009
Voting Highlight: 60% (942 of 1,547) deemed it cliché

One thing you don’t want to do is upset Philadelphians — and judging by the amount of traffic we got to this story, there were many — by branding them with a web font (Trebuchet) and a terribly rendered Liberty Bell

Xe
Designed by: N/A
Release Date: May, 2009

Step 1 in the Bad Corporation Protection Program: Rename the corporation. Step 2: Redesign the logo. Step 3: Hope that people forget about your old brand in a couple of years. Oh, and regarding the logo, I have no idea what is going on.

MSN
Designed by: N/A
Release Date: November, 2009
Voting Highlight: 15% (165 of 1,073) thought the butterfly was great

The butterfly icon might get a passing grade, if I were extra generous, but the typography is simply ridiculous. I stand by my original quote, that I will also use as a segue to the very worst of 2009, “[The typography] suffers from Bing syndrome: It wants to be cool and modern but it suffers from complete lack of typographic decency. (This post is also worth revisiting if you want to read a pissing match between Futurebrand designers claiming credit for the original butterfly in the comments).

Bing
Designed by: Razorfish
Release Date: June, 2009

When I first posted the new logo for Microsoft’s search engine I blasted it for using scaled typography then “Bob,” who designed the logo at Razorfish, informed us that “All the letter forms were made from scratch.” I think I preferred to think this nastiness was done unknowingly than fully premeditated. Congratulations, Bing!

-------------------------------------------------------------------------------------

My Little Pony
Designed by: N/A
Release Date: Summer, 2009
Voting Highlight: 4% (43 of 921) thought this was bad

I am sure many of you will think I am crazy for including My Little Pony here and, in all honesty, there were more technically impressive and stylistically appealing logos in 2009. Yet context plays a large role in identity design and within the market and audience that My Little Pony resides in, this was a superb update that could have turned out real ugly, real fast.

Meredith Corporation
Designed by: Lippincott
Release Date: August, 2009
Voting Highlight: 2% (12 of 1,105) Voted on the new icon being Boring

A lively, colorful and bold update for a women-focused media enterprise, devoid of female clichés like the color pink or script typography. Thank you Lippincott!

Commerzbank
Designed by: Meta Design
Release Date: November, 2009
Voting Highlight: 71% (602 of 840) Agreed this took the best from both worlds

The fact that the angle of the “K” matches the angle of the icon is reason enough to land this logo in the Best category, but everything about it is so carefully thought out and executed that there was no way I was leaving this out, even if it had its detractors.

El Banco Deuno
Designed by: Saffron
Release Date: January, 2009

I was one of the lone champions of this identity and I may have doubted myself at the time, but going back through the archives, this Mexican’s bank identity stood out from most of the entries.

Guitar Hero
Designed by: Pentagram
Release Date: September, 2009
Voting Highlight: 55% (519 of 930) Voted this as Rockin’

While some mourned the loss of the unrefined (hence more genuine) look of the original logo, the new identity is more fitting of the billion-dollar enterprise it represents. And, a spike more or a spike less, it still rocks.

Syfy
Designed by: Proud Creative
Release Date: March, 2009

The name change got everyone in a tizzy but by now and even more so moving forward, it’s not even an issue. And it sadly obscured what turned out to be a solid redesign.

MyFonts
Designed by: UnderWare
Release Date: January, 2009

Their previous logo didn’t set the bar too high, but the new custom lettering did, not just for them, but for the whole retail type industry. Some people hated that the “My” made a hand… Well, you can talk to it because the face ain’t listenin’.

Pfizer
Designed by: Siegel+Gale
Release Date: November, 2009
Voting Highlight: 62% (910 of 1,457) Considered the Logo Evolution an Improvement

The changes to the logo were small but they helped soften up the biggest of Big Pharma. The surrounding identity however was what made Pfizer really stand out from the rest this year.

New York Public Library
Designed by: NYPL In-house Staff
Release Date: November, 2009
Voting Highlight: 70% (728 of 1,040) Thought the New Lion was Roaringly Great

A great visual exploration of possible lion heads led to a great new icon for New York’s beloved institution. Works great at large and small sizes, something the old lion couldn’t brag about.

Nickelodeon
Designed by: Eric Zim (wordmark)
Release Date: September, 2009
Voting Highlight: 53% (853 of 1,609) Preferred the New vs. the Old logo

A complete overhaul of not just the Nickelodeon channel we all grew up with but of the whole enterprise that has grown into multiple channels airing in 175 countries, as well as a motion picture production company, and hundreds of Nick-branded toys and games. It’s not the nostalgic splat anymore but it’s not your attention they are after, so better deal with it. Like Syfy — perhaps even in a stylistic trend — this is a bold, simple wordmark that can carry Nickelodeon for another quarter of a century.

City of Melbourne
Designed by: Landor (Sydney)
Release Date: July, 2009
Voting Highlight: 67% (1,020 of 1,520) Thought this was Way Cool

This new identity gained early praise when we first announced it, and then we got a chance to see all the different “M”s and it became even cooler. In terms of visual execution and diversity, this was one of the strongest of the year.

AOL
Designed by: Wolff Olins
Release Date: November, 2009
Voting Highlight: 51% (1,232 of 2,374) are Willing to Give it a Chance

Amazingly, only 28% (673) Hated It, and 19% (469) Loved It

Hold the rotten tomatoes. I agree, AOL is neither technically nor aesthetically the best logo or identity of the year. But no identity will have a bigger impact in the evolution of a brand as AOL’s. Most companies brand to match their audience, AOL is branding to create a new audience. The name may conjure the 1990s but the identity is twenty-first century all the way. Wolff Olins may be the punchline for many designers but, even if you don’t know it or care to admit it, they are having the last laugh.
Tags - logo , 2009

2012年波兰-乌克兰欧洲杯标志公布

Tue, 15 Dec 2009 02:43:57 +0000

2012年波兰-乌克兰欧洲杯官方标志今日在乌克兰首都基辅正式对外公布，新标志左右两朵正在绽放的鲜花代表两个主办国，中间的足球代表着这项赛事的激情，花的茎则代表着欧锦赛欧足联和欧洲足球的完善的体制。而围绕整个标志的视觉标识灵感也来自于大自然，森林的绿色，阳光的金黄色，大海和天空的蓝色还有黑霉的紫色是这个标志的主要组成色调。

2012年欧洲杯将是进入21世纪以来第三次由两个国家合办，前两次分别是2000年荷兰-比利时欧洲杯和2008 年瑞士-奥地利欧洲杯，本届杯赛的口号是“共同创造历史”，事实上在本届欧洲杯还未开幕之时就已经创造了历史，因为这一届将是首次由24支球队参加的欧洲杯。

此处包含一个多媒体文件，请用网页方式查看。

Tags - logo , euro2012 , football

iPhone应用设计趋势 / iPhone App Design Trends

Sun, 13 Dec 2009 08:38:03 +0000

Smashing Magazine版权所有
作者：Smashing Magazine
译者：UCD翻译小组，波希米亚

在过去的两年里，你能想象的一些很烂的应用设计也入驻了优雅的iPhone。通过它周边的宣传，使得世界各地的设计者们都利用这个新的移动工具来一展身手。结果虽搞出了成千上万的iPhone应用，但通常不好用也不直观。然而有些设计师则是花费大量时间为创造更好用的界面而努力着（是的，这些都是好用且有创意的界面）。

本文探究了如何让设计师利用图形元素和屏幕交互，制作出易识别又易操控的iPhone应用。目的在于揭示iPhone应用设计的普遍趋势和设计方法——请注意，这些未必是设计和可用性中的最佳观点。

1. 镜像iPhone原生界面元素

“告诉他们你要告诉他们的，去告诉他们，然后告诉他们你告诉过他们。”（译者：作者在表达她当时的感受吧）在你的应用中创建一套新的OS可能很有趣，但在移动设备上处理时，人们只想简明扼要。简明扼要的意思是，设计师得遵循OS的流程，创建一个无说明的应用，给最终用户去操作。镜像出用户熟悉的布局和界面元素可以节省时间和精力。所以这看起来是设计iPhone应用时的一个便利途径啊。

Facebook
在新版Facebook 3.0中，你会发现这样一个栅格布局，用户可以通过左右滑动屏幕进入更多分类。因为它镜像了苹果的原生界面，所以用户根本不用再学如何使用。网页设计中存在类似方法：用户会预料到logo在左上角，导航也在上面，等等。Facebook把这它延续到了移动应用上，用大按钮可以轻松的被识别和点击。

Where
Where使用了相同的概念，它允许用户通过左右滑动屏幕来获取更多信息。

Tweetdeck
Tweetdeck是用户界面设计中一个很好的例子。高亮显示的最近更新多吸引注意力啊。此应用能以归类或标签列表形式，在新窗口中显示更新。但不会替换掉一个已显示的对话菜单，它可以作为跳转到具体类目或清掉消息提醒的跳板。

2. 简化界面

也许简化用户界面听起来像是个机械任务，但在用户界面设计背后又隐藏着什么呢？答案很简单：就是用户。用户需要什么？什么令他们感到友好和模糊？你如何提供他们所需的东西，以便不用时刻去关注那些重要的信息？

提到在小空间内展示大量核心功能，Facebook的第一版就做的非常到位。当然，这里指的是展示所有信息和拥有直观的界面。3.0与之相比，你会发现它使用“跳板”的方式来简化界面，既保持了直观又维护了功能。

Flickr
Flickr 对功能、视觉设计和小屏幕移动设备显示这三者间平衡上的处理同样出色。试想之：Flickr的核心是什么？照片。它的用户或许不希望看到又大又笨的导航；他们想要的是照片。Flickr已经设法调整核心功能，去掉那些标题和该死的导航。事实上，很多导航元素已经在照片本身的交互上实现了。真是个既简单又聪明的办法。

3. 模拟硬件界面

不少应用程序打破了传统iPhone界面的操作，利用它独特的手指手势进行控制。它们中一些是用户熟悉的硬件界面，光鲜亮丽的外表不禁让人回味起那种第一次点击的新鲜感。但应用程序不会因为你玩的多而变脏。

Convertbot
Convertbot的轮盘让我们想起小学时候，不同的是它更具特色、更新颖、更有创意。

Little Snapper
Little Snapper模拟的就是一台普通数码单反的旋钮。

Where To?
这个应用看起来像是属于奔驰车的。豪华的皮革、磨砂的按钮：上乘的技术。我们可以想象，每个按钮按下去都那么结实，都那么有力道。

4. 丰富、漂亮的列表视图

当你对列表设计的最新趋势感到兴奋时，你已经被确诊为一位“geek designer”了。人们遇到一个列表时会做些什么？当然，只是略读。那怎样把人们决定什么有趣变得更轻松？没错，更多的视觉暗示！

基本上，用户通过寻找下一步的快照，来决定是否需要了解更多。而又大又漂亮的按钮就是途径之一。通过色彩、图标和排版让人感觉这个大按钮背后隐藏着好多信息。

Delivery Status Touch
看看Delivery Status是怎样通过不同颜色的大按钮来区分不同品牌的。并用良好的排版建立起信息层次。

Be Happy Now
Be Happy Now的大按钮通过柔和的色彩体系与明亮清晰的字体传达“be happy”的主旨。

Next Read
Next Read这个应用允许在朋友间分享图书。在这里所有书都是关于时下某一特定话题的，包括书名、封面、评分以及评论数。注意看每个导航选项的间隙和留白，它让这个区域更容易被点击。

Nike
Nike为女性开发了这个应用，精致的视觉元素和插画都很符合它的品牌。在设计上打破了传统界面的束缚，充分表达了品牌，不让用户为如何使用它而感到困惑。

Borange
Borange是一款“社交情况”的应用，它可以帮你统筹与朋友们的约会。列表展示了很多信息：要一起出行的朋友，本地会议，并可以形象的表示哪个朋友有空。

5. 分层的界面

一些应用把界面设计成层，利用iPhone本身独有的特性让其固定，或垂直、水平滚动。这种方法有几个好处：

1. 减少了必要的传统导航元素数量（即更少的按钮有助于避免界面混乱）
2. 为用户获取信息提供了快速通道
3. 有更多屏幕空间承载有用信息

Tweetie
Tweetie利用层把具体信息传递给你每位Twitter好友。你看，所有信息都装在这一个屏幕里！

Barnes & Noble
Barnes & Noble让你可以快速的通过上面的层进入新商品，通过下面的层切换到更多分类。

USA Today
USA Today在它的图片一栏中对层做了细微改变：利用滑动面板显示信息区块。尽管第一眼看上去很乱，但能很容易跳过它。最有趣的部分在于，在每个面板里，都可以通过左右滑动来查看更多图片。

myPantone
我们何尝不希望色卡少一点？上面的拾色器就是一个层，你可以通过色彩范围、类别来取色，也可以通过滚动打开/关闭细节窗口。

6. 在列表中使用图标

在小屏幕上，图标可给应用的可用性和导航性带来巨大提升。让我们通过几个应用的例子看看它的优势。

iStudiez
这个应用利用各种不同的教学用具图标，清晰地表达了应用的目的。通过这些具象的暗示，学生瞄一眼就知道今天发生了什么。

Top Floor
Top Floor利用简单易识别的图标，快速引导用户进入他们选择的类别。

New York Times
应用可以让你想做什么就做什么，是不是很不可思议哦？对于一个像纽约时报样的应用，用户必然有他喜欢的章节。你猜怎么着？纽约时报这样做：它让你自定义标签栏，把你喜欢的章节都加进来。拖动一个图标到标签栏即可。不过这样做也不是十全十美，在视觉呈现上打了折扣。

Filemaker
另一个漂亮图片的案例，说它好是因为图标的使用上不混乱、不混淆。设计师永远不要为了使用图标而使用图标。作为设计师，我们希望图标能够尽可能的反应出用户所选的内容。Filemaker，干的漂亮。

7. 插图的使用

依赖图形的应用程序越来越受欢迎，因为开发者试图让她们的应用与众不同。偶尔奏效，但不经常。越是传统的设计就越可能存在可用性问题。在推出一个“有创意”界面的产品前一定要进行可用性测试。

SugarSync
这个界面可以轻松地走遵循传统列表视图的路线。但设计师没有这么做，而是通过一个漩涡将视觉连接在一起来传达这个应用。这很不寻常，同时需要花点时间来适应它。

Mom Maps
另一个使用插图取得成功的例子，它将很多概念都融入了这个应用。

8. 使用手势

经典的线性导航看上去很枯燥：一个按钮连一个按钮，来表现一堆东西的列表，或表现这样那样的交互。事实并非如此壮观，只是比喻一下。在公共事业的应用上使用有创意的交互可能性很大。

Mover
Mover列举了如何使用手势来分享联系方式、照片和书签。打开两个设备，把文件从这个共享到那个里。

ABC Animals
这个应用寓教于乐。用手指在屏幕上书写字母是另一个通过触摸iPhone控制的例子。

All Recipes
此应用可以让你通过手势来混合众多元素，作为你的美餐。

Tags - iphone , trend

成功的用户界面的8个特性 / 8 Characteristics Of Successful User Interfaces

Thu, 26 Nov 2009 02:50:38 +0000

当你构建你的用户界面和网站的时候，有各种各样的关于界面设计方法和模式的信息你可以使用，对常见问题的解决方案和一般可用性的建议。下列专家给出的准则可能会引导你创造一个良好的用户界面，但是究竟什么才是一个良好的界面？一个有价值的用户界面应该具有那些特性？

There is a lot of information out there about various interface design techniques and patterns you can use when crafting your user interfaces and websites, solutions to common problems and general usability recommendations. Following guidelines from experts will likely lead you towards creating a good user interface — but what exactly is a good interface? What are the characteristics of an effective user interface?

以下八个特性是一个良好的用户界面所必须的：

清楚
简明
熟悉
易响应
一致
吸引力
高效
宽容

1. Clear / 清楚的
清晰度是用户界面设计最重要的元素。事实上，用户界面设计的所有目的是为了使人们能够与您的系统通过沟通和功能来进行交互。如果人们不知道你的应用程序怎样工作或在你的网站上应该去哪里，他们会困惑和沮丧。

这是什么呢？鼠标移到WordPress的按钮时工具提示会弹出解释其职能。

2. Concise / 简明
清晰的用户界面是很好的，但是，您应该谨慎，不要陷入过度明晰。定义和解释很容易被添加，但是你这样做的同时也增大了规模。您的界面规模增加。添加过多的解释，您的用户将不得不花费过多的时间去读它们。

不仅要保持清晰，而且还保持简洁。当你能用一句话解释一项功能的时候就不要用三句话。当你可以用一个单词标记一个项，就不要用两个。保持简洁可以节省你的用户的宝贵的时间。同时保持清晰和简明并不容易，需要足够的时间和努力来实现，但其回报是值得的。

在 OS X 的音量控制中使用两个小图标以显示的音量从低到高。

3. Familiar / 熟悉
许多设计师努力使自己的界面，直观。但到底直观的真正意思是什么？直观也就是就是说可以自然地，本能地理解和领会。但是你怎么能做到直观一些？你可通过是它变的熟悉来实现。

熟悉就是，跟你以前遇到过的东西相似。当你熟悉的东西，你就知道怎样它怎么做-你知道会发生什么事情。弄清你的用户熟悉的并把它们融合到你的用户界面中。

GoPlan的标签页式界面。标签很熟悉，因为他们模仿文件夹上的标签。你清楚知道点击标签您将浏览该节和其他地方的标签将继续存在为了进一步导航。

4. Responsive / 易响应
易响应意味着两件事。首先，易响应意味着快速。如果没有软件在后台，界面应该响应很快。等待加载和缓慢的界面是令人沮丧。看起来加载的很快，反正就是界面快速载入（即使内容尚未赶上）改善了用户体验。

易响应也意味着界面提供某种形式的反馈。界面应该反馈给用户，告知他们现在怎么了。你成功地按下那个按钮吗？你将如何知道？按钮应显示一个被按了的状态反馈，或许可以把按钮上的文字改成“正在加载... ”并且禁用按钮。是软件挂了还是内容载入中？用转动的轮子或显示进度栏的方式来保持用户在进程中。

Gmail会显示一个进度栏当您第一次进入您的收件箱。而不是逐步载入网页时，一旦一切准备就绪整个页面即时显示。

5. Consistent / 一致
之前我谈过关于上下文的重要性，以及它应如何指导你的设计决定。我认为，适应任何给定的上下文是很聪明，但是，一个界面仍然应保持一定程度的一致性。

一致的界面，使用户能够开发惯用模式-他们会了解不同的按钮，标签，图示和其他界面元素的外观，并识别他们。认识到在不同的情况他们所做的事情不同。他们也将了解特定的东西如何工作，能够从过去的经验中更快的总结知道如何操作新功能。

在Microsoft Office的用户界面是一致的是有原因的。

6. Attractive / 吸引力
这可能有一点争议，但我相信一个良好的界面应该有吸引力。吸引力在某种意义上，是与界面交互变得是愉快。是的，你可以让你的用户界面简单，易于使用，有效率和易反应，它将尽其出色-但如果你可以做额外的一步，使之有吸引力的。那样用户体验会真正令人满意。当你的软件使用起来是令人愉快的，你的客户或工作人员将不仅是简单地使用它-他们会期待着使用它。

当然有许多不同类型的软件和网站，所有的创作针对的不同的市场和用户。什么样看来'好'对任何一个特定的观众都会有所不同。这就是说，你应该为了你的用户来包装你的界面的的外观和风格。此外，美感设计应适度使用，并且是为了加强功能。美化界面不同于加载时使用多余的眼睛糖果。

谷歌是众所周知的极简洁的界面，他们关注功能重于形式，但他们显然的花费时间美化了Chrome用户界面元素，如按钮和图标，使它们看起来正好体现了微妙的梯度和像素超薄突出。

7. Efficient / 高效率
用户界面像是车辆，带你去你要到的地方。这些地方是软件应用程序或网站的不同的功能。一个良好的界面可让您在执行这些功能更快。现在， '有效'听起来像一个相当模糊的属性-如果你把所有其他的事情在这个清单上，当然界面到头来还是需要高效？差不多，但不完全。

你真正需要做的是使界面能高效的找出用户努力想要实现的，然后让他们可以有条不紊的做到。您必须确定您的应用程序应该如何工作' -什么功能它需要有，什么样的目标是你努力努力争取实现？实现一个界面，可以让人们轻松地完成他们想要做的，而不只是简单的实现对各个功能的访问。

苹果公司已经确认了人们在其iPhone上想要对照片做三个关键的事情，并在照片控制中提供按钮来分别完成他们。

8. Forgiving / 宽容
没有人是完美的，当使用你的软件或网站必定有人会犯错误。如何处理这些错误将成为你的软件的质量一个重要指标。不要惩罚用户-建立一个宽容的界面，纠正问题。

一个宽容的界面可以使你的用户远离代价高昂的错误。例如，如果有人删除了重要的信息，他们可以轻松地重新检索或撤消这一行动？当有人浏览到损坏或不存在的网页，他们会看到什么？他们会迎接一个加密的错误提示还是得到了一些有用的替代目的地？

错误的删除了电子邮件？Gmail可让您迅速取消上一次的操作。

To conclude…结束...
实现这些特性实际上可能同实现另外一些特性产生冲突。例如，试图使一个界面清晰，您可能会增加太多的描述和解释，即最终使整个界面变得大而笨重。缩减容量，努力使事情简洁可能产生相反的效果，使东西模糊不清。实现一个完美的平衡需要的技能和时间，解决方案根据不同的案例也并不一样。
Tags - ui , userinterfaces

Indelplan医疗软件icon设计

Thu, 19 Nov 2009 14:15:05 +0000

这是去年给深圳Indelplan medical软件公司设计的一套icon，大概有200多个。此软件是应用于大脑治疗的操作软件，其中最困难的地方是icon的达意，因为医疗操作的某些定义与我们平时使用的制图软件，移动设备的icon不同，它们有很多不易理解的寓意。这些都需要和客户仔细沟通，当然有很多的时候要在达意和美观上做一些取舍。

以下是大部分的icon：

Tags - software , icon , medical , 医疗软件 , ui

2012年伦敦奥运会体育图标公布

Mon, 26 Oct 2009 14:26:39 +0000

2012伦敦奥运会组委会10月18日正式公布各体育项目图形，图形分两种方式表现：“轮廓”和“动态”，两种表现形式的图形将分别应用于不同类别，如“动态”图形将会在2012伦敦奥运特许商品、海报、地铁等方面应用，而：“轮廓”图形则重点在各赛事、体育场馆中使用。

伦敦奥组委制订了两套项目图标，一套以侧影为主，另外一套色彩和样式较为鲜活，据说借鉴了伦敦地铁图标的创意。伦敦奥委会主席塞巴斯蒂安·科表示，这些图标将成为区分各个项目的重要标识，并将被广泛的认可。“未来的三年中，各个体育项目将都有机会谱写自己的篇章，这将让英国公众了解到伦敦奥运给他们带来了什么，”他说，“我希望这些标识能对此起到引导的作用。

Tags - olympic , icon , london

品牌标志设计：Interbrand公布2009年全球品牌100强

Mon, 21 Sep 2009 14:25:27 +0000

美国《商业周刊》与品牌咨询公司Interbrand共同发布了发布的“2009年度全球最佳品牌排行榜”，谷歌、亚马逊和Zara成为今年品牌的价值增幅最大的三家公司。瑞银集团(UBS)品牌价值出现戏剧性下降，从第31位暴跌至第72位，品牌价值下降50%。可口可乐连续9年位居榜首。

《商业周刊》与Interbrand公司已经连续9年发布全球最佳品牌排行榜，该排行榜向人们展示全球品牌价值最高的100家公司。全球100 大品牌的总价值出现近10年来首次下降。上榜品牌的总价值较去年下降了554.72亿美元或4.6%，跌至1.15万亿美元。亚马逊、百事可乐、奥迪、松下和Campbell等公司都经历了充满挑战的一年。

另外还有7家公司跌出全球100大品牌排行榜，其中包括美林证券，去年排名第34位；AIG集团，去年排名第54位；ING集团，去年排名第 86位。这些金融公司品牌价值的下降一点也不奇怪，因为经济危机的来临给这些公司带来了极大的损失。从本次排名就可以看出，经历过本轮经济危机，大银行和汽车品牌情况最糟糕；而食品品牌受益于消费者更多在家用餐。

在今年的排行榜上，可口可乐品牌价值上升3%至687.3亿美元，IBM品牌价值增长2%至602.1亿美元，分别列第1位和第2位。受经济危机影响，除了少数几个公司的品牌价值出现增长外，大多数公司品牌价值都出现缩水，如排名第4位的微软品牌价值缩水4%至566.47亿美元，排名第5位的诺基亚缩水3%至348.64亿美元。

Tags - logo , rank

2016七座城市申奥标志,你觉得哪个最好呢？

Sun, 06 Sep 2009 14:56:44 +0000

国际奥委会2007年9月14日正式宣布，最终确认七座城市申办2016年奥运会。这些城市按字母顺序排列分别是：巴库(阿塞拜疆)、芝加哥(美国)、多哈(卡塔尔)、马德里(西班牙)、布拉格(捷克)、里约热内卢(巴西)和东京(日本)。2009年10月2日，将在哥本哈根宣布2016年奥运会的主办城市。下面是这些城市的申奥标志及其含义:

马德里2016申奥标志

马德里的申奥标志为一只愉快伸展开的手掌，五种颜色代表奥运五环，手掌下方是大写的马德里英文名字的字头“M”，整个标志象征 “居住于马德里不同文化，人们及国家的结合”，也代表“重视马德里及其人们的新鲜友善的招呼”。

里约申奥标志

里约热内卢申奥标志的主体图案取材于里约热内卢的著名景点--面包山。图案组合成一个心形,代表了巴西人对体育的热爱以及对奥运的渴望。标志的颜色为巴西国旗上的绿、黄、蓝三色。巴西人不会即把2014年世界杯足球赛的举办权弄到手以后，又当上奥运会的东道主吧？

芝加哥申奥标志

中间的六角星是基于芝加哥市旗而设计的。从六角星上下成辐射状穿过的竖彩条体现出了我们的城市建筑充满活力以及公园与湖泊的美丽。同时寓意着我们热情欢迎世界朋友来芝加哥参与奥运会的期望。

六角星的每个角代表着芝加哥和奥林匹克运动的理念：希望、尊重、和谐、友谊、卓越和赞美。

东京申奥标志

东京的申奥标志图形是“传统的日本结”，“日本结”是日本民间表示喜庆和庆祝活动的祝福象征，东京2016’申奥会徽整合奥林匹克五个颜色变成主线，并结合“日本结”，使之色彩鲜艳。
“日本结”体现的是合一的价值观，既巩固性的把奥林匹克运动和2016年东京，体育和文化，城市和自然环境，日本和世界，世界与和平联系在一起。

我在东京申奥网站上下载了它们的bid文件，做得很细致，整套宣传册设计水准很高，日本人在举办赛事和筹划方面确实很强。有机会大家也可以到它们的官网上瞧瞧。

布拉格2016申奥标志

布拉格的申奥标志上方为绿色月桂树枝叶组成的数字“2016”，下方为彩色细丝带，最下方为捷克语“PRAHA(布拉格)”。

多哈2016申奥标志

我觉得多哈这个像草图一样

巴库2016申奥标志

巴库的申奥标志由六个舞动的人形图案组成,根据在Gobustan发现的史前的刻在岩石上的画——即所知的岩石壁画而设计。(Gobustan是大高加索山脉东南山底的一块岩石体，此处附近是里海和一条建在古代希尔万道路上的现代高速公路。)
Tags - olympic , logo

有效LOGO设计的最重要的提示 / Vital Tips For Effective Logo Design

Wed, 02 Sep 2009 04:20:48 +0000

曾经有许多创造性的logo设计案例，logo设计资源和logo设计指导张贴在互联网的各个角落。这些帮助会为你的logo设计创造一个功能强大的工具箱。首先你需要对于一个好的logo设计获得一个固定的认识和一些你认为需要考虑的东西在你使用这个工具箱之前。
There have been numerous creative logo design showcases, logo design resources and logo design tutorials posted across the Web. While these help you to create a powerful toolbox for your logo designs, first you need to gain a solid understanding of what makes a logo design good and what you need to consider before starting using this toobox.

In this article, we’ll get down to the nitty gritty of what makes an effective logo design and we’ll also guide you through the principles and best practices of how to create an iconic brand identity.
在这文章里，我们将认真分析怎么才能获得一个有效地logo设计并且我们也指导你通过这些规则和最优的办法创造出一个品牌的特性图标。

1.What Is A Logo? / Logo是什么？

To understand what a logo is, we first must understand what the main purpose of logos is. The design process must aim to make the logo immediately recognizable, inspiring trust, admiration, loyalty and an implied superiority. The logo is one aspect of a company’s commercial brand or economic entity, and its shapes, colors, fonts, and images usually are strikingly different from other logo in the same market niche. Logos are used to identify.
要理解Logo是什么我们比需首先理解Logo的主要作用是什么。设计流程指出Logo制作必须瞄准立即可认性、可信性、令人钦佩、忠诚、暗含的优越性等。一个logo是公司商业标志和经济实体的代表，并且它的形状，颜色，字体和图形经常在相同的市场区域很明显的区别于其他的logo。logo被用来识别。

Paul Rand, one of the world’s greatest designers states that “a logo is a flag, a signature, an escutcheon, a street sign. A logo does not sell (directly), it identifies. A logo is rarely a description of a business. A logo derives meaning from the quality of the thing it symbolizes, not the other way around. A logo is less important than the product it signifies; what it represents is more important than what it looks like. The subject matter of a logo can be almost anything.”
世界著名的设计大师Paul Rand指出“一个logo就是一面旗帜，一个签名，一个铭牌，一个街头标志”。他认为一个logo不是用来推销的而是用来识别的。一个logo是对公司极精彩的描述，logo来源于它象征的事物中，不是相反的方向。一个logo没有它象征的产品重要；它象征的东西要远远比她像什么重要。一个logo的主旨可能几乎是任何东西。

2.What Makes A Good Logo? / 如何制作好的logo?

A good logo is distinctive, appropriate, practical, graphic and simple in form, and it conveys the owner’s intended message. A concept or “meaning” is usually behind an effective logo, and it communicates the intended message. A logo should be able to be printed at any size and, in most cases, be effective without color. A great logo essentially boils down to two things: great concept and great execution.
一个好的logo是与众不同的，合适的，实用的，形象的并具有简单的形式，它传递了所有者预期的信息。在有效logo的背后往往传递着观念和含义，它表达了暗含的信息。一个 logo应该能在大多数场合能够以任何尺寸大小打印并且在没有颜色时是有效的。一个著名的logo从本质上浓缩了两个东西：杰出的概念和极好执行力。

3.Logo Design Process / logo设计流程

“Some wonder what’s so difficult about creating a good logo. They’re small, they look easy to do, so no problem, right? When you only see the result of a designer’s efforts, the logo creation can look like it was a simple task. But it’s not. A logo takes thought and creativity, and many elements combine to make a good one.”
“一些人产生疑问：创造一个好的logo最难的是什么呢？它们非常的小，它们看起来很容易做，所以没问题,是吗？当你仅仅看到设计者努力的结果时，创造logo可能看起来是一个简单的任务。但是，并不是那样。一个logo需要想法和创意，许多元素联合在一起才能制作出一个好的来”

When creating a logo, follow a process that ensures the final design meets the needs of the clients. Below, we have listed the typical process that professional logo designers follow. With practice, you will no doubt develop your own.
当我们创造一个logo的时候，遵照一个流程可以确保最后的设计作品可以满足客户的需求。下面，我们列出典型的专业logo设计者的流程。通过实践，你不用怀疑自己取得了进步。

Design brief / 简洁的设计
Conduct a questionnaire or interview with the client to get the design brief.
引导用户做一个调查问卷或者采访来获得一个简洁的设计图。

Research / 探究
Conduct research on the industry itself, its history and competitors. Problem-solve first, design later.
实施一个用户自我探究，包括他的历史和竞争对手。首先解决问题，然后再设计。

Reference / 参考
Conduct research on logo designs that have been successful and on current styles and trends that may relate to the design brief. Follow trends not for their own sake but rather to be aware of them: longevity in logo design is key.
把已经做的简洁的设计图和成功案例及目前流行样式、趋势联系起来做一个logo设计上的参考

Sketching and conceptualizing / 设计草图并且概念化
Develop the logo design concept(s) around the brief and your research. This is the single most important part of the design process. Get creative and be inspired. As Dainis Graveris has written once, “sketching isn’t time-consuming and is a really good way to put ideas in your head right on paper. After that, it’s always easier to actually design it on the computer. Sketching helps to evolve your imagination: once you understand it, you will always start from just white paper.
在你的探究和简介的设计图上开发logo设计理念。这是设计流程中仅有的一个最重要的部分。要有灵感激发并产生创造性。正如Dainis Graveris曾经写过的“草图绝不是浪费时间而是一种把你脑子里的想法展现到纸上的一种非常好的方式。”在这以后，将会在电脑的真实设计中变得更加容易。草图帮助我们解决了想象出来的东西：一旦你理解了，你会经常在一张白纸上开始你的设计工作。

Reflection / 反思
Take breaks throughout the design process. This helps your ideas mature, renews your enthusiasm and allows you to solicit feedback. It also gives you a fresh perspective on your work.
在设计流程中不断打破。这会帮助使你的创意更加成熟，赋予你新的热情并且使你恳求意见的反馈。同时给你的工作带来全新的视角。

Revisions and positioning / 修订和定位
Whether you position yourself as a contractor (i.e. getting instructions from the client) or build a long-lasting relationship (i.e. guiding the client to the best solution), revise and improve the logo as required.
无论你的身份是承包人还是创建的长期的合作关系，在需要的时候修订并改进logo。

Presentation / 演示
Present only your best logo designs to your client. PDF format usually works best. You may also wish to show the logo in context, which will help the client more clearly visualize the brand identity. Preparing a high-quality presentation is the single most effective way to get your clients to approve your designs.
把你最好的logo设计展示给你的客户。PDF经常是最好的格式。你可能同样希望展示logo的内容，帮助客户清楚地从视觉上感受到品牌的个性。准备一个高质量的展示是得到客户赞成你的设计的最有效的方法。

“Canned presentations have the ring of emptiness. The meaningful presentation is custom designed—for a particular purpose, for a particular person. How to present a new idea is, perhaps, one of the designer’s most difficult tasks. This how is not only a design problem, it also pleads for something novel.
“密封的展示存在空虚的环绕。最有意义的展示是用户为了某一个特定的人，特定的目的定制的。如何展示一个新的创意？或许是设计者的最难的任务。这不仅仅是设计问题，而是在追求一些新颖的东西。

Everything a designer does involves presentation of some kind—not only how to explain (present) a particular design to an interested listener (client, reader, spectator), but how the design may explain itself in the marketplace… A presentation is the musical accompaniment of design. A presentation that lacks an idea cannot hide behind glamorous photos, pizazz, or ballyhoo. If it is full of gibberish, it may fall on deaf ears; if too laid back, it may land a prospect in the arms of Morpheus.”
一个设计者包含某种形式的展示不仅向一个感兴趣的听众（客户，读者，观众）解释了一个特定的设计，而是如何在商场上解释它。展示就是设计音乐的伴奏曲一样。一个缺乏创意的展示不可能隐藏在富有魅力的摄影，喧闹中的。如果全部是胡扯或者非常的滞后，那只有在梦乡里展示它的前途了”。

Delivery and support / 传递出去包括帮助文件
Deliver the appropriate files to the client and give all support that is needed. Remember to under-promise and over-deliver. After you’ve finished, have a beer, eat some chocolate and then start your next project.
把合适的文件包括必须的帮助文件传递给客户。在你完成之后，可以喝杯啤酒，吃些巧克力开始准备下一个计划。

5.Principles Of Effective Logo Design / 有效logo设计的5个原则

As mentioned, a good logo is distinctive, appropriate, practical, graphic and simple in form, and it conveys the owner’s intended message. You should follow the five principles below to ensure that your design meets all of these criteria:
正如我们所提及到的，一个好的logo是独一无二的，合适的，实际的，形象的并且在形式上是简单的。它传递了所有者预期的信息。你需要遵照下面的五个原则才能确保你的设计符合这些标准:

1. Simple / 简单

Simplicity makes a logo design easily recognizable, versatile and memorable. Good logos feature something unexpected or unique, without being “overdrawn.”
简单使一个logo容易被认出，易记并具有多功能性。好的logo特征具有不可预见的或唯一的东西：没有被夸大。

2. Memorable / 易记

Following closely on this principle of simplicity is that of memorability. An effective logo design should be memorable, which is achieved by keeping it simple yet appropriate.
紧跟简单特征的是易记性。一个有效地logo设计应该在达到简单合适的前提下易记。

3. Timeless / 永不过时

An effective logo should be timeless. Will yours stand the test of time? Will it still be effective in 10, 20 or 50 years?
一个有效的logo应该是永不过时的。你的设计经受得住时间的考验吗？在10年、20年、或是50年之后仍然有效吗？

4. Versatile / 多功能

An effective logo works across a variety of media and applications. For this reason, logos should be designed in vector format, to ensure that they scale to any size.
一个有效的logo可以跨越各种各样的媒体和应用。因为这个理由，logo应该被设计成简单矢量格式的来确保可以扩大到任何尺寸。

Ask yourself, is your logo still effective if it is printed 问你自己，你的logo在印刷的时候是否仍然有效
In one color? 单色印刷
In reverse color (i.e. light logo on dark background)? 反色印刷（例如：浅色logo，深色背景）
The size of a postage stamp? 邮票尺寸大小的印刷
As large as a billboard? 广告牌那么大的印刷

5. Appropriate / 合适

How you “position” the logo should be appropriate for its intended audience. For example, a child-like font and color scheme would be appropriate for a logo for a children’s toy store, not so much for a law firm.
一个logo的定位应该符合它潜在的观众（读者，客户），例如，一个孩子气的字体和色彩设计应该适合于儿童玩具商店而不是法律事务所。

6.How Much Does A Logo Cost? 一个logo的成本是多少？

In my experience, this is the most frequently asked question. It cannot be easily answered because every company has different needs. The best approach is to draw up a customized quote for each client.
在我的经历中，这是最经常被问及的一个问题。他并不容易回答，因为每一个公司都有不同。最好的方法是是为每一个客户拟定报价。

You have to take a number of factors into consideration when designing a logo, such as how many logo concepts need to be presented, how many revisions will be needed, how much research is required, how big the business is and so on.
当你在设计一个logo时必须考虑许多因素，比如多少logo包含多少概念要展示，有多少次修订，多少次需求探究，这是个多大的公司等等。

7.How To Choose A Logo Designer? 如何选择一个logo设计师

Keep an eye out for certain things when choosing a logo designer:

Experience and proven success 经验和成功案例
Do they have a proven track record? How experienced are they?

Testimonials 资格证明书
Do they have positive testimonials from previous clients? Ensure you check the validity of testimonials. A quick email to the company should suffice.

Their design process 他们的设计流程
Do they follow a logo design process?

Awards won and published work 获奖情况和出版作品
Have they won any awards for their work? Is their work published in any books or magazines? How recognized are they in the industry?

Strength of portfolio 作品集实力
How strong is their portfolio? Have they got 100+ mediocre logo designs or 10 to 30 excellent ones? What is the ratio of real to fake logo designs?

Timeframe 工作时间表
How long would they take to complete your logo? A typical logo design process takes 4 to 15 days, but many can go for months on end. Think of how long your logo design will be used for: would you want it to be designed (much less researched) in less than 24 hours?

Price 成本
The cost of the service usually reflects what you will receive. In most cases, you get what you pay for… but price is not the only indication.

Affiliations 联盟,所属机构
Are they affiliated with any design associations or publications? This is a good indication of how dedicated they are to their craft, though it is not essential.

Professionalism and communication 职业特征和合作方式
How do they present themselves? Do they respond to your emails quickly? How do they communicate? Do they work with a contract (to protect both them and you)?

Questions asked 你所被问的问题（比如公司概况等）
How many questions does the designer ask about your business? Questions should revolve around your company’s history, target market, goals, etc.

A big thank you to Sven and Vitaly for the opportunity to write for Smashing Magazine. Much appreciated. If you have any questions, comments or advice to share, please do leave a message in the comments below.

Tags - logo , design , tip

德国工业设计大师Dieter Rams的十条大律

Fri, 28 Aug 2009 03:04:53 +0000

1. 好设计是创新的 Good Design is innovative

创新恒久远，山寨不流传

It does not copy existing product forms, nor does it produce any kind of novelty for the sake of it. The essence of innovation must be clearly seen in all functions of a product. The possibilities in this respect are by no means exhausted. Technological development keeps offering new chances for innovative solutions.

2. 好设计让产品有用 Good Design makes a product useful

非可用勿扰

A product is bought in order to be used. It must serve a defined purpose – in both primary and additional functions. The most important task of design is to optimise the utility of a product.

3. 好设计有美感 Good Design is aesthetic

美感很重要，懂得审美也很重要

The aesthetic quality of a product – and the fascination it inspires – is an integral part of the its utility. Without doubt, it is uncomfortable and tiring to have to put up with products that are confusing, that get on your nerves, that you are unable to relate to. However, it has always been a hard task to argue about aesthetic quality, for two reasons.
Firstly, it is difficult to talk about anything visual, since words have a different meaning for different people.
Secondly, aesthetic quality deals with details, subtle shades, harmony and the equilibrium of a whole variety of visual elements. A good eye is required, schooled by years and years of experience, in order to be able to draw the right conclusion.

4. 好设计有助于产品的传达 Good Design helps a product be understood

让产品会说话

It clarifies the structure of the product. Better still, it can make the product talk. At best, it is self-explanatory and saves you the long, tedious perusal of the operating manual.

5. 好设计无障 Good Design is unobtrusive

留点空间给用户

Products that satisfy this criterion are tools. They are neither decorative objects nor works of art. Their design should therefore be both neutral and restrained leaving room for the user’s self-expression.

6. 好设计是诚实的 Good Design is honest

吹嘘，越吹越虚

An honestly-designed product must not claim features it does not have – being more innovative, more efficient, of higher value. It must not influence or manipulate buyers and users.

7. 好设计是持久的 Good Design is durable

美感很重要，懂得审美也很重要

It is nothing trendy that might be out-of-date tomorrow. This is one of the major differences between well-designed products and trivial objects for a waste-producing society. Waste must no longer be tolerated.

8. 好设计追求细节 Good Design is thorough to the last detail

成也细节，败也细节

Thoroughness and accuracy of design are synonymous with the product and its functions, as seen through the eyes of the user

9. 好设计关注环境 Good Design is concerned with environment

拒绝垃圾，实体或像素的

Design must contribute towards a stable environment and a sensible use of raw materials. This means considering not only actual pollution, but also the visual pollution and destruction of our environment.

10. 好设计是极简的 Good Design is as little design as possible

无，极

Back to purity, back to simplicity.

Tags - dieterrams , design

How to Create Your First iPhone Application / 如何创建你的第一个iPhone程序

Mon, 24 Aug 2009 02:37:37 +0000

What if you had a nickle for every time you heard: "I have the perfect idea for a great application!"? It’s the buzz on the street. The iPhone has created unprecedented excitement and innovation from people both inside and outside the software development community. Still for those outside the development world, the process is a bit of a mystery.

This how-to guide is supposed to walk you through the steps to make your idea for an iPhone app a reality. This post presents various ideas, techniques, tips, and resources that may come in handy if you are planning on creating your first iPhone application.

如果你每次听到有人大喊 “我有一个绝妙的应用程序创意”时，你就会得立刻到5毛钱，觉的怎么样？可能你会不屑地说：“5毛钱也太少了吧”，不过别担心，因为满大街的人都在喊这句话，而且都被你听到了，相信自己，你现在已经是一个大款了。
如果你认为我在开玩笑，那你就错了？因为我说的东西就是iPhone程序。

软件开发的内行和外行们都在通过iPhone为大家带来出前所未有的惊喜和创新。不过对于那些门外汉来说，iPhone开发仍然是一个谜，那么就让我为大家揭开它的神秘面纱吧。

1. Have an idea – a Good Idea 有一个创意 – 很棒的创意

How do you know if your idea is a good one? The first step is to even care if your idea is solid; and the second step is toanswer the question does it have at least one of the indicators of success?
你怎么知道你的创意好不好呢？首先，如果你的创意很好，那么你一定会很在意它，时刻把它挂在嘴边，放在心中；其次你要扪心自问：是否有任何迹象表明我的创意一定能成功？

Does your app solve a unique problem? Before the light bulb was invented, somebody had to shout out “Man, reading by candlelight sucks!” Figure out what sucks, and how your app can make the life of its user more comfortable.
你的创意能解决一个唯一的问题吗?
在电灯泡发明之前，有人肯定会抱怨，“我们只能在该死的蜡烛下看书吗！”想象一下那种糟糕的情形，所以你的程序应该让用户的生活更加轻松舒适。

Does the app serve a specific niche? Though there aren’t any stats on the App Store search, the usage of applications is certainly growing with the explosion of App Store inventory. Find a niche with ardent fans (pet lovers, for example) and create an app that caters to a specific audience.
你的应用程序是为特殊的市场服务吗?
尽管苹果商店没有统计数据，但是随着商店中的商品数目的暴涨，使用iPhone应用程序的人数肯定在飞速增长。所以你需要和热心用户一起寻找一个特殊的市场，然后做一个只为特殊用户群服务的软件。

Does it make people laugh? This is a no-brainer. If you can come up with something funny, you are definitely on the right track and your idea may be the golden one. Heck, I hit a red “do not press” button for 5 minutes yesterday.
它可以让用户捧腹大笑吗?
这并不需要怎么动脑筋。只要你能找到一些有趣的东西，然后用正确的方式表达出来，你的创意就是一个金点子。呵呵，我昨天花了5分钟时间来点一个写着“不要点我”的红色按钮。

Are you building a better wheel? Are there existing successful apps that lack significant feature enhancements? Don’t be satisfied with just a wine list, give sommeliers a way to talk to their fans!
你能站在巨人的肩膀上吗？
你是否发现即使是某些成功的应用程序也存在一些不足，有很大的提升空间呢？不要只满足于显示一个葡萄酒名单，你应该写个程序让葡萄酒大师可以很自己的粉丝来交流！

Will the app be highly interactive? Let’s face it, most of us have the attention span of a flea. Successful games and utilities engage the user by requiring action!
你的程序会有很棒的交互性吗？
让我们面对这个现实：大部分用户的注意力都是跳跃的。成功的应用程序用超级人性化的操作深深吸引着用户。

Action: Does your app fall in to one of these categories? If yes, it’s just about time to prepare the necessary tools.
行动: 你的iPhone程序符合上面任意一条吗？如果符合，那么就开始准备开发工具吧。

2. Tools Checklist 工具列表

Below is a list of items you’ll need (*starred items are required, the rest are nice-to-have’s):
下面是你所需要的工具（带星号的是必须的，其它的虽然不是必须的，但是你最好也准备一下）：

join the Apple iPhone Developer Program ($99) 加入苹果iPhone开发者计划 ($99)
get iPhone or iPod Touch 准备一个iPhone或iPod touch
get an Intel-based Mac computer with Mac OS X 10.5.5 准备一个能运行Mac OS X 10.5.5以上版本的的苹果电脑
prepare a Non-Disclosure Agreement (here’s a sample) 准备一份NDA保密协议
download and install the latest version of the iPhone SDK if you don’t already have it. 下载最新版本的iPhone SDK
a spiral bound notebook 一个螺旋装订笔记本

Action: Load up on your required supplies.
行动: 将一切必要物品就位.

3. What Are You Really Good At? 你最擅长什么?

What skills do you bring to the table? Are you a designer whose brain objects to Objective C? A developer who can’t design their way out of a paper sack? Or maybe you are neither, but an individual with an idea you’d like to take to the market? Designing a successful iPhone application is a lot like starting a small business. You play the role of Researcher, Project Manager, Accountant, Information Architect, Designer, Developer, Marketer and Advertiser – all rolled into one.
你最能拿到台面上的什么技术?
你是一个对程序一窍不通的设计师？还是一个设计小白程序员呢？或者干脆你什么都不会，但是却有着一个很有市场前景的创意？做一个成功的iPhone程序可不是一件容易的事，什么市场调查员呀，项目经理呀，会计师呀，信息架构师呀，设计师，程序员，营销员，广告员等等，都是你的活，你都得干。

Remember what all good entrepreneurs know – it takes a team to make a product successful. Don’t get me wrong, you certainly can do it all. But you can also waste a lot of time, energy and sanity in the process. Don’t go crazy, reference the checklist below and ask yourself: What roles are the best fit for you to lead? Then find other talented people to fill in the gaps. The infusion of additional ideas can only enrich the product!
但是你得记住所有成功企业家都明白的一点: 一个团队才能让一件产品获得成功。别误会，我知道你很强，一个人也能搞定一切。但是，你肯定会浪费很多时间和精力。所以，别干傻事，问问自己：我最擅长干那件事？然后找一些牛人来干其他的事。这样还有一个好处就是人多力量大，大家的创意汇集在一起可以让产品更加丰富。

Skills Checklist 技能列表

Ability to Discern what works/doesn’t work in existing iPhone Apps 能辨别iPhone程序能干什么，不能干什么
Market research 市场调查
Outlining App Functionality (Sitemap Creation) 编写程序大纲 (建立站点地图)
Sketching 原型设计
GUI Design GUI设计
Programming (Objective C, Cocoa) (we assume here that we are creating a native application) 编程 (Objective C, Cocoa)
App Promotion and Marketing 产品推广和营销

Remember to have contractors sign your non-disclosure agreement. Having a contract in place tells your contractor "I’m a professional that takes my business and this project seriously. Now don’t go runnin’ off with this idea."
记得找个合同商来签订你的NDA保密协议。对你的合同商开诚布公的说：“我可以很负责人的告诉你，我的产品和业务就交给你了，千万别让我失望”。

Action: Select skills that are a good fit for you to lead. For those roles where you cannot lead, hire professionals.
行动: 选择适合自己的技能。你干不了的还是找其他人来做吧.

4. Do Your Homework: Market Research 家庭作业: 市场调查

Market research is a fancy way of saying "Look at what other people are doing and don’t make the same mistakes." Learn from the good, bad and ugly in the App Store. Coming up with creative solutions in the app concept development and design starts with analyzing other (maybe similar) applications. Even if you encounter a lot of poorly designed apps, your mind will reference these examples of what not to do.
市场调查说白了就是 "看看其他人都在做什么，然后不要犯同样的错误."。正所谓前车之鉴，后事之师，所以接下来你要看看苹果商店里的这那些应用程序都有啥创意和设计可以借鉴的。就算你看到都是一些恶心的设计, 你也会得到启发：我可不能做出这么丑的东西来吓人。

Action: Answer these questions:

What problem does your app solve?
What products have you seen that perform a similar task?
How do successful apps present information to users?
How can you build on what works and make it unique?
What value does your app bring to your audience?

行动:回答下面的问题：

你的应用程序能解决什么问题?
你看到了有类似的应用程序吗?
成功的应用程序是怎样向用户展示信息的?
你怎样开发出一款独一无二的应用程序?
你的应用程序为用户带来哪些价值?

5. Know the iPhone/iPod Touch UI 了解iPhone/iPod Touch 的UI

If you want to create an iPhone app, you need to understand the capabilities of the iPhone and its interface. Can you shoot a .45 caliber bullet out of your iPhone? No. Can you shoot videos? Yes!

The good news is that you don’t have to memorize the encyclopedic Apple User Interface Guidelines to get a feel for what works and what doesn’t in iPhone Apps. Download and play with as many apps as you can, and think about what functionality you want to include in your product.

如果你想建立一个iPhone的应用程序，你必须了解iPhone的用途和界面。你能用iPhone射出.45口径的子弹吗？不能。你能用iPhone看视频吗？可以。好消息是这些东西你没必要进行死记硬背，因为Apple用户界面指南会告诉你iPhone程序能干什么，不能干什么。
有空多下载一些iPhone程序，然后想想你的程序中需要包含哪些功能。

Take note of:

How do well-designed apps navigate from screen to screen?
How do they organize information?
How MUCH information do they present to the user?
How do they take advantage of the iPhone’s unique characteristics: the accelerometer, swiping features, pinch, expand and rotate functions?

注意一下:

iPhone程序中好的设计是怎样在页面和页面之间切换的?
它们是怎样组织信息的?
它们向用户展示了多少信息?
它们是怎样利用iPhone独一无二的特点的：加速度计，摇晃特性，多点触摸，旋转功能?

Action: Download the Top 10 apps in every category and play with all of them. Review the Apple Guidelines for UI design and list at least 5 features you’d like to incorporate into your app.
行动：每个目录下载10个程序，然后每个程序都玩玩看。看看Apple UI设计指南列出你希望添加到自己程序的特性。

6. Determine "Who will use your app?" 决定 "谁会使用你的程序?"

We assume here that you’ve already determined that your app will bring value and that you will have a raging audience for your app. Well, fine, they are raging fans, but who are they really? What actions will they take to achieve their goals within the app?
我们假设你已经非常肯定你的程序必将带来价值，你的程序会有一帮忠实的用户。好吧，准确的说，他们是狂热的粉丝，但是他们究竟是谁呢？他们到底用你的程序来做什么呢？

If it’s a game, maybe they want to beat their high score. Or perhaps they are a first time player – how will their experience differ from someone who is getting a nice case of brain-rot playing your game all day?
如果你的程序是个游戏, 也许他们想打出更高的分数，也许他们只想尝尝鲜。你有什么办法让用户得到不同的体验，而不是堕落到成天到晚都玩你的游戏呢。

If it’s a utility app, and your audience wants to find a coffee shop quickly, what actions will they take within the app to find that coffee shop? Where are they when they’re looking for coffee? Usually in the car! Do present an interface that requires multiple taps, reading and referencing a lot? Probably not! This is how thinking about how real-life intersects design.
如果你的程序是个工具 , 你的用户想快速的找到一个咖啡店，他们会在应用程序中进行怎样的操作呢？当他们找咖啡店时，他们身处何处？通常是在车中！设计一个程序需要大动干戈吗？当然不是！多从现实世界的角度出发就好了。

Action: Line item out the different types of people who will use your app. You can even name them if you want to make the scenarios you draw out as real as possible.
行动: 列出将会使用你的程序的不同类型用户。模拟他们使用iPhone的场景，甚至你可以为他们取个名字，尽量让场景越真实越好。

7. Sketch Out Your Idea 把你的创意做成草图

And by "sketch" I mean literally sketch. Line out a 9-rectangle grid on an 8.5 x 11 sheet of paper and get to sketching!
这是正真意义上的草图。在8.5 x 11的纸上列出9个表格，然后开始画画。

Ask yourself 问问自己：:

What information does each screen need to present? 应用程序中的每一页都要展示什么?
How can we take the user from point A to point B to point C? 我们怎样把用户从A引导到B，从B引导到C?
How should elements on the screen be proportioned or sized in relation to each other (页面上的众多元素怎样排版和布局？

Thumbnailing your ideas on paper can push your creativity far beyond where your imagination might stagnate working in an sketching application! You can also buy the iPhone Stencil Kit to quickly sketch out iPhone UI prototypes on paper.
当你画程序草图时，可能有时会思维枯竭导致工作停止，这时不妨试着把你的创意画成缩略图，这样可以提升你的创造空间！当然，你也可以买一个iPhone原型工具来快速构建一个iPhone UI原型。

Action: Create at least one thumbnail page of your application per screen. Experiment with various navigational schemes, the text you put on buttons, and how screens connect. If you want to transfer your sketches into digital format, iPlotz is a good tool to check out.
行动: 程序的每一页至少画一个草图。试试不同的导航模式，不同的按钮文本和页与页之间的衔接方式。如果你想把草图转化为数字格式，iPlotz是个不错的选择。

8. Time for Design 设计时间

If you are a designer, download the iPhone GUI Photoshop template or our iPhone PSD Vector Kit. Both are collections of iPhone GUI elements that will save you a lot of time in getting started. If you’ve solidified your layout during sketching, drawing up the screens will be less of a layout exercise and more about the actual design of the app.
如果你是个设计师，那就请下载iPhone GUI Photoshop模板或我们的iPhone PSD矢量工具.这两个iPhone GUI工具将会节省你很多时间。如果在你绘制草图时就已经确定了布局，那么你的侧重点就要转移到应用程序设计上了。

If you are not a designer, hire one! It’s like hiring an electrician to do electrical work. You can go to Home Depot and buy tools to try it yourself, but who wants to risk getting zapped? If you’ve followed steps 1–3, you’ll have everything you need for a designer to get started.
如果你不是设计师，那就赶快请一个吧。这就像是聘用电工来作电工活一样，你可以到零售店买一些工具自己干，但是你必须冒着被烤熟的危险。如果你遵循着1到3步，那么就万事具备，只欠设计师了。

When looking for a designer, try to find someone who has experience designing for mobile devices. They may have some good feedback and suggested improvements for your sketches. A few places to look for designers: Coroflot, Crowdspring, eLance. When posting your job offer, be very specific about your requirements, and also be ready to review a lot of portfolios.
找设计师时，最好找一个有着移动平台设计经验的人。他们可以对你的草图做一个反馈，给出一些建议来改进草图。你在这里可以找到这些设计师：Taskcity, Coroflot, Crowdspring, ELance。在这些网站上发布任务时，最好把你的需求说清楚，然后做好查看一大堆作品的准备。

Action: If you are a designer, get started in Photoshop. If you are not a designer, start interviewing designers for your job.
行动: 如果你是设计师，就开始用photoshop干活吧。如果你不是，那就赶快请一个吧。

9. Programming 编程

Even though this how-to is sequential, it’s a good idea to get a developer on board at the same time when you line up design resources. Talking with a developer sooner than later will help you scope out a project that is technically feasible and within your budget.
当你找到设计师时，你最好也找到到了一个程序员入伙。早点和程序员谈谈，看看你的项目的预算能否和技术实现保持在同一水准。

If you are a Objective C/Cocoa developer crack, open Xcode and get started! A few forums to join if you haven’t already:
如果你就是一个Objective C/Cocoa程序员，那么还等什么，打开Xcode，开始干活！推荐你加入以下论坛：

Apple Dev Forum
iPhoneSDK (moderated by Erica Sadun)
iPhoneSDKForum
iPhoneDev Forums
iPhoneSB

If you are not a developer, you know what to do – find one! Specify the type of app you want to produce – whether it is a game, utility or anything else. Each type usually requires a different coding skill set. A few places to look for developers: Odesk, iPhoneFreelancer, eLance and any of the forums listed above.
如果你不是程序员，你知道该咋办了吧？赶快找一个！确定你到底想开发什么类型的应用，不管它是游戏，工具还是其它什么东西。每种类型都需要不同的编程技术。你可以找到合适的程序员的地方有： Taskcity，Odesk, iPhoneFreelancer, ELance或者上面的论坛。

10. Submit your application to Apple Store 把你的程序提交到苹果程序商店中

OK, so how do you submit your application to Apple Store now? The process of compiling your application and publishing the binary for iTunes Connect can be difficult for anyone unfamiliar with XCode. If you are working with a developer, ask them to help you:
现在的问题是，如何把你的应用程序提交到苹果商店中？如果你不熟悉Xcode，那么编译程序，在iTunes Connect上发布二进制程序会很困难。这时，如果你的团队中有程序员，不妨问问他们。

Create your Certificates 创建你的证书
Define your App ID’s 拿到自己的App ID’s
Create your Distribution Provisioning Profile 创建你的Distribution Provisioning Profile
Compile the application 编译应用程序
Upload to iTunes Connect 上传到iTunes Connect

Action: If you are a developer, map out a development timeline and get started. If you are not a developer, start interviewing devs for your job.
行动: 如果你是个程序员，那么就定制一个开发周期，然后开始干活。如果你不是，那就赶快请一个吧。

11. Promote Your App 推广你的程序

If a tree falls in the middle of the woods and nobody was around to hear it does it make a sound? Apps can sit in the store unnoticed very easily. Don’t let this happen to you. Be ready with a plan to market your app. In fact, be ready with many plans to market your app. Be ready to experiment, some ideas will work, others won’t.
俗话说 “酒香也怕巷子深”。应用程序待在苹果商店里，无人问津是很平常的事，但是不要让这件事发生在你的身上。准备一个计划来营销自己的应用程序。事实上，应该是准备一大堆计划来营销自己的应用程序。每个计划都试试，有些可能有效果，其他的则可能没有。
Strategies for maintaining/boosting app sales:
应用程序销售策略:

Incorporating social media. If your users make the high score on his or her favorite game, it is a good idea to make it easy for the user to post it to Facebook or Twitter. Think about how your app can incorporate social media and build that functionality into your app. At a minimum, set up a fan page for your app on Facebook and Twitter and use them as platforms to communicate with your users and get feedback on your app.
结合社交媒体. 如果你的用户在游戏中得到了很高的分数，那么这些用户很可能会把这件事发布到Facebook或Twitter上。想一想你程序中的功能如何和社交媒体相结合？至少，在Facebook上和Twitter上建立一个粉丝页面，以便和你的粉丝们进行交流，得到大家的反馈。

Pre-launch promotion. Start building buzz about your app before it has launched. E-mail people who write about things that relate to your app and see if they will talk up the upcoming release of your app.
发布前推广. 在程序发布之前，先放点风声出来. 告诉相关的写手，看看他们是不是会写一些有关你的程序即将发布的消息，最好弄得满城风雨。

Plan for multiple releases. Don’t pack your app with every single feature you want to offer in the very first release. Make your dream list for the app and make sure that the app is designed to incorporate all of the features at some time in the future. Then periodically drop new versions of the app to boost app store sales.
准备多次发布. 第一次发布的时候千万得有所保留，把一些功能先藏着掖着。未来的路还很长，你把东西一次发布完，以后怎么办呢？所以，先忍一忍，每隔一段时间发布一次新的版本。

Action: Make a list of 20 promotional strategies that target the audience for your app. Take action on them yourself or hire someone who can!
行动: 为你的市场准备20个推广策略。关注每一个策略所带来的效果（不必事必躬亲，干不了就找别人来干）。

12. Stay Focused and Don’t Give Up! 集中精力，永不放弃!

It’s easy when you are working on your first app to get all AppHappy, dreaming up a zillion new app-ideas. Dream, but don’t get sidetracked by new ideas. Your first app needs to make a big splash and getting involved in too many projects at once can dilute your passion for making your first application a success.
第一次的做iPhone程序，总会怀着极大的憧憬，满脑子都是新念头。但是，不要让这些新的念头影响到你的工作，集中精力做好一件事。当你的第一程序投放在苹果大河之中，虽然开始会溅起朵朵浪花，但是很快就埋没在成千上万个项目里，但千万别因此影响到你的热情，至少你的第一次是成功的。

Action: Get out there and go kick some app!
行动: 离开这里，开始你的成功之旅吧！
Tags - ui , mac , iphone , application

Free Photoshop CS4 Plugins and Filters 很不错的PS插件和滤镜

Sun, 09 Aug 2009 11:16:45 +0000

In this free Photoshop plugins and filters you will find a few plugins that are (almost) as old as time itself, do not fear, they will work perfectly on all versions of Photoshop and the effect they produce are just as useful now as they were then. If you are looking for a simple and easy method to add effects to an image, this is the post for you.

Free Photoshop Plugins & Filters

3D Shadow

This handy plugin easily creates various types of 3D shadows from objects such as letters, numbers, shapes and so on. All settings are present in a single window - transparency level, perspective, shadow color and position, X/Y/Z angles, and many more.
More Details and Downloads

AAA Buzzer

AAA Buzzer simplifies your image while retaining sharp edges, with low ratio settings in works fairly quickly, it does work slower at a higher ratio, but it also removes more detail.
More Details and Downloads

Absolute Color

Absolute Color is based on a hue wheel subdivided into 6 sectors of 60 degrees. Choose a slector color segment and it will restrict the tints of the image for that color.
More Details and Downloads

B/W Conversion

This is a black and white conversion plugin with a difference. It allows you to take total control over the tonal response of Red, Yellow, Green, Cyan, Blue and Magenta, and the intermediate hues. The user can boost each colors tonal response all the way up to white or limit it down to black, without affecting the other colors at all .
More Details and Downloads

Bad Dream

Bad Dream gives the kind of color-casts that you would normally spend hours trying to correct; it also gives a soft, misty effect, and the final result can be quite pleasing on the right kind of image.
More Details and Downloads

Bas-Relief

This filter transforms an image to appear as though it is carved in bas-relief, giving it a lighting effects to accent the surface variations. It can look like aluminum foil, hammered metal, or carved stone, it can also be used to convert a photo into a pencil sketch.
More Details and Downloads

Camouflage

Use the Camouflage plug-in to make army, fashion and animal camo. The Camouflage plug-in creates seamless images, this means you can use them as texturesand patterns for 3D models or as a background for web sites, they can even be used as a pattern for clothing.
More Details and Downloads

Caravaggio

This plugin creates a simple 'oil-painting' effect, with just four sliders to adjust the image, choose from Creativity, Exuberance, Attentiveness and Moodswing
More Details and Downloads

Chalkaholic

Chalkaholic renders chalk and charcoal type effects with artistic style and flair. It creates a uniquely effective artistic rendering options, it is an essential addition to any digital artist's effects collection.
More Details and Downloads

Circle to Square

With this plugin you can convert any circle into a square.
More Details and Downloads

Cloud 2.2

This plugin creates seamless life like clouds on any image. You can control the blur, contour and light color.
More Details and Downloads

Color MegaMix

Color MegaMix modifies the colors of any image, it is based on two rows of colors: 8 source colors and 8 target colors. Taking into account this data, the plugin reconstructs completely the color space of the image.
More Details and Downloads

Color Replacer

This filter performs color replacement functions. The function is similar to Photoshop's Replace Color command, however, this plugin is more flexible since you can select the source and target colors independently. Therefore, it is possible to tint gray areas with an arbitrary color, which can be useful for recovering the color in overexposed areas.
More Details and Downloads

ColorWorks

This plugin comes packaged with 20 effects for modifying image color values in many different ways. You can use them for subtle correction of your digital photos or experiment with the more dramatic transformations that are available. The effects are quite basic, but they can be handy for use on a regular basis.
More Details and Downloads

Contrast Balance

Contrast Balance enhances the traditional filter luminosity/contrast and breaks it down into four balances of constant/contrast, using the following four oppositions: white-black, red-cyan, green-magenta, blue-yellow.
More Details and Downloads

Contrast Mask

This plugin uses a contrast mask to reduce the overall contrast of the image, simultaneously bringing out more detail in both highlights and shadows.
A b/w negative of the image is blured (with a radius controlled by the "Smoothing” slider) to avoid hard edges and then overlayed with the original, darkening the highlights and lightening the shadows. The opacity of the overlay is controlled by the "Strength” slider.
More Details and Downloads

Craquelure 3D

This filter creates a wide range of well known craquelure (krăkloor´) effects, that is useful in designing various abstract patterns, decorative surfaces and construction materials.
Two independent craquelure layers can be controlled to achieve an amazing variety of texture effects, from etched metal and silk plaster to melted glass and water ripples.
More Details and Downloads

Curves Plugin

The Curves plugin can create eight predetermined, interesting curves within your image. The plugins interface shows several thumbnails of the curves, select the one you like and then be impressed by the impact it will have on your image.
More Details and Downloads

DepthDither

DepthDither uses 3 ways to make the image seems to be continuous when the color is below 24 bit. Just like Photoshop, it provides diffusion, pattern and noise as the dither modes. You can choose the destination color depth, such as 2 bit, 4 bit, 12 bit, 15 bit, 16 bit, 18 bit, this is the main difference from Photoshop, the latter only provides less than 256 colors mode.
More Details and Downloads

Digitization

The Digitization plug-in has been designed to digitize positions of features in large image files. By clicking on these features their coordinates are saved to a textfile (CSV). The coordinates can then be used for further analysis. The image below shows an example of an analysis based on the data from the Digitization plug-in.
More Details and Downloads

Dreamy Photo

Dreamy Photo gives images a soft romantic feel. This is a superb effect for enhancing stock photography, digital camera photos and any image you want to add a warm feel to.
More Details and Downloads

Edges Fx

This plugin take advantage of an edge detection algorithm (precise) to obtain the following artistic effects : Colorize, Erode/Dilate, Sat Boost and Sketch.
More Details and Downloads

EdgeWorks

This plugin comes with 20 effects for creating dramatic edge and color modifications. They are best used when experimenting with intense photo transformations for a highly stylized look. They are also handy when creating interesting texture effects.
More Details and Downloads

EmbossWorks

This plugin can be used for producing various quick and easy embossing styles. They are handy when you need to add a sense of depth or relief to an otherwise flat image.
More Details and Downloads

Equalizer

This plugin offers three methods of equalization, with several options to make this process editable. The process takes advantage of the histogram of frequencies.
More Details and Downloads

Eraser Classic

Eraser classic makes it easier to replace any color you choose from your image. Activate the eyedropper, select the color directly in the preview window, and adjust tolerance .
More Details and Downloads

Face Control

Face Control plug-in allows you to change the facial expressions of people in the digital photos.
More Details and Downloads

Fine Threshold

Unlike the traditional threshold command of Photoshop, Fine Threshold allows you to get quickly, anti-aliased and sharp shapes.
More Details and Downloads

Flat Median

The Flat Median plugin is a little bit more useful than the "regular” median filter. You have added controls over the level of Flatness, it is "isotropic” just like the gaussian blur and you can apply the effect either horizontally or vertically.
More Details and Downloads

Fur Plugin

This plugin spreads a simple figure (line or circle with configurable dimensions/thickness) over the whole image. Each image can be filled using two methods: Solid, the figure is filled with a single color (determined by the figure's center) and 180 deg, were the image source content is kept, but with 180 degree rotation.
More Details and Downloads

Fuzzifier

The Fuzzifier is a filter that produces diffusion, but preserve details. There are three sliders, designated 'Spread', 'Strength' and 'Fuzziness'. At high 'Spread' settings, the effect becomes grain-like, so keep this slider at the low end unless that's what you're trying for. Strength, of course, controls the overall strength of the effect, while 'Fuzziness' controls the effectiveness with which detail is preserved.
More Details and Downloads

Gradient Blur

This plugin applies a gradient blur that draw the attention to the photograph's main subject. There are sliders to control the position where the blur starts and it's strength.
More Details and Downloads

Gradient Smithy

Gradient Smithy allows you to create what Photoshop calls the gradient map effect. Gradient Smithy allows to create complex gradients, quite easily.
More Details and Downloads

Grain Natural 2

Grain Natural creates a grain-a-like effect of your images. This plugin takes advantage of the colors already present in the image to achieve a natural result.
More Details and Downloads

Harmonix

Harmonix renders a single, horizontal line on an image, but this is no ordinary line, it is the result of superimposing up to ten separate harmonic frequencies, scaled to the screen. You can use it to create realistic graphs or demonstrate how to create other basic waveforms from nothing but carefully selected harmonic frequencies.
More Details and Downloads

Harry's Filters

The famous "Harry's Filters” is a series of filters that contains up to 69 different image effects. The main effect categories are called Color, Artistic, Gradients, Patterns, Warp, Noise, En/Decrypt, Other and Nature. It also includes filters for changing the image color or mood, for creating artistic effects, producing colorful gradients or impressive patterns, warping images and adding special noise effects to image. Additionally they let you encrypt and decrypt images with 64 bit keys, produce zoom, mirror or paint effects as well as natural effects like lightning, tornado and polar lights.
More Details and Downloads

High Pass Sharpening

This is a plugin to sharpen photos with the classic high pass method. The user can adjust the high pass filter radius, and control the blending with the original image.
More Details and Downloads

HSL Plus

HSL Plus is similar to the traditional hue/saturation/luminosity balance, but with some extras. It has a better color integrity, improved control over luminosity, and you also have the option of making an automatic contrast (due to the Auto button) then of re-adjusting.
More Details and Downloads

ICO Windows Icon

This plugin gives you an easy method for creating your web site's favourites/shortcut/bookmark icon in Photoshop.
More Details and Downloads

Illustrator

This simple plugin creates an effect similar to a colored-ink illustration.
More Details and Downloads

Jama 3d

Jama 3D is one of the simplest ways to create corrugated style and cellular like patterns from 2D images. You can easily make various bricks and herring bone textures.
More Details and Downloads

Julia World

Julia 's curves are a family of mathematical curves (fractals) renowned for their beauties. This plugin is very easy to use, all you have to do to find a curve and simply click the Random button, thats it. It also allows endless zooming to help you easily customize colors.
More Details and Downloads

Kaleidoscope 2.1

Kaleidoscope 2.1 is a plugin which uses multiple symmetries to create beautiful patterns, it uses these three spinning effects: Mirror, Copy, Transition and Blend.
More Details and Downloads

Lattice Composer

Lattice Composer effectively designs grids and nettings, it can produce a variety of weave patterns, fabric textures, body art tattoos and skeleton simulations. The 3D text effects can be extraordinary.
More Details and Downloads

Lens Correction

This plugin corrects barrel and pincushion distortions that many zoom camera lenses produce. Just move the sliders to the left to correct barrel distortion, and to the right to correct pincushion .
More Details and Downloads

Local Contrast Enhancement

This plugin's main purpose is to enhance the detail of an image. This is achieved by increasing the contrast between a pixel's value and the mean value of the adjacent pixels in a local area of the photo. You can control the amount of contrast that is increased, the size of the local area and the amount of blending with the original photo.
More Details and Downloads

Local Equalization

From an artistic point of view, local equalization can be used if you wish to enhance the aspect of a given texture. It can also be used to analyze and optimize an image certain details are barely viewable.
More Details and Downloads

Luce

Luce blends radial or directional light beams into your image. There is a text box for adjusting the intensity of the effect.
More Details and Downloads

Magic Enhancer Lite

With Magic Enhancer you can essentially improve your photos by adjusting its lightness, contrast and color balance It is perfect for enhancement image and photos which lack lightness or uneven illumination, silhouetted images on dark backgrounds. Convenient color temperature control allows fixing color balance defects easily.
More Details and Downloads

MasterBlaster

A single Photoshop-compatible plug-in with 20 effects for "blasting” intense color into your images. Ideal for when you need to add dramatic impact to your photos or work.
More Details and Downloads

Melt 1.1

With this plugin, you can alter an image, using an effective wave style. Size, intensity, and aspect ratio of waves can be customized.
More Details and Downloads

Mezzy

The Mezzy plug-in comes packaged with 15 effects for creating a selection of simple grain and mezzo styles, it gives your photos a new look with these various effects. (No MAC version).
More Details and Downloads

Mistifier

The Mistifier recreates the hazy, soft-focus effect beloved of traditional SLR photographers. This is ideal for portraits, but can also be used to great effect on landscapes, giving a sort of dreamy quality.
More Details and Downloads

Mosaic

Mosaic makes your photos look as if they were created out of a mosaic tile. Photo-realistic depth and variable tile size and color options give this effect an infinite number of looks.
More Details and Downloads

NightScope

The Nightscope is a filter for adding a basic "night-vision” effect to your digital photographs and/or 2D and 3D computer-generated images.
It first removes all color from the picture and gives a very slight blur to indicate the camera is trying hard to focus in a low-light situation. Then you can choose to add grain either keeping it B&W or mixing separate red, green and blue channels to vary the effect.
More Details and Downloads

NightVision

The NightVision plug-in can make any image look like the ones from night-vision goggles. By using the effects in this plug-in, you can make images look like they are from a black & white security cameras or CCTV, it's also possible to make them look like infra-red photos, or you can just use the interlace to make an image look like a TV picture.
More Details and Downloads

Nostalgia

The plugin selectively desaturates your image, but also gives a subtle change in hues. The end result is that some parts of the image become monochrome, while others take on a an unrealistic-looking coloration.
More Details and Downloads

Ornament

This a great free plugin, from Flaming Pear, it creates a quick-and-dirty 360° panoramic photograph with no strange lenses or image stitching needed.
More Details and Downloads

Panorama Tools

Panorama Tools is a free program which can be used to generate, edit and transform many kinds of panoramic images. It comes packaged with an added plugin called Realtime Panorama Editor (only Photoshop/Gimp version), which makes the Photoshop window an editable VR-viewer. You can pan left and right, tilt up and down, and zoom in and out. At any time you can use all the Photoshop tools to edit the image and instantly apply the changes to the warped panoramic image while keeping the interactive window open.
More Details and Downloads

Pastellise

Give your images a pastel effect with this simple plugin.
More Details and Downloads

Perspective Transformations

Sometimes it is hard choose the optimum angle to take a picture. If the object is essentially planar (e.g. a painting on a wall) or the angle is not off by much then there is hope that you can correct the perspective afterwards. The opposite may also be of interest if you want to make a composition and place objects at different angles, e.g. pep up screenshots for a brochure.
The Perspective plugin lets you carry out both active ("Modify” ) and passive ("Rectify” ) transformations. You can rotate the image around three axes, then reposition and resize it. Grid lines can be displayed both before and after transformation.
More Details and Downloads

Photo Tinter

"AS Photo tinter” is an image editing plug-in filter for extracting tone profile from toned black and white photos and applying extracted profiles to another photo. It is not yet another sepia effect - you may apply different tints to different areas of the photo, based on source brightness.
Homepage

Pinocchio

Pinocchio is mainly a fun tool to produce image distortions by mouse strokes. You can use it for caricatures and such. Just click on the preview image and drag in whichever direction, then use the sliders for fine tuning. This version lets you perform multiple mouse strokes without having to exit and reopen the plugin.
More Details and Downloads

Pole Transform 2.1

This plugin gives any image that cool Polar Panorama effect, aka "wee planets” .
More Details and Downloads

Posterizer

Posterizer is a plugin that gives you the option to posterize the luminosity and the hue of any image.
More Details and Downloads

Projection

This plugin gives you a collection of interactive perspective effects: the ability to tile an image into infinite space (copy or mirror mode), or to repeat all the edges The 3D effect can be achieved simply by moving the corners of the image (in the preview window).
More Details and Downloads

RedEyes

The RedEYes plugin removes the red eye effect often caused by a flash camera. It employs an easy-to-use semi-automatic algorithm that quickly and economically eliminates the problem.
More Details and Downloads

Retrodots

Retrodots is a simple plugin that generates dot grids which can be based on selections.
More Details and Downloads

ScreenWorks

The ScreenWorks plugin has 30 options for creating screen/mesh patterns. This provides you with a quick way to add small detailed and repetitive texture overlay effects to areas of your image in one easy step. The single slider setting gives you the option to add the chosen pattern on top of your image, or make the layer background white. (No MAC version).
More Details and Downloads

Seamless Border

With this plugin you can create a seamless border from any image. There are three modes: Compact overlaps borders of two tiles, and blends them in a linear way; Advantage: usually, creates the best continuity between tiles; Disadvantage: the size of the last tile may vary with the "Border Size” setting, and you will have to crop the result manually; Stretch: Unlike "Compact Mode” , tiles are first extended by stretching the borders; Mirror: Unlike "Compact Mode” , tiles are first extended by using symmetries.
More Details and Downloads

Seamless Workshop

Seamless Workshop creates a seamless tile from any image. You can also create a "surrealistic modification” of a picture, as in the image below. It is a powerful tool for texture creators, and a helpful toy for graphic designers. The unique 'Seamless Blur' effect can be useful for any available tileable pattern.
More Details and Downloads

Select Edges

The Select Edges plugin is a powerful tool for selective processing. You can select edge detail in your image for sharpening with Unsharp Mask without getting halos or switch to the inverse selection and use Gaussian Blur to diminish the background.
More Details and Downloads

Selective Saturation

This plugn, Selective Saturation, lets the user define a Saturation Zone by setting it's center and range with two sliders. A mask preview mode is available to fine tune the settings.
More Details and Downloads

Serious Fog

This plugin gives your image a fog-like effect. Using the 'Severity' slider controls the thickness of the fog, and the 'Whiteout' slider lets you suggest that maybe the sun will burn off the fog later in the day. Simple, yet effective.
More Details and Downloads

Smart Refinement

This plug-in enhances sharpness, depth-of-field (DOF) and noise (dust) reduction.
More Details and Downloads

Snowflakes

With the Snowflakes plug-in, you can make it snow any time of the year, anywhere you want. You can control all aspects of a snow, adjust the size of the snowflakes, choose soft snowflakes or hail, the quantity and density of falling snowflakes and even the color of the flakes.
More Details and Downloads

Soft Focus

This plugins applies a soft focus effect, which is often useful in portraits or fashion photography. There are controls to adjust the focus softness, the overall strength of the effect and the blending mode of the overlayed blured image.
More Details and Downloads

Soft Vignette

Vignette effects, where the edges of the image shade off gradually, are always a popular feature required by photographers. This plugin is feature heavy, you can adjust the gradient shape, sharpness, invert the gradient, select from 14 preset effects, choose a pattern, select the effect strenghth and, of course, you can adjust the height and width.
More Details and Downloads

Sorting Tiles

Fundamentally, this filter cuts an image into several blocks, sorts out the colors, redistributes and creates a complicated pattern.
More Details and Downloads

Stereogram Lab Filter

The Stereogram Lab Filter generates hidden image stereograms within Photoshop.
More Details and Downloads

SwapShop

A single plugin with 15 effects for switching the color values in your images. Useful for experimenting with interesting combinations and creating surreal results. Windows only.
More Details and Downloads

Techni-X

A plug-in filter for very high contrast B&W effects which are ideal for certain illustration work. It bleaches out most of the mid-tone greys, leaving crisp dark blacks and bright clean whites. It will produce clear B&W images with limited tones which are suitable for cheap reproduction via the office photocopier or when published in newsprint.
More Details and Downloads

Thredgeholder

The Thredgeholder plugin provides an edge detection that's simple to use but highly effective, just have a look at the screenshot below.
More Details and Downloads

Tone 1.0

This plugin can convert any image into an anti-alias tone pattern, similar to newspaper tones.
More Details and Downloads

Vibrations 1.1

This plugin has two different methods ("Levels” and "Lines” ) for creating a streak effect of your images . The filter has an inbuilt blur, in order to ensure smoothness.
More Details and Downloads

Water Ripples

The highly realistic water ripples effect designer has numerous options as well as an impressive 3D quality. The random settings generator produces unlimited variations of rippled surfaces.
More Details and Downloads

Weaver

This plugin creates a weave effect of your images.
More Details and Downloads

Xpose

Xpose is an exposure adjustment plugin, it is a quick adjustment tool that for highlights and shadows. With just a few sliders you can achieve better exposure of your digital photos.
More Details and Downloads

Tags - photoshop , plugin , filter

Windows Mobile 6.5 icon and theme design

Wed, 01 Jul 2009 04:03:29 +0000

这应该是我加入微软ATC-Studios以来第一次发作品上来，终于等到可以发布的时候了，因为要等到官方正式发布才行。这个项目做了大概有一年的时间，这段时间让我收获很多，从最开始的concept设计，反复的修改和完善，到最后Production和theme的设计，大家投入了极大的热情！特别是朱印的指导，每天5点钟review，每一次都能有新的发现和吸取，在那段时间里也是自己进步最快的阶段。

WM6.5一定有很不多不完善的地方，其实在设计中我们也经常烦恼，觉得US那边的想法实在难以理解，因为我们有很多好的创意都被cancel了。不过，能为这样一款遍及全球的软件系统的设计尽自己的一份力量，也算是值得欣慰的事。但愿以后还能有这样的机会，能用自己创造出来的设计给更多的人带来便利和快乐！

Tags - ui , icon , microsoft , windows , mobile , 6.5 , design , 微软

乐高搭建的北京奥运会

Fri, 26 Jun 2009 01:01:10 +0000

Tags - lego , olympic , 乐高

“时尚中黑简体”诞生

Thu, 18 Jun 2009 00:15:07 +0000

引领汉字设计创新传承中华传统文化

由时尚传媒集团自主设计的时尚字体——“时尚中黑简体”于2009年6月3日在时尚大厦隆重推出。“时尚中黑简体”也成为国内首家以企业名称命名的规范字体。“时尚中黑简体”是时尚传媒集团16周年的又一创举，在时尚界、出版界开创了企业涉足字体设计的先河，时尚传媒集团引领潮流、开拓创新的精神再次得以体现。著名设计师郭承辉出席了字体的发布会，并对“ 时尚中黑简体”给予高度评价：“简约唯美，整体感强，单字块性，排字线性强，合适标题、副文、导读之用字。为设计师个性化使用提供可变性。”著名学者王受之也对“时尚中黑简体”的诞生表示祝贺，称这是设计界的大事，并希望时尚传媒集团此举能够带动国内字体设计的高潮。

极富创意的“[体用·山水] ——时尚中黑简体创意推广展”也在发布会上展出。这组创意作品展由时尚传媒集团总裁吴泓、时尚传媒集团联合总裁刘江亲自策划，由曾设计时尚LOGO的天一公司总裁兼首席设计师郭承辉进行创意设计。吴泓先生亲手书写的汉字书法和时尚中黑字体在各种形态的石头上相映成趣，给观者一种独特的审美体验。

　　“时尚中黑简体”采用GB2312-80标准，含6763个汉字与ASCII字符94个。字体的设计良好地遵循了“时尚”LOGO字形的笔画规律和设计特点，保证了与时尚传媒集团品牌形象的统一性。整体字形笔画均衡，风格现代，字体方中带圆，端庄雅致，简约时尚。适宜用于时尚类企业形象、产品名称和广告标题类用字。此款字形为时尚传媒集团独家所有，是时尚品牌形象视觉部分的强力延展，是企业品牌识别的重要部分。

　　“时尚中黑简体”字库采用国内最先进的TrueType数字化字形描述技术，为使用者提供了极大的便利：支持几乎所有的输出设备；支持字体嵌入技术，保证文件的跨系统传递性；可兼容MAC和Windows操作系统，文件在mac上产生的最终输出效果与在Windows下的输出保持高度一致；在 TrueType字体中的每个字符都有其各自的字宽值，任何Windows支持的输出设备，都能用True Type字体输出。

　　“时尚中黑简体”是时尚传媒集团16年发展过程中的一个新标志。十六年前，时尚创刊时候的刊名“時尚”二字，是由一位设计师一笔一划用美术字画下来的，用的是繁体圆体；时尚十周年的时候，时尚特意邀请了王受之教授和著名的平面设计师郭承辉先生改了字体，并设计出了时尚logo。随着时尚集团的快速发展，时尚品牌在社会的影响力越来越大，很多公司纷纷盗用时尚logo字体。在一位网站设计师的动议下，时尚字体的设计也正式提上了日程。“时尚中黑简体”的诞生，成为时尚16周年的又一创举。时尚传媒集团拥有了以“时尚”命名的自主知识产权的字体，这在业界也是史无前例的。

　　同时，因“时尚中黑简体”自身版权的终身独有性，适当价位限量授权或者直接授权于任意商业环境，或终身或每年或单幅商业设计作品，对其收取授权使用费用。并且，此款字体属于美术创作范畴，时尚享有相应知识产权，具有排他性创作，可对后续同风格的创作作品和未经授权而使用本字体的任何商业企业和相关行为追究其版权责任，从而保护“时尚中黑简体”的商业价值。

我个人的体会是，从字形上实在看不出什么山水的概念，倒是蛮时尚的，可以作为内容前卫现代一点的文章标题和导读字体，字体的个体突出，中宫外拓，用在户外广告或者宣传册书名上面，应该很醒目。但是用在正文里就不大合适了，文字变小以后，显得不流畅，读起来很费劲。不过，在国内字体这么贫乏的环境里，能有这样一款优美的字体出现，还是一件值得高兴的事。以前在出版社工作的时候，就常常因为没有合适的中文字体用而烦恼，好看一点的字体还大多是繁体版本的。后来好歹出来了微软雅黑体，还是人家美国人投钱搞的，中国内地真的应该把字体设计好好重视起来。

Tags - font , 时尚中黑简体

Apple vs. Microsoft - A Website Usability Study

Wed, 10 Jun 2009 14:41:28 +0000

转载一篇非常不错的文章，主要从7个方面把微软和苹果两大公司的网站做了比较，到底谁更好呢？

Today we’re going to compare the websites of two monumental companies: Apple and Microsoft.

The two giants pride themselves for producing cutting edge consumer and business products, and are leading the developments in software and hardware.

But what about their websites? How do they both compare, and more important, which one is better and more usable?
Well, in this article we’ll take a look at both websites for closer examination from a usability point of view.

1. Homepage

The homepage is one of the most important pages of the whole site because it’s the first, and in many cases the only chance you get to impress the visitor enough to keep them browsing. You’ve got a few seconds to convince them that the site has enough value for them to keep using it, because if it doesn’t, the visitors will leave.

Apple’s approach to the homepage has been consistent throughout all the years that the site has been running. They use this page as a kind of advertising board that always shows a big ad of their latest product, followed by 3 other ads to another 3 products or news that is important at the moment.

If you’re not interested in any of the 4 suggested items, you can use the large navigation bar at the top, which is split into their core businesses: Mac, iPod and iPhone, followed by a couple of other important links, such as the online store and support pages. The navigation bar also incorporates a search field.

The interesting thing here is that the main ad at the top is huge — indeed it almost covers the entire page. If this doesn’t grab your attention then nothing will. Apple knows the importance of getting the customer’s attention using good marketing, so they’re not afraid to really go for it.

One other thing to note is the lack of content. You’re not distracted by sidebars, notices or extra navigation items — there are only a few items on the page, focusing your attention and making the decision of where to go next easier.

Microsoft has a different approach to their homepage. Firstly, they feature a similar style of ad at the top, designed to be attention grabbing. These are large images, but only one out of 3 ads is shown at a time — you have to hover over the other two to expand them. This focuses attention, but may potentially weaken the effectiveness of the two hidden ads since the visitor has to work to see them. Right at the top of the page is the navigation, together with search.

What’s below the main ads is more interesting though. As I mentioned previously, Microsoft’s business operates in many markets, including both business to business and business to consumer.

The space below acts as a set of highlights and news for these various areas of the business. One big problem with the content featured here is that it’s fairly boring and overwhelming, with a lot of information packed into a very small space, without anything try to make it scannable.

Sure, it’s broken down into bullet points, but the font is small and there are hardly any images to differentiate between the items. As it stands, there is little to attract me to make me want to read through this content because it’s just, well… boring.

2. Flow

What I mean by flow is this: is the site structured and laid out in such a way that I can easily find items to focus on? Do I know what to read after I focus on those items — is the site design directing me across the page with less effort on my part, or do I have to work to try and navigate around the content to find what I need?

Here’s the MobileMe section on Apple.com:

I think Apple has done a great job at structuring all of their pages. Here, the first thing you focus on is probably the picture on the right and then the large headline on the left.

After you’ve read the headline you can proceed to read the marketing blurb below, which leads nicely into a call to action signup button for the free trial. If you’re not interested in the trial, there are more features below to persuade you, each one ending with a “Learn more” link to a more detailed feature page. This leaves no dead ends and keeps the user browsing.

Microsoft seems hit and miss in this department. Here’s the SharePoint section:

Yes, there is a focal point at the top that grabs your attention — the large quote and the image of a server — but what’s next?

All of the content below is extremely monotonous, especially the “Learn More” box with a list of 8 links. The dry presentation gives the user less incentive to click around. Some Microsoft sites use better layout to direct the flow of attention, but they generally all suffer from the same illness: too much content.

When you present the user with too many choices, you make them work — they have to think about what they want and they have to process more information. By reducing choice, Apple directs the users through a more carefully designed funnel, which generally delivers a better experience.

3. Navigation

Apple’s website has a large navigation bar at the top, which remains there consistently whichever section of the site you go to.

The options available show the main sections split by its lines of business as well as a couple of essentials, such as support and the store. The bar also integrates search and branding as the home button displays the Apple logo instead of a label.

Any extra sub-navigation is located on individual site pages and is placed within the context of that page, whether on a sidebar, or as a horizontal bar at the top.

Microsoft has a similar navigation bar on the homepage, but that navigation bar is not consistent across the site. Actually, all of the sub-pages tend to use their own navigation bar, in style and in content. The homepage navigation thus acts as a site map to the rest of the Microsoft website sections.

In a lot of the navigation bars, including the one on the homepage, Microsoft uses drop-down menus — unlike Apple. They don’t just use drop-down menus — they use huge drop-down menus. In some cases, the menu even has a scrollbar (in Firefox):

Is this good or bad? In a recent Alertbox entry, Jakob Nielsen, a well known usability guru, has written that mega drop-down menus can work.

They work because they present a lot of choices in groups, so they allow for easier scanning as you can jump to the group that you want and scan the items inside them. You have to get certain things right though, like the order of the groups and only mentioning each element once, for them to work well.

In this case, I think it makes sense for Microsoft to go the route of the drop-down menus, but I feel that they may have gone a little too far. For example, some options point to the same thing, like the ‘Office’ drop down and ‘Office’ option in the ‘All Products’ drop down.

The drop-down also blocks the content below, so if you accidentally moused over the menu, you have to mouse off from it again to get to the content below — all the while being careful not to hover over other items.

There are also a lot of options under each group — sometimes showing about 13 items, which makes processing the options much more difficult. Also, the inconsistency of navigation across the different sections makes it much harder to jump from one area of the site to another, e.g from the Office site to the Xbox site.

4. Readability

Because most of the content on the sites is text, it’s vital to ensure that everything is readable and legible. Here are the main things to consider when working on readability of your site’s content:

* Make the text large enough so that it’s easy to see and read.
* Ensure that there is enough contrast between the text and background.
* Provide enough white space around the text to keep other content and graphics from distracting the reader.
* Provide plenty of headings or highlighted/bold text to allow users to quickly scan the content for key information.
* Add images and icons to make it easier to focus on individual sections of the text, i.e. product or feature descriptions.
* Keep the text short and to the point.

Let’s see how Microsoft and Apple fare in this area. Here’s a typical page on the Apple.com website:

Apple does a great job of keeping everything easy to read. The text is generally small, but never too small so as to be a problem. Headings are set in heavier type and stand out, allowing you to quickly get the gist of each section.

Apple also makes heavy use of white space to separate everything apart and adds images to make each text blurb more interesting.

Here’s a typical page from Microsoft.com from the Windows section:

It follows the general usability guidelines by breaking things down into small bite size pieces of text that are easy to digest. It looks a lot busier than the Apple site because there is more content on one page and there are many different treatments for headings and highlighted words.

Too much variety causes visual chaos on the page, with each different colored or bold item competing for your attention. In this case, the page really needs to be simplified to make it easier for the viewer to process.

Here’s another page, this time from the Microsoft security section:

The text on this page is probably a little too small to be comfortable to read, and the site needs more white space around the content to separate the text. Let’s see what a really busy page on Apple’s site looks like:

This is the Apple store. Really busy with lots of products and category links everywhere. Fonts get pretty small to allow more content to fit in, although good use of white space ensures things are still usable.

5. Search

Apple’s search is integrated into the navigation bar. When you type something in the search box you actually get live search results with AJAX, by way of a little box which pops up, showing you the results as you type.

It’s very well done — there is no lag when typing, the results are grouped in categories and are fetched very quickly, usually before you finish typing your full query. Here’s what it looks like:

If you want to see more results you can just hit Enter when you’ve finished typing and you’ll be taken to the standard search results page. It’s very clean and organized by categories.

You can drill the results further down by category, selectable from the menu on the right. It’s functional and clean, and works well when you’re trying to find any products that they sell.

Microsoft has a more familiar search results page that looks a lot like Google (or any other search engine these days).

That’s because it uses Microsoft’s own Live search engine. It’s certainly good at finding what you’re looking for and got the results that I wanted. The format of the results is one big list, which makes sense for Microsoft because of the nature of their business, with a lot of sub-pages and different content to search through.

It’s functional, but the look and feel is different to the other pages, which makes it look like you’re browsing a different website.

6. Aesthetics

Apple’s website aesthetics closely mirrors that of its product line. The navigation bar looks like it’s crafted out of aluminum and features gentle gradients and indented text.

There are also plenty of reflections and minimalist design elements. Apple has always worked on unifying the look and feel of its interface across its entire product line, from the hardware to software, and their website is no exception.

Do aesthetics have anything to do with usability? Actually, they do. Research shows that people perceive better looking interfaces as more usable.

Attractive interfaces will set better first impressions and may even make their users more tolerable to problems. So how does Microsoft fare in the aesthetics department? Here’s the Internet Explorer 8 page:

The site follows a faint Windows theme with the light blue clouds, but there is little else to say that this is a page for Internet Explorer or Windows.

The look and feel is very generic and doesn’t do enough to differentiate itself or build a coherent brand. Here’s another page; this is the Download Center:

Again, we have a completely different design, although the light blue color is used here too for the backgrounds. If there was no title on the page, could you tell that this is a Microsoft or Windows page? Probably not.

The designs are overall pretty good, but pretty good just isn’t enough. There are plenty of inconsistencies and a lack of polish, which puts Apple ahead in this area.

7. Consistency

Consistency is important because it allows you to develop usage patterns. This basically means that if your site has a consistent interface throughout, your visitors will quickly learn how it works and will be able to use this knowledge in any of the new pages that they visit, since they’ll all be using the same, or very similar, interface.

Apple does a great job of keeping the interface consistent. All of the product pages feature very similar aesthetics and are structured in the same way.

The whole site looks and feels the same throughout and the global navigation bar at the top is always there, on every page. This means that the entire experience is very unified and coherent — you know you’re on the same website wherever you go.

Here’s a Microsoft page for the Azure platform:

Could you tell that this is a Microsoft page if you took away their logo? Custom graphics, styles and color palettes across all the Microsoft sections help little to maintain a coherent brand image on the web.

Microsoft really struggles here. There are many different sections across Microsoft.com and they all feature their own look and feel, including their own navigation.

So once you go to a section on their site, be it the Microsoft store, the Office site, or the Security pages, they will all look and feel like separate websites.

What’s worse, the global navigation bar is also gone, meaning that you have to go back to the homepage, or the site map, to see an overview of all of their sites. It’s really an ecosystem of websites hosted under the same domain and therefore it doesn’t get the benefit of consistency that Apple has. The brand image is also terribly fragmented making it impossible to define what a Microsoft site looks like.

Conclusion

Which site is the winner? If you’re looking at usability alone, Apple comes out ahead. They have a better designed homepage that offers less choice, which means the user needs to think less.

They have consistent navigation across all of their pages. They use a lot of white space and sub-headings to make everything more readable, yet they keep things simple by not overusing too many different text treatments.

The Apple site is generally more user friendly and offers a much better experience to consumers who use it to check out Apple’s latest products.

Having said this, the Apple website is much smaller in scale than Microsoft’s site. Unlike Apple, Microsoft hosts many different sites and sections under the Microsoft.com brand, creating a whole ecosystem of sub-sites. Each site is packed with information and the Live powered search that Microsoft offers tends to yield good results. The biggest problem for Microsoft is consistency.

Microsoft just doesn’t have a consistent, coherent and unified brand. Every section looks and feels different. There is no global navigation and there are not many visual clues that tell the user that this is a Microsoft site — unlike Apple, where the whole site shares one unique aesthetic that mirrors that of their hardware and software, thus creating a powerful brand.

For these reasons, I think Apple is the clear winner here.
Tags - apple , microsoft , ui , web

2009年网页设计10大新趋势

Sun, 31 May 2009 01:11:38 +0000

网页设计是一个急速发展的新媒体，它的快餐式文化，使得网页设计在不断的尝试更新的设计理念，带给用户更多新鲜感。在过去的几个月，2009网页设计10大新趋势被确定。在这概况，你会发现审查每个趋势都有更加具体的举例，从中带给你更多灵感，激发你的下一个项目。

1. Letterpress 凸版效果

在我们的观察中，一个意料之外的趋势是，凸版效果(Letterpress，也就是我们的篆刻中的阴文效果)。这样的趋势，可能是因为一个简单的原因，因为这个技术很少被人使用。我们发现这种技术通过不同的样式应用在不同的网站上，多位在线服务网站。

2. Rich UI 交互式用户界面

令人感到欣喜，现代的网站用户界面已经逐渐变得更漂亮和更加易用。过去的几年中，这些基于网页的应用有了惊人的进步，这些交互式用户界面越来越像传统的桌面应用了。Ajax以及Flash技术的大量使用提供了用户各种非常炫目，强大的网页应用。

更看到一些特别之处，这些年我们发现网页上有了更多的空白空间，页面元素间的间距也变得越来越大。我们也观察到，越来越多的站点开始在页面上提供直观的用户动作响应。比如，页面上的按钮会根据用户的动作，比如点击响应不同的状态表示“正常”和“按下”状态。而且很多网站开始根据不同的用户产生不同的响应。所以我们断言，自适应用户界面将会在2009年流行起来。

3. PNG透明图片

PNG透明图片效果，尽管不被古老的IE6支持，但似乎在去年变得流行起来。但是这种半透明的背景效果却是设计师们一直希望拥有的特性。这种背景通常被用在头部和页脚处，但是有一些设计却跳出了这种窠臼。

4. 大尺寸的文字排版

在过去的文章中我们介绍过很多出色的大尺寸文字排版例子。在2009年，这样的潮流将继续流行下去，尤其是设计师网站，个人Portfolio网站以及在线服务类网站，将会采用这样的方式传递给用户最重要的信息。

这样的效果一般会将字号控制在36px以下，设计师们投入了更多的精力在文字排版的细节上，由此可见，网页将会变得更加漂亮，更加一致以及看上去更加让人可信。

5. 字体替换技术

设计师花了非常多的精力在页面排版上，同样的也花了很多精力在字体选择上，除了传统的那些经典字体，（译注：也是我们仅有的安全选择）很多设计师开始采用字体替换技术，也就是我们之前有提到的（sIFR）。

这些字体能大大提供网页的视觉效果，但是在中文世界中，这项技术遇到了前所未有的难题，汉字不是拼音文字，一个字体就可能有几兆，根本无法简单的使用这些技术来替换，也许文字图片替换法是目前中文的唯一选择。

[/color]
6. 模式窗口（LightBox技术）

模式窗口技术，作为第二代弹出内容技术。模式窗口（LightBox技术介绍）能够很好的代替原来的Javascript弹出窗口，提供更加友好的用户体验，并且引导用户的关注点集中到最重要的区域上来。通常由用户的点击触发，类似于传统的桌面应用。多数情况下，这些弹出窗口都带有深色半透明的背景和一个关闭按钮。

7. 多媒体模块
随着宽带的普及，现在的用户已经能够接受更多的内容，所以设计师们能够利用这样的契机使用一些更加吸引人的展示方式。因此很多网站开始引入多媒体内容（比如视频和屏幕录像）。这有助于迅速有效的让用户消化接受你想传递的信息。

这些视频能够很好的讲解你的网站的每一个步骤，不再需要多次点击，搜索，或者学习如何导航。通常这些视频长度都不会太长，但是内容要保持完整。

注意，绝对不能让这些多媒体内容成为你网站的全部或者是必不可少的部分，毕竟不是所有的用户拥有良好的网络条件，抑或是有些用户并不希望这种形式，有可能他正在机器上收听音乐或其他视频。

8. 杂志风格样式
在博客类网站设计中，我们发现一个有趣的现象是很多技巧都是取自于传统（印刷）媒体设计。包括文章的组织，页面的排版，插图甚至于文字的对齐方式都和传统印刷媒体越来越接近。Grid-Based（网格化）设计方式在产品网站，博客以及个人工作室网站得到了广泛的应用，但是在企业站点或者在线商店中还未有出现。

9. 幻灯片形式

Carousel，也就是幻灯片导航形式，内容水平或者垂直滚动。通常有两个导航元素来控制滚动方向，以及滚动内容。

这种形式的好处是，用户可以不用多次点击来搜寻他们感兴趣的内容，可以快速的通过滚动幻灯片来浏览希望他们注意的内容。这种形式多用于娱乐站点，或者是一些大型博客。是一种非常吸引眼球的展示方式。

10. 内容介绍模块

页面的左上角是网页上最重要的一块地方，因为最吸引用户的眼球。所以我们可以将最重要的信息放在那里展示，用户也能在第一时间获取这些信息。

对于很多个人工作室网站，或者是产品类的网站，都很好的使用了这个区域来展示内容介绍，相反在博客或者是在线商店类网站上几乎看不到这种方式。

Tags - web , design , css , inspiration

NBA all-star logos show

Sat, 16 May 2009 15:25:39 +0000

最近偶然看到2010年NBA all star的logo，顿时就觉得很喜欢，因为以前就一直认为美国人设计的logo很独特，色彩很鲜艳，商业味道很重。NBA之所以能够成为世界上最成功的赛事之一，有很大的成分来自于整体的形象设计包装。all star的设计就是其中一个非常有影响力的活动。从90年代NBA开始对全明星赛事有了具体的形象设计，东道主可以根据自己球队的特点设计出代表自身个性的logo。除了NBA，在美国还有像NHL(全美冰球联盟)，MLB(全美职业棒球联赛)等赛事都有类似的宣传设计。

2010年的全明星赛在达拉斯进行，因此logo无论是色彩还是字体，风格都展现了东道主达拉斯小牛队的特点。

我很喜欢这个牛仔帽的设计，呵呵



09年的all star logo，位于美国南部的菲尼克斯，沙漠、仙人掌成为主要的视觉元素。

08年的all star logo, 除了鸡翅，新奥尔良应该也是一个有音乐氛围的城市吧。

07年的all star logo最具特点，赌城的灯箱一下子就让人知道这里是拉斯维加斯。

06年的all star logo很火箭


05年的all star logo，色彩和字体几乎和东道主丹佛掘金队的视觉元素一摸一样。

赛事赞助商的logo

Tags - basketball , nba , all-star , logo , america

10 Incredible Wallpapers from Desktopography

Mon, 04 May 2009 14:43:33 +0000

A good way to start up a new week is to give your desktop a new look, no better way to do that than choosing one of the 10 incredible wallpapers from desktopography. They have the best selection of wallpaper I have ever seen and I have been using them for quite a while. Check them out and pick the ones you like the most, enjoy!

Photosynthesis

By Marian Rupp

Blue Moon

By Microbot

Lush

By Jerico Santander and Nik Ainley

Suburban Fantasy

By Jeff Huang and Jerico Santander

Zeroonethree A

By Matt Apostolescu

The Roadside Daydream

By Justin Maller

Memoir

By Jeff J.Y Huang

Step forward little tommy

By Dopamin

One day, in the big city

By Justin Maller

CVRD

By Phillipp Schilling

Tags - wallpaper , inspiration

为民主而设计

Wed, 29 Apr 2009 13:32:18 +0000

不知道今天大家有没有看美国新总统奥巴马就职典礼，如果错过了没看，那么就看看选举背后美国图形艺术协会（AIGA）所做的工作吧，或许会更有意思。

1998年， AIGA Design for Democracy （为民主设计）成立，旨在通过设计加强政府沟通手段的效果和效率，增强民众与政府间的互信以及民众的参与度。AIGA Design for Democracy 在2000年在伊利诺伊州的次级选举上小试身手之后，在2005年正式与美国选举协助委员会（EAC）合作，参与到全国的选举上来。

2000年佛罗里达州棕榈滩县的选票。Image by Sun-sentinel Graphic with modifications

AIGA Design for Democracy 最影响力的设计是对选票的重新设计。或许2000年选票设计的引起的风波还有人记得，当年因为佛罗里达州棕榈滩县的选票设计由于候选人序列和打孔点设计上不清晰，误导了部分选民，部分导致戈尔的失利，联系布什当选后的种种，倘若设计真的是关键原因的话，那么“设计失误导致整个世界遭了八年布什罪”的结论显得并不会太离谱，这大概也是史上糟糕的设计所带来的最大代价。

新旧选票对比。Image: AIGA Design for Democracy

左图是根据2004年各州大选选票的设计问题综合出来的一张样票，其中问题包括措辞繁琐模糊（比如用书面文和大量双重否定等）；文字大写和排版失误导致不清晰、可读性差；使用政党标志具有误导性；没有页码等等。还有的选票底端提醒投票者莫忘反面的警示语竟然是：停！（Stop）右图是 AIGA 设计的新选票，设计的清晰和易用性显而易见。重新设计包括了清晰的颜色区分，用了大量小写字体和优化的排版，去掉了政党标志，使用了简单的语言，增加了页码等等。

投票站双语导航设计。Image: AIGA Design for Democracy

屏幕投票 UI 界面设计。Image: AIGA Design for Democracy

AIGA 为 CEA 提交的长达266页的设计指导中还包括了投票站的导航设计和屏幕投票的 UI 界面设计，包括了英文和西班牙语、中文的样本。AIGA 还提供了选举设计的十个建议，也不妨成为其他公共设计的良好样本，供参考：

用小写字母：比大写字母更具可读性。

避免居中文字：居左的文字可读性更强，跳行较易。

用尺寸够大的字：可读性更强，读起来更舒服。打印文件最小12号字，屏幕最小25号字。

选择一个黑体（非衬线体）：避免使用新字体，使用笔画清晰的非衬线体，比如 Arial、Univers 和 Verdana。两种语言时，主要语言用粗体。

提供清晰的指引和导航：指引包括提供页码。屏幕设计提供语言和模式选择，确保用户始终可以得到指引，在投票站设计清晰的导航系统和指引资料。

使用清晰简单的语言：使用尽可能简单清楚的语言表达指引。一份文件中不要使用多于两种语言。

使用准确的指引图：避免使用照片，绘制指引图必须准确无误，避免误导投票者。

仅使用信息图标：避免使用政党标志。

使用对比和颜色：同时保持一致性，但颜色不能成为重要信息的唯一表达渠道。

决定信息主次：版面设计和文字大小要分清主次。

Tags - democracy , american , obama

新浪网启用新品牌标识

Tue, 21 Apr 2009 14:57:34 +0000

在新浪成立10周年之际，新浪网站上的品牌标识已经悄然更换一新。全新品牌标识的发布，体现了拥有10年历史积淀的新浪，将迎来全新发展阶段，全面呈现出新时期品牌内涵和经营理念。

与新浪此前沿用多年的品牌标识相比，新标识色彩与设计更为大气、灵动、亲切、时尚，让用户有一种喜悦亲近的感觉，新标志中的眼睛显得更加灵活，象征着网友可以通过新浪平台，更好地了解世界、洞察万象。

除此之外，顶着大眼睛的“i”，在新标识中形似一个麦克风，暗喻了新浪将为网友提供一个放大自身影响力的平台，网友可以通过这个平台，影响世界。

我觉得最大的变化还是字体，旧版的字体只是字库里的字体，类似于汉仪或者方正的字体做了一下倾斜的效果，我本人非常不赞成这样的设计，因为完全没有自身的特点和个性。新版的logo重新设计了字体，而且客观的说，这款字设计得没有什么缺点，很合理，很美观。

我现在也在设计“乐闻设计”的新logo，不知道什么时候能有一整块的时间把它顺利完成。

两处看似微妙的调整，巧妙地将新浪同时作为大众媒体平台和个人媒体平台的双重特性，很好表现了出来。记者注意到，新浪的品牌口号“一切由你开始”的字体明显加大，充分显示了新浪将网民需求和体验放在了更重要位置，喻示今后新浪网将以此为核心不断发展，在注重用户体验的同时，不断强化对用户多样化需求的满足。

从国际上知名企业发展历史来看，包括可口可乐和耐克在内众多企业，都会随着时代变迁以及业务变化，对品牌标识做适当调整。

新浪也同时表示，新标识发布，只是新浪整体变革战略中的第一步，后续还将通过实施一系列产品战略，来实现用户体验提升。新标识和“一切由你开始”的品牌战略，将不仅适用于现有的新浪，同时也将适用于合并分众以后的新浪。

新浪CEO兼总裁曹国伟对中国经济时报表示：“新浪一直非常重视用户需求和使用体验，并在过去十年中，坚持不懈努力创新，为用户提供更好的产品和服务。如今，新浪已经成为最具影响力平台，很多网友在这个平台上解决了需求、实现了梦想，但新浪并未就此满足，更换logo只是新十年的一个开始，后续新浪将会带给用户更多新惊喜。”

业内人士分析表示，以往用户对新浪的印象更多是权威、严肃和大气，此次新浪调整，很好体现了新浪在产品和服务方面的创新，在一定程度上拉近了与用户之间的距离。

新旧Logo对比
注：以上信息图片转自Reeckdesign

Tags - sina , logo

奥巴马的形象设计之路

Thu, 09 Apr 2009 13:13:18 +0000

Finally he wins!
最终，他获胜了！

视觉形象设计在一场总统选举中能发挥多大的作用？这似乎很难被评定。
但反过来，获胜的奥巴马在个人竞选标志、口号甚至字体方面仿佛都有过人之处。
起码，他在竞选的时候更细心，或者说他更会“利用”设计。

无论最终的胜者是谁，
在美国总统候选人的视觉形象设计方面，
巴拉克·奥巴马已经铁定是最大的赢家了。
这里指的并不是奥巴马身体力行地积极戒烟、参与运动，而是他特别聘请的平面设计师团体。
这个设计团体为选举立下了汗马功劳。

给政治人物做VI设计风险巨大，对任何一个平面设计组织而言，
这都是件棘手的活。同样，对大多数政治家而言，
设计行业变化多端、风云莫测，冒险不得，稳扎稳打才是关键。
看看希拉里和麦凯恩老掉牙的VI套路吧。

希拉里的超级保守 “”图形由红、白、篮三色组成 (这招是美国国旗诞生以来延续至今的传统了，
用过的总统不下几十个)，她选择了用波形曲线收尾的老式衬线字体(有罗马字母式样的勾脚)，
象征着传统与庄重。当然，用这来体现她的个人形象也无可厚非。

相比较而言，麦凯恩的VI算是有点新意，他用黑、白、黄三色构成带有军队风格的五星，提醒选民自己的越战背景，效果也较为显著的——闪耀的五星释放出了麦凯恩的“男子气概”。

奥巴马却不拘泥于此。

深知VI设计重要性的他，拒绝了政治设计的惯例，
别出心裁地邀请了一群新锐设计力量充当 VI设计的主力。
在平面设计师乔纳森·胡福勒(Jonathan Hoefler)看来，

“没有比奥巴马更会利用设计的人了”

除了仿照切·格瓦拉的形象，将奥巴马的头像制作成波普风格的海报等显而易见的大动作外，
设计团体还进行了大量细致入微而又不乏冒险精神的工作。

他们的目标是色彩、图形和字体要面面俱到，
无论它们出现在横幅、印刷品或者网站上，
都能触发选民们对奥巴马的好感。

在色彩上，奥巴马的团队选择的仍是美国国旗上的红、白、蓝三色，
并用其中最为令人放松的蓝色做底色，显然是为了消除选民对奥巴马相对缺乏经验的怀疑。

图形方面，一个太阳在美国国旗的红色条纹中冉冉升起，
“这非常形象，象征着希望、变化以及一个新的政治时代”，
艾克瑟洛德解释道。同时，这个近似“O”的图形还是奥巴马名字的首字母。
奥巴马的竞选口号是“改变就是我们的信念” (Change We Can Believe In)，
显然，如果一切都能重新开始，那么初升的红日就是最好的鼓励，一切都顺理成章。

值得一提的是，1983年，哈诺德·华盛顿(Harold Washington)
成功当选芝加哥首位黑人市长时，用的也是一个“日出”图形。

接着是字体。与希拉里的选择截然相反，奥巴马既放弃了衬底，
也不喜欢波形曲线收尾，他使用的字体看上去庄重又不失青春活力；
字母要么全大写，要么全小写，从而显得更友好。

随着竞选的发展，
奥巴马的VI中使用到的字母逐渐转变为全大写，
看上去更权威，字体则十分明智地从原先英国设计师
埃里克·吉尔(Eric Gill)20世纪早期发明的Gil Sans变成了更为时髦的美国现代字体Gotham。
人们都为此欢欣雀跃，Gotham字体“简直就是充满活力而又忠心耿耿的美国公仆的完美写照”。
受到上世纪4 0年代纽约盛行的手写字体的启发，
设计师乔纳森·胡福勒和托比亚斯·弗雷里-琼斯(Tobias Frere Jones)
在2000年为《GQ》杂志首创了“Gotham”字体，随后，
它们不仅被频繁地使用在有机食物的包装上，更被印刻到矗立在纽约世贸大厦
遗址上的自由塔奠基石上。选民们不是字体研究学者，
然而只需瞥一眼奥巴马横幅上的“Change”，
“Gotham”字体那种仿佛与生俱来的正义感、
责任感以及对“美国往事”的怀旧之情便会散发开来。

希拉里和麦凯恩都选择以不变应万变的VI, 以期给选民留下固定印象，
奥巴马则反其道而行之，以获取与每一群细分的选民的有效沟通。

艾克瑟洛德说：“在WEB2.0时代，我们要应对的是个性化的VI需求。”
出席各种不同场合都能随机应变，这就是奥巴马所谓“流动的VI”，
即便是在MTV颁奖礼或纽约第五大道上的Saks百货公司，
奥巴马的VI 都足够吸引眼球；而回到一本正经的市政厅会议，
奥巴马的VI又能从容“变身”，不至于“失体统”。

除了为每个州的选民定制化地设计了相应的“州标”外，
在奥巴马的个人网站barackobama.com上，针对各种族群以及
对各种事务持不同政见的选民，也会演绎出相应的标识图案。
比如环保主义者(Environmentalists for Obama)页中，
Logo变成黄色日光照耀下的绿色田野；

在孩子(Kids for Obama)的页面中，Logo变成用手写笔涂鸦的样子；

而在美国黑人(African Americans for Obama)那一页，
常规的奥巴马Logo后出现了隐隐约约的一大群人，你没法仔细辨认其中的任何面孔。

这些纷繁的变体设计，似乎也从另一方面印证了当代美国生活的复杂。
事实上，对奥巴马在设计中的良苦用心以及设计团队的殚精竭虑，
选民们用不着去一一解码，其效用不正在于最直接地获得选民们的好感吗？
无论如何得体的设计，正确的传达出奥巴马团队在不同阶段的需求，
获得了选民的认可，因此奥巴马也在公开场合表示对设计团队的感谢：

“是他们让美国选民认识了真实的奥巴马！”
Tags - vi , obama

The posters of HarryPotter VI

Sun, 05 Apr 2009 07:40:16 +0000

Tags - harryporter , poster

温哥华2010冬奥会主题海报欣赏

Tue, 17 Feb 2009 14:40:13 +0000

我很喜欢温哥华冬奥会的整体宣传的效果，色彩很和谐，显得很轻松很干净，有兴趣的朋友可以去官网上瞧瞧，它们的颜色虽然很丰富但是一点也不乱，处理的很到位，不会很突兀。
这些海报只是整体设计的一部分，所有的图形都是在illustrator里画的，都是很富创意的作品！官网上有一个视频介绍了这套海报设计的全过程。

http://www.vancouver2010.com

Tags - olympic , poster , vancouver , 2010 , illustrations

Logo Design Branding Trends 2009 2009年标志设计趋势

Sun, 08 Feb 2009 06:58:34 +0000

Psychedelic Pop Backgrounds 迷幻流行背景

A myriad of colours and shapes burst into the scene even if design classes still promote a decrease in complexity in favour of concept and essence. Again, this new development led to a no-holds barred position, putting everything out in the open, concealing nothing.

Every technological revolution inevitably gives birth to a romantic counter culture. But mixing these two by using 1960s psychedelic patterns as backgrounds for contemporary shapes is as postmodern as it can be.

What do the backgrounds whisper to us? You have a message in two parts: part 60's psychedelic, part Optical Art. The use of layering reveals Photoshop taking the vector lane. This approach is fueled by mood and emotion.

Psychedelic pop backgrounds are reminiscent of the flower power era, but they go beyond an ultra-modern, non-orthodox mindset. They are unpretentious and democratic. There is no arrogance, no snobbery.

A good majority of this year's trends do not translate well in print. Innovations in technology and the adoption of a variety of tools have made black and white printing no longer mandatory. Some clients are aware that when they choose a particular trend, they are potentially removing their logo's significant meaning and nibbling away at their appearance when transformed into black and white or when the logo is faxed. What do they get? They get powerful and colorful striking images in 90% of the other media.

各种颜色和形状一股脑的涌入你的视线，即使设计课程上仍然提倡减少复杂性将有助于表现概念和实质。同样，这一新的发展趋势导致了一种“不受禁止”的立场，即把一切公开，什么都不隐藏。

每一个技术性的革命不可避免地产生一个浪漫的反文化浪潮。但是，通过混合使用20世纪60年代迷幻图案作为背景和现代的图形，其实也是一种后现代主义。

这些背景在跟我们耳语些什么？您得到的答案包含两个部分：60年代的迷幻，和光学艺术。使用分层技术的Photoshop取代了矢量图。这种做法受到情绪和情感的辅佐。

迷幻流行背景会让人联想到那些如花般的权力时代，但他们超越了超现代的、非正统的心态。他们是谦逊和民主的。是没有傲慢的，不势利的。

这些年的趋势中很多都是对于付诸印刷并不友好。技术的创新和各种工具的采用，使得黑白印刷不再是强制性的。有些客户知道，当他们选择某种特定的趋势，他们的标志在被转换成黑白色或者传真的时候可能丢失一些重要的意义。而他们得到什么？他们得到了功能强大且多姿多彩的突出图像的90 ％以上的其他媒体。

Origami 折纸艺术

The desire to go back to basics is mirrored in the Origami theme; designers used it to display their skills.

An increasing number of designers wish they have real objects to work with when executing on their projects. The art of origami is fragile, light and subtle and the digital process is the same. It closely resembles minimal geometrical forms discussed earlier but constitutes more of a sub-trend.

Origami, however, evolved as a trend in its own way, because it was a process that appealed to a broader range of designers. The trend won't last too long, for the simple reason that the results are a bit too similar.

The advantage of this trend lies in the process. Designers need experience to get some of the process segments correctly. In spite of their clarity and simplicity, the logos will make the designer's presence predominant. Origami-based logos are a good choice for corporate monograms.

This trend brings back to mind the expression, "small but beautiful". Origami is the Japanese art of folding paper, but the goal is to use small folds and creases to bring about delicate and intricate objects. This can be a challenge for logo designers and this is why they put in much time and effort to come up with a logo that respects the objective of using small amounts to produce intricacy; this is why despite meager strokes, the designer's presence is strongly felt.

渴望回归本质是折纸艺术反映的主题;设计者也用它来展示他们的技能。

越来越多的设计师希望执行他们的项目时，可以面对真正的实体。折纸艺术是脆弱的和微妙的这与数字化的过程是相同的。它非常类似于前面讨论过的最小几何形式，但是它更象是一个子趋势。

但是，折纸艺术，以自己的方式确实成为了一个发展趋势。因为它正被设计师所更广泛呼吁。这一趋势不会持续太久，正如它简单的原因那样，结果有会类似。

这一趋势的优点在于过程，设计师可以在过程中体会到细节。鉴于他们的清晰性和简洁性，设计师将使得标志展现的更加突出准确。折纸形式对于字母组合型的企业标志是一个不错的选择。

这种趋势重新让我们回想起“小但是很美” 。折纸是一种折叠纸的古老中国艺术，目标是使用小褶皱和折痕来表现微妙和复杂的对象。这对于标志设计师来说可能是一个挑战，这就是为什么他们花费了许多时间和精力设计一个能够体现使用少量表现复杂的标志;这也是为什么即使有一些微弱的褶皱，依然能够是强烈地感受到设计师的存在。

Tactile Logos 触感标志

What sensations are triggered when you see letter installations crafted out of a variety of materials and then photographed? Does "cool" come to mind? How about "sensual"? Tactile means relating to touch or invoking the sense of touch. But tactile does not have to translate into tactless. What can't be absorbed by touch - texture - must be compensated for by the visual.

Logo designers who like to experiment with tactile logos want to change common textures in the real world. They may work well with their preferred software, but they also have no problem with the traditional tasks of cutting, painting and pasting. Actually it does take some smart maneuvers to make tactile logos influence viewers at more than the "touch" level. The texture and quality have to transcend the feeling of touch.

The process is a huge challenge even for the most experienced graphic designers. Creating type from real materials is a unique experience. The possibilities are endless. Designers feel they are walking on almost virgin ground and every creation looks like a significant breakthrough. Type installations are supposed to create a special mood and atmosphere. The results evoque craftmanship and tangibility not often seen in logo or type design.

How designers cleverly manipulate this tangible aspect so that it makes sense to even the untrained eye is pure talent. Tactile logos never cease to stimulate logo designers; these are the very type of logos that force them to retreat into the inner sanctums of their mind, translating what resides mentally into concrete strokes, regardless of whether these strokes are on metal, paper or on other types of materials.

当你看见字母或者图案从它在的介质中跃然而出是，你的第一感觉是什么？是不是会觉得很“酷”呢？会不会觉得很“感性”。触觉感就是要唤起你触摸时的感受。但触觉感并不代表这不得体。如果在触觉上无法吸引，比如纹理，必须在视觉上得到补偿。

喜欢尝试触感的标志设计者想要改变在现实世界中普通的纹理，他们可以在他们最爱的软件上工作的很好。但他们在传统的裁剪，绘画和粘贴等任务中也一样没有问题。实际上的确需要一些聪明的运用，才能使触感标志影响观众，超过“触摸”的水平。这需要纹理和质量都必须超越触摸的感觉。

这一过程是一个巨大的挑战即使是经验丰富的平面设计师也不例外。创建类似于实际材料的过程是一个独特的体验。可能性是无穷无尽。设计师觉得他们几乎正走在一片处女地上，而每一个创造看起来都是一个重大突破。目的是为了建立一个特别的情感和氛围。这种对于技能和准确性的要求在标志设计领域并不常见。

设计师是如何巧妙地操纵这一触感方面，以便让它即使是未经训练的眼睛也能立刻感知，这绝对是天才。触觉标志对于设计师的激励永不停止;它是那种典型的要求设计师反观他们思想的起源的设计，探询那些隐藏在固体的笔画之后的精神层面的东西。不管这些笔画是来自于金属，纸张或**各种类型的材料。

Arabesque 阿拉伯风

Designing a corporate identity using a beautiful tool like Arabic calligraphy may seem straightforward enough, but wait until you get to the execution process and you'll discover that it is a tricky undertaking. Why? Because this style inevitably requires heavy doses of gut instincts tempered with beauty. The designer has to make his logo echo the beautiful soul of the Middle East. The Arabesque is synonymous to majestic strokes that have to be delicately adapted to the desired corporate image.

This trend goes hand in hand with the revival of the figurative pattern that designers and non-designers have observed in the last few years: complex patterns forming perfect illustrations that express passion both on print and digital format. These beautiful creations come straight from the Middle East, but American and European designers are quickly catching up. The Arabesque solution is the answer to a designer's desire for uniqueness. The harmonious blend of ancient calligraphy and modern sans serif fonts works like a charm. What do you get? A surprisingly modern object with mass appeal; mass appeal that is far from cheap.

Logo designers who use the Arabesque style often have to be sensitive to one of the defining characteristics of Arab calligraphy: thick downstrokes and thin upstrokes with in-between gradations. There must be a fluid transition that communicates the designer's hand. No wonder then that Arabic calligraphy is considered a true art form. This means only one thing: there is no place for sloppiness and shoddiness, but there is plenty of room for harmony and connection.

使用一个美丽的工具比如阿拉伯文书法设计一个企业标志似乎足够直截了当，但在你执行过程中，你才会发现这是一个棘手的任务，为什么？因为这种风格必然要求很强的千锤百炼的对于美的本能。设计师必须使他设计的标志回应来自中东的美丽灵魂。阿拉伯风是辉煌壮丽的代名词，它必须被小心地运用在令人期待的公司形象上。

与这种趋势一同复兴的是繁复模式，在过去的几年里设计人员和非设计人员都已经观察到了这种现象：无论对于印刷还是数字格式，复杂模式都完美体现出热情的表达。这些美丽的作品直接来自中东，但美国和欧洲的设计师正在迅速赶上来。阿拉伯风为设计师渴望独一无二给出了答案。古代书法和现代饰线字体的和谐融合充满魔力。你明白了什么？令人惊讶的现代模型充满群众诉求，而这群众诉求却远非要求廉价。

使用阿拉伯风的标志设计者对于一个阿拉伯书法的特征必须很敏感：那就是厚的上行和薄的下行以及介于两者之间的层次。设计师的手必须传达一种流动的过渡。难怪阿拉伯文书法被认为是一种真正的艺术形式。这只意味着一件事：没有邋遢和混乱，只有和谐与联通。

Classic Modernism 经典现代主义

In 2008 classic modernism is back in style, considered by many as a foolproof method, the "safe" way to create logo design. 2009 will take us back to its most genuine forms where everything is somber and calculated, white space is cleverly used, and everything looks like it was done with ancient methods - like the computer was never invented.

In classic modernism, we have fundamental shapes, sharp contrasts, the smart use of white space and form following function (in an era where form tends to follow passion).

The focus of modernist logos is on the essential, where the concept and the execution of that concept are first and foremost the guiding principle. It can be diluted, no doubt, but the beauty of it is there is plenty of room for interpretation. The colors and shapes are minimal and strong. Transparency and photoshop weren't invented yet. These marks transmit a sense of trust, security and pragmatism and are accomplished with minimal resources. This is the designer's way of drawing attention to himself when everyone else in the design community is promoting a "shout it out loud" attitude.

What's surprising is that the absolute simplicity of this style is embraced by the youngest generation of designers,and with good reason.

If you're not sure how consumers will react to your logo identity, modernism offers you a historically proven safe channel, one that's not fraught with conflicting messages, jarring colors and shapes.

在2008年经典现代主义风格又回来了，它被许多人认为是设计标志的一个最安全可靠的方法。 2009年将把我们带回它最原始的形式，一切都是严谨的和精心计算过的，空白空间被巧妙地使用，所有这些看起来都像是使用了古老的方法，似乎计算机从未发明过。

在经典现代主义中，我们掌握了基本形状，强烈的对比，聪明的留白以及形成体现功能（在某一个时代的形式体现激情）。

现代标志注重本质，概念与概念的执行是第一位的，也是指导原则。毫无疑问它可能会被稀释，但它的美丽有很多解释的余地。颜色和形状要少而强。透明度和Photoshop还没有发明。这些商标传达了一种信任感，安全感和务实感，并以最少的资源做到。当设计圈里的人都在提倡一种“大声喊出来”的态度时，这是一个设计师提请注意自己的方式。

令人惊讶的是，有充足的理由显示这种绝对简单的风格正在被年轻一代的设计师所接受。

如果您不能确定消费者对您的标志标识做何反应，现代主义将为您提供一条由历史证明的安全通道，在那里没有充满相互矛盾的信息，与不和谐的颜色和形状。

Pictograms 象形图

Logo design must not only be an object or an image, a process or a mixture of colors and shapes, but also a problem-solving process.

We're seeing a strong trend towards integrating meaningful icons, the kind of icons that encompass the essential values of the brand, its message and its market position - in condensed form. Pictograms are the backbone of non-verbal multicultural communication. As they were taught in college, classically-designed pictograms are the perfect vehicles for companies desiring to communicate the message of "Here I am" instead of "let me tell you about my company."

This trend became pronounced after web 2.0 logos faded away from the design arena. At that time, it was more important to pay attention to the glitter and shine - the background on which the icon was mounted, instead of putting emphasis on the icon itself.

Sometimes the purpose of pictograms is to convey basic community values.

Pictograms date back many years, but they became popular at a time when service industries like aviation, urban planning and public parks had to provide citizens with important and helpful information in a language that was universal. If logo designers made use of pictograms, they had to make sure that they were just as effective.

Visual cues are key in pictograms. The logo must project itself as a natural and clear message to audiences. It should not give the impression that one needs a visual detective to de-code its elements. Pictograms put less pressure on viewers when it comes to deciphering a message; nevertheless logo designers must not neglect the aspects of aesthetics, originality and timelessness.

标志设计不仅应该是一个对象或一个图像，一个过程或混合的颜色和形状，而且也应该是解决问题的过程。

我们看到了一种强烈集成的、有意义的小图标的趋势。这些图标以简明的形式围绕着品牌的核心价值，信息和市场定位。象形图是非语言的多元文化沟通的骨干。正如在大学中所教的那样，经典设计的象形图对于希望传达 “我就是这样”而不是“让我告诉你我的公司。 ”讯息的公司来说，是完美的工具。

Web 2.0标志淡出设计舞台后，这种趋势变的明显起来。在这个时候，更重要的是要注意图标所在的背景，而不是把重点放在该图标本身。

有时，象形图的目的是要传达基本的价值观。

象形图可以追溯到很多年，但他们变的流行，是因为服务行业如航空，城市规划和公共公园必须以一种通用的语言为公民提供重要和有益的信息。如果标志设计者利用象形图，他们必须确保它们也同样有效。

在象形图中视觉线索是关键。该标志必须证明自己本身能够传达一个自然和明确的信息给受众。它给人的印象不应该是，人们需要一种视觉辅助去解码它的内容。象形图给观众判读信息时更少的压力;然而标志设计者也决不能忽视美学，原创性和永恒性。

80's Geometry Lesson 80年代的几何课

If there is one big no-no in graphic design, it is using complex geometrical shapes with a full color spectrum to create a logo.

As to whether the capability to fax a logo is good or bad does not matter. This argument could persist through the years but one thing is certain: this complex geometry will be here for awhile.

When this 80s trend first came out, it was a way of capturing the consumer's attention. The purpose was to design something completely different, regardless of costs.

Designers will not spare any effort; they will use their turbo-charged Macs to prove that in today's over-saturated market, they have carte-blanche to attract the attention of consumers.

For years, monster-like geometrical logos have been used by aggressive and self-centered companies to shout, instead of politely introduce, their industry presence. These abominable images made their appearance a few years ago and the perception at that time was they were nothing but child's play and hence not to be taken seriously. But observant designers and brand developers began to recognize their worth and started using them.

There's a certain irony about using a full color spectrum for these creations. The 1980s geometrical logos have come back in full force to contradict minimalism, under-design, and common sense simplicity. There's also irony in the fact that it's not the emergence of a 2008 high-tech 3D geometrical design observed last year; rather it's the geometry of that ever-popular Rubik cube!

There's a chance of course that this may not thrive and be adopted widely. Maybe they'll make a splash here and there to remind people that a hint of visual pollution and the inclusion of non-essentials could be an effective way of getting the message across. They may lack some conceptual beauty but you have to agree - they are fine-tuned, visually stable, and very difficult to reproduce.

在平面设计中有一大禁忌，就是不该使用复杂的几何形状以全彩色光谱来创建标志。

至于传真标志的能力是好是坏并不重要。这种争论可能会持续几年，但有一点是肯定的：复杂的几何形状将会出现一段时间了。

当这种80年代的趋势第一次出现时，它是一种引起消费者注意的办法。其目的是体现完全不同的设计，而无论其费用如何。

设计者将不遗余力，他们将利用他们超强的苹果计算机去证明，在今天的过度饱和的市场，他们仍然有能力吸引消费者的注意。

多年来，怪物般的几何形状标志被有侵略性的和以自我为中心的公司所采纳以宣传自我，取代了业界原本温和的自我介绍。这些几年前的低俗图案使他们的外表和概念在当时显得只是孩子们的游戏，因此没有受到重视。但是敏锐的设计师和品牌开发商开始认识到他们的价值，并开始加以运用。

这些作品使用全彩色光谱确实有点反常。20世纪80年代的几何图案标志的回归正在全力反击极简主义，under-design，和简单常识。同样反常的是，去年并没有观察到2008年高科技三维几何设计的出现，取而代之的是广受欢迎的魔方体几何图形！

这是一个机会但是当然这可能不会蓬勃发展并被广泛采用。也许他们会引起轰动，或者给人们以视觉污染的暗示，加入非必需品可能是一种有效的方式去传递讯息。他们可能缺乏一些概念性的美感，但你不能否认的是-他们是和谐的，视感稳定的，很难复制的。

Typographic Logos 印刷体标志

Somber and solemn? Yes. Trendy? No.

Typographic logos will never fade from the designer's sphere of vision because they deliver not only simplicity but also attractiveness - a sort of silent elegance. The powerful component of type, when used as an ornament, is highly visible.

Designing a typographic logo means combining the essence of corporate identity and the company's mission statement which have to be communicated through type only. This is not a task obviously for a debutant logo designer because a delicate balance must be achieved between corporate philosophies and the manner of projecting them with the appropriate type treatment.

No doubt there are thousands of fonts offered to designers, but a good designer will not succumb to the temptation of using pre-established fonts. The professional logo designer works from scratch, the way a patissier creates his ultimate signature mille-feuille.

Even modifying a pre-made font is not an option. This is the niche that typography enthusiasts guard with fervor. Typographic logos will consistently demonstrate manners, culture, and purity. The type selected must have the quality of adaptability, particularly when numerous applications are envisioned for the logo. Sadly, the best marks become adulterated when typographic support is not managed with skill and talent, and the rest of the graphic elements tumble down in quality.

忧郁和庄严？是。流行吗？不。

印刷体标志永远不会从设计师的视觉领域褪色，因为他们提供了一种不仅简单，而且有吸引力的无声的优雅。强大的字体组件，当用作装饰时，是非常引人注目的。

设计一个印刷体标志意味着要结合企业形象的本质和公司的使命，而这些只能通过字体传达。这显然不是一个为新手设计师准备的任务，因为在企业的理念和使用合适的字体呈现之间必须达到一种微妙的平衡。

毫无疑问，有数以千计的字体提供给设计师，但一个好的设计师不会屈服于预先确定的字体。专业的标志设计师工作时从无到有，如同做糕点的方式。

即使修改一个预定的字体不是一个好主意。但印刷体爱好者还是热衷此道。印刷体标志一贯表现出彬彬有礼，有文化，和纯洁性。选择的字体必须有适应性的能力，尤其是当这一标志被设想运用在各种场合。不幸的是，当印刷体不再是技能和天才的体现，图形元素也质量低下时，最好的商标也开始掺假。

Street Art 街头艺术

When you hear the words "street art" handmade graphics come to mind. Talented illustrators with street art backgrounds have artfully changed the wall painting spray with the Illustrator bezier tool.

Many people think of street art as a breath of fresh air - a welcome relief from digital computer art.

Street art logos have always been around. Indications are that they will be for a long time. They are the preferred medium for producers of extreme sports and manufacturers of sports gear and clothing. When abstracts are on the decline, but people still expect a nice story from logos, street art will regain its popularity. When designers want to create something original, they may opt for some of the trendy street art seen in recent years.

Street art speaks for the souls of designers: there may be hints of urbanism and perhaps a speck of subversion and activism.

When bold and bright street art is reflected in logo design, just let your mind travel across geographical locations: from the East Side gallery of Berlin, to the diversity of Melbourne and to the murals of Sao Paulo, Brazil, you'll discover that logos with street art are reminiscent of a place and time that have made a distinct impression on the beholder.

当你听到“街头艺术”这个词时，手绘就浮现在脑海中。具有街头艺术背景的天才画家使用特制的喷涂工具巧妙地改变了墙壁。

许多人认为街头艺术是一股新鲜空气-是受欢迎的从电脑艺术的回归。

街头艺术标志已经大行其道。有迹象表明，他们还将会持续很长一段时间。他们是极限运动厂商以及体育用品制造商的的首选媒介。当理论性的东西开始衰退，但人们仍然期望标志能够讲述一个不错的故事，街头艺术将恢复其受欢迎的程度。当设计师想要创造一些原创性的东西，他们就可以借鉴近年来的一些时尚的街头艺术。

街头艺术是设计师灵魂的代言人：可能是城市的暗示，也可能带着点对传统的颠覆和活动元素。

当大胆和鲜明的街头艺术反映在标志设计上，会让您仿佛穿越了地理上的方位：从柏林东部的画廊，到丰富多彩的墨尔本再到巴西圣保罗的壁画，你会发现，街头艺术的标志是一种对时间和地点的追忆，给予旁观者非比寻常的印象。

Puzzle Patterns 迷宫模式

When people exclaim, "the world's gone mad!" we think that logos have also followed suit. The proliferation of brands and the thousands more that emerge everyday make it clear that their visual impact has diminished.

How does one compensate for this diminished visual impact?

One way is for brand designers to tread into uncharted territories, going to places they never dreamed would be possible. What seemed like mission impossible two years ago is now de rigueur.

These Puzzle Patterns must evoke entire sagas instead of reducing elements to the essence of the brand. Most patterns highlight nature, and bringing nature to the screen is a recurring trend for as long as logos are designed on machines, away from nature itself.

Instead of going into the elemental essence of a brand, designers are using complex vector graphics to intentionally veer away from the rules. Their mantra these days is, "design has no rules." There is an undisciplined but skilful interplay of type, patterns and images. Restraint is out of the question. Anything goes with these puzzles: animals, letters, plants, insignias or random geometric forms are given full rein. No one's worried about meaning, because this unrestrained m?lange caters to a purpose that is strictly decorative.

At present, Puzzle Patterns are the ultimate anti-corporate battle. Don't be surprised however if in the years to come, big corporations going through a face lift will decide that they definitely need something DIFFERENT and hence will go with this trend.

当人们惊呼， “世界已经疯了！”的时候，我们认为，标志也在如此。每天数以千计涌现的品牌都清楚地表明，他们的视觉冲击力已大为下降。

如何弥补这一视觉效果的下降？

一个办法就是品牌设计师踏入未知的领域，去那些他们做梦也没有想到的地方。这在两年前似乎不可能完成的任务现在是很平常的了。

这些迷宫模式必须唤起整个传奇故事而不是减少内容只表达品牌本质。大部分模式突出本质，自从标志在机器上被设计出来后展示本质和远离本质总是一种循环繁复的趋势。

与以往深入品牌本质不同，设计师使用复杂的矢量图故意远离规则。现在他们的口头禅是： “设计无规则。 ”在这里不用遵守纪律，但凭技巧高超运用的字体，模式和图像的相互结合。克制是不可能的。任何东西都围着这些迷宫转：动物，字母，植物，徽章或随机几何形式得到充分发挥。没有人担心意义，因为这自由的风格只为迎合严格的装饰性目的。

目前，迷宫模式打响了最终反企业的战斗。如果在今后的岁月里，大公司打算整容，并决定他们绝对需要一些“不同”的东西，从而将跟上这一趋势时，请不要感到惊讶。
Tags - logo , trend

Olympiad Icons for GUI08

Sun, 30 Nov 2008 07:48:08 +0000

已经快一年没有发作品了，今年过得很曲折，比以前累，却也没忙出什么。这套icon是自己在业余时间做的，有时间就画一画，刚好碰到这次比赛的机会，整理了一下准备过几天就提交了。大家多指教吧！

下载页面：
http://www.guichamps.com/skin/139

对了，转载请注明出处

Tags - icon , gui08 , ui , olympic , illustrator

Spooky cartoon icons for halloween

Sun, 09 Nov 2008 15:45:09 +0000

David Lanham的新作品，以万圣节为主题的图标，还是延续了他原有的风格。

Author: Iconfactory
Download: http://iconfactory.com/freeware/preview/somason
Matching Wallpaper: The Last House
Tags - icon , david , lanham

How to Create a Box Cutter Style Vector Knife

Thu, 16 Oct 2008 13:06:31 +0000

In Illustration by Getulino Pacheco

Pathfinder is an excellent tool in Illustrator to build objects in a simple and fast way. In this tutorial, learn how to create a box cutter knife by using geometric forms, the Pathfinder tools, and adding volume and highlights with the use of gradients.

Final Image Preview

Let's have a look at the image we'll be creating.

Step 1

Let's start with creating the knife body. Open a rectangle with the rounded rectangle tool using just an outline. Use Free Transform and press in the upper right corner, while holding Command + Shift + Alt. Then drag the cursor down to make a symmetrical distortion.

Step 2

Select the created form and distort it by going to Effect > Warp > Bulge, but do not change any settings. The shape should look like the image below.

Step 3

Using Direct Selection tool, move the warp handles and shape it similar to the image below.

Step 4

Now we're going to create the cuts to shape up the knife body. Open a rectangle and place it on the upper part of the body. Open Pathfinder, select both forms, and apply Subtract From Shape Area.

Step 5

On the bottom left create an ellipse shape, open Pathfinder, select both forms, and apply Add From Shape Area . Now create the black lid by tracing a vertical line on the right, then select both forms and apply Divide. This will result into two separate forms.

Step 6

Start creating a triangle, this could be done by using a star form and altering the number of points. Alternatively this can be done by applying the star form while holding the mouse button down and then pressing the up and down keys on the keyboard.

Step 7

Now, copy and reflect the triangle vertically creating a gap. Next, create a rectangle and center in between them. Using Pathfinder, apply Add To Shape Area to unite the three forms into one.

Step 8

Duplicate this new shape by pressing Shift + Command, and then drag it to the left about 2 inches. Now blend them together creating a sequence. Use around twelve steps.

Step 9

Create a rectangle with rounded edges, then place it under (Send to Back) the blended shape. Select both forms and using Pathfinder apply Add To Shape Area to join them together. Place the created track over the body knife and use Subtract From Shape Area to create a hollow space. Fill both the body of the knife and the lid with the colors orange (#C94D26) and black.

Step 10

Place an ellipse over the knife, then create a rectangle and place it above as well. Select the rectangle and the ellipse, then open Pathfinder and apply Intersect Shape Area, which creates a curve shaped form; This is where we’ll place the grip.

Step 11

Create a rounded rectangle using the same color as the knife, then open the Brush Menu, and drag this shape inside to create a new scatter brush.

Step 12

Duplicate the form created in Step 11, then use the Eraser tool (Shift + E) to erase the bottom and right lines, which leaves only the arc. Then apply the new Scatter Brush to it by adjusting the space and size to make something similar to the image below.

Step 13

Fill the new grip shape and the arc shape created on Step 11 with the same color orange (#C94D260). Place them in the space they belong. Be sure those two shapes are on a new layer and below the knife body.

Step 14

Duplicate all the shapes created so far. Place them in a new document, Select All (Command + A), and set the Fill to None. We need only the outline (tip: to use only the outline in the blended objects you need to expand the appearance).

Step 15

Separate each piece and trace the lines with the Pen tool or Pencil tool, then Divide the parts, as the picture below shows. We're going to use those shapes to created the highlights.

Step 16

Select All and apply Divide, then select and delete the parts we don’t need to use. Keep only those parts we are going to apply to the highlights.

Step 17

Go back to the original file, then copy and paste these shapes. Apply a gradient to each part (use orange to white). Try to simulate the direction of light used in the composition (each part is different), then place them over the original area to create the highlights.

Step 18

To make the lid highlight, copy and paste the object, then reduce it. Apply a black to white gradient and place it over the lid.

Step 19

Let’s add some grip to the handle. First, create a rounded rectangle shape and fill it with a darker shade of orange, then place it just above the blade. For the lid create two rounded rectangles and use a gradient to simulate the volume.

Step 20

Select all parts of the image except for the blade and the gradient forms (highlights). Go to Effects > Stylize > Outer Glow, then set the Mode to Multiple and leave the rest at default values. Be careful to adjust each part individually so that they look realistic.

Step 21

Create two rounded rectangles (one is half the size of the other), fill them with black, and group them.

Step 22

Open a small square and fill it with black at 30%. Select it and press Command + C to create a copy, then Command + B to paste exactly under the original square.

Step 23

Many transform the lower square, as shown below, set the fill and outline to none - to make it transparent.

Step 24

Select both squares and drag them inside the Swatches panel to create a new pattern.

Step 25

Now copy and paste the group of black buttons, then set the pattern just created.

Step 26

Double-click the Scale tool in the toolbar, which opens the tools settings. Choose Uniform and use 40% for the Scale, also for the Options choose Pattern.

Step 27

Now double-click the Rotate tool, choose a 45 Degree Angle, and set the Options to Pattern, so that we can move the pattern and not the rectangle.

Step 28

Create a copy of this new patterned rectangle. Select and press Command + C to create a copy and Command + B to paste exactly under the original. Now we have to make this new copy darker than the original. Select the object and in the Swatches panel double-click the grayscale folder.

Step 29

Activate the Live Color option and drag the slider up and down until you see its a nice contrast. Move this darker portion a little bit to the left to create more volume.

Step 30

Now place it over the original button.

Step 31

To create more volume place three different gradients over the buttons. You can use half the size of the original. Place them over the original, but don’t forget to open the transparency panel and set the Blend Mode to Multiply.

Step 32

Create a rectangle using the Shear tool and give it a Shear Angle of 20 degrees.

Step 33

Place two lines over the blade shape to create the cutting edges. Select both the lines and the rectangle, then open Pathfinder and apply Divide.

Step 34

Fill each part with a different gradient. You can use three shades of gray. In this example use 30% black and -100 degrees angle on the main part. To create more volume change the settings for this gradient and apply it on the various cutting edges.

Step 35

To make the lines (slits) on the blade, create a rectangle and fill it with 50% black. Place a line on the left side and Divide it. Then select the smaller section and apply 10% black.

Step 36

Apply the Shear tool again using a 20 degrees angle. Duplicate this new shape by holding Shift + Command and dragging to the left about 2 inches. Now blend them together creating a sequence. Apply 9 specified steps, then place them over the blade.

Conclusion

Apply the blade in a new layer bellow all others and the knife is finished!

Subscribe to the VECTORTUTS RSS Feed to stay up to date with the latest vector tutorials and articles.

Tags - tutorial , illustrator

Create a Custom Mac OSX Style Ring Binder Address Book Icon

Thu, 25 Sep 2008 13:30:21 +0000

In Designing, Drawing by Martin Šnajdr

Introduction

Creating a good Mac OSX icon is not only about an idea or a sophisticated design, but also about the rules. When you are going to start with designing an icon for Mac OSX there are many things you need to know. First of all you have to read the Apple Human Interface Guidelines. It gives you a basic knowledge about the philosophy of Mac OSX User Interface design. The next thing to consider is actually what you want to create, so let's start making our own personalized icon for our Address Book app.
Lighting Theory

We start with a small theory about icon lighting. It's very simple to understand it. There are two sources of light - a sunlight as a strong light source and an environment reflection as a soft light source.

Step 1

Create a New Document that is 1024 pixels by 1024 pixels. To define a 512px by 512px rectangle (Leopard icon standard) add four guides (View > New Guide).

Step 2

Create a New Layer and add a rounded rectangle (with a 20px diameter) as a shape layer. This will be the main shape of the book. I would like to have a red book, so I am going to choose a red color as the fill color. Let's call this layer "Book Cover."

Step 3

The books or the papers of Mac OSX icons have a specific perspective, see the image below.

Step 4

Take the Direct Selection Tool (A) and select two corner points (always two). Then align them to our guides (and then hide the guides). Copy the "Book Cover" layer one more time and rename it to "Paper." We are going to use this layer later, so hide it for now.

Step 5

Double-click on the "Book Cover" to reveal Layer Style window and apply all the settings below. Don't forget to check Blend Clipped Layers as Group in the Blending Options.

Step 6

Create a New Layer, press Command + Alt + G to change the layer to a Clipping Mask. Select the Pen Tool (P) and make a dark blue wide line on the left. Let's simply call it "Black Binding" because the dark blue looks like a black color.

Step 7

Apply these settings on the "Black Binding."

Step 8

Add another two clipping masks to the book shape. These masks have to be under the "Black Binding" layer. Fill the first one with black. Next, go to Filter > Noise > Add Noise (apply an Amount of 75% and set the Distribution to Uniform). Also, change the Blending mode to Overlay and set the Opacity to 7%. On the second clipping mask apply the Note Paper Filter (with the Image Balance of 20, Graininess of 15, and Relief of 10). Change the Blending mode to Overlay and set the Opacity to 3%.

Step 9

Let's add some patterns to the "Black Binding." Create another two clipping masks, this time they have to be over the "Black Binding" layer, of course. Now we need to make a selection of the "Black Binding." So hold down Command and click on the vector mask of the "Black Binding." Fill the selection with a black color and apply the Graphic Pen filter with the settings below.

Step 10

Click on Extract (Command + Alt + X), and extract about half of the black strips from the white color.

Step 11

Change the Blending mode of this layer to Overlay and set the Opacity to 10%.

Step 12

Now we are going to repeat something from previous steps. So select the second clipping mask, which we created in Step 9. Do the same steps like in Step 9, but without applying the Graphic Pen filter. We are going to use the Note Paper filter as like as in Step 8, with the same settings (Image Balance - 20, Graininess - 15, Relief - 10). And again, change the Blending mode to Overlay and this time, leave the Opacity on 100%.

Step 13

The last thing we need to do on the "Black Binding" (and on the book cover) is to add some visible scratches. Create a new layer above all "Book Cover" clipping masks. Select the Brush Tool and a Starburst Brush (you can find it in Assorted Brushes).

Grab a black color, then make a selection of the "Black Binding" (Command + click on the vector mask), and click several times to the right border of the selection. At the end, create a new group, call it "Front Cover." Move all the layers we used to draw the book cover there.

Step 14

So let's add a back to our book. Copy the "Front Cover" group, rename it to "Back Cover" and move it under the "Front Cover" group.

Step 15

The "Back Cover" is almost similar to the "Front Cover." We need to hide only two layer effects. The first one is a Drop Shadow of the main book shape and the second one is a Bevel and Emboss of the "Black Binding" shape.

Step 16

Now it's time to use the "Paper" layer from Step 4. So reveal this layer and grab the Direct Selection Tool. What we are going to do now is to scale down the "Paper" layer. But as you can see, we won't be using Transformation because we need to retain the rounded corners of the paper on the same radius as the book cover corners. If we scale with Transformation, the radius of the corners scales too. Always, select two corner points and move them a little bit closer to the next corner. At last, change the fill color to white.

Step 17

Apply these settings to the "Paper" layer.

Step 18

To create five papers, copy the Paper layer four times. After that, place them as shown below.

Step 19

Create a New group, call it "Papers" and move all papers to this group. Place this group under the "Front Cover" group and over the "Back Cover" group.

Step 20

Something still missing? Rings, of course. So let's do them. First, create an ellipse with the Ellipse Tool (U).

Step 21

Subtract another ellipse inside the first ellipse using the Ellipse Tool (U) in Subtract mode (-).

Step 22

Subtract the hidden part of the ring shape using the Pen Tool (P) in Subtract mode (-). Name this layer "Ring."

Step 23

Apply these settings on the "Ring."

Step 24

To create a small reflection of the red color, duplicate the "Ring," clear layer styles, and apply these properties.

Step 25

Add a New layer, name it "Ring shadow," then go to Layer > Vector Mask > Reveal All. Click on the vector mask of the "Ring" and copy the path to the "Ring Shadow" layer. Select this layer and use a soft black 100px Brush with 20% Opacity to add a black color to the ends of the "Ring."

Step 26

Create a "Ring Eye" with the Ellipse Tool (U).

Step 27

Apply these layer settings on the "Ring Eye."

Step 28

Add a New Layer under the "Ring" and over the "Ring Eye." Create a selection of the "Black Binding." Take a black 50px Brush with 30% Opacity and paint a shadow under the "Ring."

Step 29

As you can see, it is necessary to fix the border of the "Ring." Create a New Layer over all the "Ring" Clipping Masks and fix it with a small black brush.

Step 30

Create a New Group, name it "Ring Layers" and put all the "Ring" layers there. Then copy this group and move it up. The shadow under the second "Ring" should be a little different so rotate it a few degrees closer to the "Ring." To get five rings repeat this step three more times (without creating a New Group though).

Step 31

Select the Pen Tool (P) and make a shape of a fold, as in the picture below.

Step 32

Apply the following properties on the "Fold."

Step 33

Duplicate the "Fold" four times.

Step 34

Ok, let's add a shadow to the book. I'm not going to transform and blur the book shape, but instead I am using only the Brush Tool (B) and the Erase Tool (E). I think this way may be harder for you, but I hope if you do your best, the result will be more real. You can also play with the opacity of this layer, an important thing is that the shadow shouldn't be too strong and dark (a swhite background helps us with this).

Step 35

Now we've done the book. You can use it as replacement icon for many applications, but if we want to use it as Address Book, we should add one more detail. It's going to be an at-sign as in original icon. So choose you favorite font (I love Myriad Pro), set the font size to 250pt and type the character "@."

Step 36

Then rotate the at-sign about 10° to the left...

Step 37

...and apply these settings.

Step 38

Copy the at-sign, move it a few pixels up, and a few pixels right. Clear the layer style, change the color to white, and apply the new settings. Don't forget to set the Opacity to 80%.

Tags - tutorial , psd , icon

苹果公司发布新一代产品

Tue, 16 Sep 2008 15:14:35 +0000

1.第四代iPod nano

此款新品采用铝制外壳，有多种颜色。容量有8GB和16GB两种。宣称是苹果公司迄今为止最薄的iPod产品。

乔布斯说，这是苹果迄今为至生产的最薄的音乐播放机，厚度不到四分之一英寸。配置8GB存储容量的售价为149美元，配置16GB存储容量的售价为199美元。

2.第二代iPod Touch

乔布斯展示了三种新版本的iPodTouch。这种产品外观很像iPhone，机身显得更薄，而且在侧面增加了音量控制键。只是不能打电话。配置8GB存储容量的售价为229美元，16GB存储容量的售价299美元，32GB存储容量的售价399美元。

3.新iPod shuffle

此款新品增加了四种新颜色。乔布斯说，自从2001年推出iPod音乐播放机以来，这种音乐播放机的销售量已经达到了1.6亿台，从而使iPod成为便携式音乐播放机市场的领跑者。

4.新版iTunes 8

此款新品加入了称之Genius的社会化音乐服务，如果用户在听歌曲的时候点击这个按钮，一个程序就自动从用户歌曲库中创建一个类似歌曲的新的播放列表。在提升用户体验的同时，此功能也会让用户购买更多的音乐。

在与NBC的交易中，这家电视网络由于对苹果对它通过iTune音乐商店销售的节目收取的费用有分歧，曾在一年前撤出了iTune音乐商店。现在，NBC 环球公司又回来了。NBC的电视节目将按照其它电视节目的相同的价格在iTune音乐商店销售。高清晰度节目每个售价2.99美元。标准清晰度节目售价为 1.99美元。老节目售价每个99美分。
Tags - apple , iphone , nano

HP重塑品牌形象推出新标志

Wed, 03 Sep 2008 14:17:35 +0000

HP最近在其推出的触摸屏电脑的电视广告上，启用新的标志，据猜测这有可能是HP为适应市场变化推出的新的标识，不过没有新闻发布会，也没有改变官方网站的标志，只是出现在不同的主流杂志，包括在线的广告。更多内容有待进一步证实。

新的标志顺应了web2.0的流行趋势，字体比以前更好粗壮，衬托在圆形发光按钮上，抛弃以前的倒角矩形。
Tags - logo , hp

Connection 第6期情迷哥伦比亚

Sat, 09 Aug 2008 08:54:44 +0000

为庆祝ReD52+的诞生及与设计师和商界的成功合作，一个名为「哥伦比亚激情」的展览在香港创新中心举行。诚意邀请了著名哥伦比亚设计师Jorge Restepo港与传媒见面，并有三十多位哥伦比亚的设计师的五十多幅作品展出。除Restepo外，ReD52+还邀请到香港小姐李珊珊参与展览的开幕仪式。在此次展览，ReD52+同时接受了香港各传媒，如苹果日报、MK Milk及MetroBox的采访。

ReD52+与Realiity合作，把设计转为行动，由Realiity制作出限量设计T-Shirt。为完美的结朿此章节，ReD52+在不同的地区，如比京、韩国、及泰国，将把哥伦比亚激情继续延续下去。

Tags - newwebpick , connection

starbucks coffees website

Sun, 22 Jun 2008 14:59:42 +0000
虽然喝不惯星巴克的咖啡，但一直很欣赏它的视觉效果，无论是店面的设计，还是产品的包装，当然还有网站的设计，这是星巴克的一个子网站，喜欢用粉笔画的那些小画，当切换到其他类别的时候，先前的背景图还在后面隐约看得见。

http://www.starbuckscoffeeathome.com/

Tags - web , starbucks , coffee

iPhone’s Second Coming

Wed, 11 Jun 2008 15:09:35 +0000

Well the second coming has finally arrived. The brand new iPhone version 2.0 was just announced by the master of marketing Mr. Steve Jobs. What is so “new” about the new iPhone? Here are the basic relevant features for your average user:

- 3G Network Compatibility (This means much, much faster internet access. A very needed update.)
- Extended Battery Life based on previous iPhone.
- Now comes in black and white.
- More memory. (8GB & 16GB)
- Flush headphone jack (No more headphone adaptors)
- Available in over 70 countries. (sorry Tennessee)
- Full GPS! (never get lost again…ever.)

Shipments start July 11th and will cost $199 for the 8GB and $299 for the 16GB.

看起来比之前的iphone在价格上便宜了很多，又多了很多功能。可惜目前在中国内地还没有销售，要期待一段时间了。

Tags - iphone

骨肉相连，同此国殇！

Wed, 21 May 2008 17:25:09 +0000

公元2008年5月19日14时28分，为了数万个在瞬间集体陨灭的生命，华夏山河呜咽，神州大地悲泣，悲伤的泪水，汇流成河。无尽的悲怆，一声声汽笛，长鸣的警报，是我们对所有逝去同胞不舍的呼唤，是我们对所有遇难亲人不忍的告别，是整个民族无限的痛楚和创伤，更是对汶川大地震所有遇难者最后的庄严敬礼！

Bless Sichuan! Bless China!
Tags - bless , sichuan , earthquake

EMI的LPCD封面设计

Wed, 23 Apr 2008 15:50:09 +0000

今年年初设计的东西，给百代唱片公司上海步升文化设计的几个方案，很遗憾的是目前项目终止，业已没有继续合作的希望，所以可以发上来晒晒。有些感觉我觉得还是挺有意思的，不过当时对方催促得很急，交稿时间也很短，没来得及深入调整，还有待完善。

Tags - design , cd , package , emi

icon设计的7个实用原则

Mon, 14 Apr 2008 14:57:53 +0000

大家看看哦，很有帮助！
Before approaching icon design there are some guidelines and principles that are worth studying. If you want to create effective icon designs, then you should take a holistic approach to issues such as: audience, size, simplicity, lighting, perspective, and style. This article gives you a good starting place for creating icons that work well together and fit seamlessly within your designs.

1. Approach Icon Design Holistically

Icons fit within graphic systems. Whether they are designed for desktop applications or websites, an icon is one of many graphic elements that need to work together harmoniously. Carry this logic across icon sets as well. Icons can be appreciated for their esthetic solutions individually, but they don't function alone. Evaluate your icon designs relative to the graphic system you're using them in. Make sure that each icon differs from surrounding icons, while still working together as a whole.

In the article Designing an iconic language over at Turbo Milk the author Yegor Gilyov states, "If you need to draw several icons, you need to think over images for the whole set of icons before proceeding with illustrating activities." This is one of two major points made in this article on icon design. He goes on to explain how failing to plan how the whole set of icons will work together from the beginning will ensure a huge waste of time, as redesign will be inevitable.

2. Consider Your Audience

You will have different considerations if you're designing an intranet for a small company, rather than for a product that may be sold internationally. When creating icons cultural considerations are important. Symbols may differ for common elements you may use for your designs.

Turbo Milk has another great article; this one is called 10 Mistakes in Icon Design. In it, they point out some clear examples of where many icon designs go wrong. They discuss national and social characteristics in point seven of the article. "It is always necessary to take into account the conditions in which your icon is going to be used. An important aspect here is national characteristics. Cultural traditions, surroundings and gestures can differ radically from country to country." They go on to give an example of how mailboxes differ greatly between countries. Apple uses the same example in its Human Interface Guidelines.

So, designing an international icon based on one country's rural mailbox design is a bad idea. Really specific example of what not to do. They point out how Apple's Mail icon is more recognizable as stamps have more cultural universality.

3. Design for the Size the Icon will be Used At

If you go vector and make your icon in Illustrator, there is an inherent temptation to scale the design, and try to use it at any size. This doesn't work with icons. What looks good at 512px looks like a blurry smear at 16px. Icons should have a base design that is used as a starting point, but each output size needs to have its own optimized design.

Icon design is not a one design equals scalable solution medium though. This is one reason that Photoshop is just as good a solution as other programs. For designers that make icons in Illustrator they are still going to clean them up in Photoshop, or jump through some hoops to get their icons to look good at small sizes when being output directly from Illustrator. So, don't buy into the myth that icon design is a purely Vector based medium. We are outputting pixels here after all.

There are also vector tools in Photoshop and masks that you can take advantage of that equal the scalable playing field between the programs. If you're equally versed with Illustrator and Photoshop you may find a workflow that goes well between the two programs. Consider using Smart Objects. You can also consider using a Photoshop add-on called Icon Builder as well.

The approach taken for small icons and large icon design is immensely different. Firewheel has a good article that covers the scaling subject called Icon Design: Bitmap vs Vector. Also, review this article on Icon Design Sizing over at Mezzoblue. It covers some inherent issues with designing icons for small sizes.

4. Keep Icons Simple and Iconic

With operating systems now having icons that scale to large sizes (512px by 512px is gigantic for an icon) the temptation grows to get illustrative with your icon designs. While a level of realism can add interest to an icon design, it should not supersede its ability to function simply and effectively.

Smashing Magazine has a great summary of the Apple Human Interface guidelines on Icon Design. The section on Realism in Aqua makes some good points about the limitations of realism in icon design and points out when symbolism is necessary. This section discusses the issues at odds between realism and simplicity in icon design.

Try not to overcomplicate icon designs. Be wary of placing too many items into an icon design, or overly illustrating an icon. I'm sure everyone is familiar with the common symbol for RSS icons. View the example below from Smashing Magazine. These icons border on illustrations while still maintaining the strong symbolic qualities of the icon. Overly illustrating and dressing up icons results in lower recognition though, especially at small sizes. So, be careful with putting to much into an icon design.

There are times when the aesthetic interest of the icon may be worth loosing some of its iconic impact; it's always a judgement call, and needs will vary with each design. Compare one of the icon sets below to a simpler RSS icon design, like the one here on PSDTUTS. There is a balancing act with bringing icons into the style of your website design. You want to add interest, and compliment the design, but not loose the iconic impact of the icon.

The icons below look really cool. It requires a judgement though as to whether the loss of some of the quick recognition of the symbol is worth the added design around the symbol. At a large size it works just fine, as they function similar to illustrations. At smaller sizes though, a less dressed solution may be preferable.

5. Cast Consistent Lighting, Reflections, and Shadows

It's important that the realism you add to your designs all function coherently. If you utilize a light source coming from one direction then stick with it. Or else you risk loosing the integrated design of your icons. Also, consider the light source of the design your icons will be placed in. If the light source of the icons is at odds with the website or application design your using them in then the design will appear amateurish.

In the Windows Vista User Experience Guide there is a section on icon lighting and shading. The guidebook gives really specific rules for the Vista Icon set. This gives more exacting standards for icon designers and insures a unified icon system. Following is a specific rule to see an example, "Use shadows to lift objects visually from the background, and to make 3D objects appear grounded, rather than awkwardly floating in space." There are many more rules in this guide.

6. Utilize a Limited Perspective

The range of perspective within your icon design set should work together. If you have icons being looked at from straight ahead then stick with that. If you place one at a specific angle, then make sure all the icons function that way. Imagine a camera being placed from a specific vantage point and looking at all the objects from the same perspective. This helps to maintain consistency in your icon designs.

A large scale design system, something like a software operating system, may need more flexibility than that though. Apple covers Icon Perspective in its Human Interface Guidelines. They have a more flexible use of perspective. "The various perspectives are achieved by changing the position of an imaginary camera capturing the icon." The image below shows the difference in perspective between an Application Icon (Top) and a Toolbar Icon (Bottom).

7. Create Consistent Icon Set Styles

Lighting and Perspective certainly contribute to the style of an icon. Though, there are many other factors that can contribute to the style as well. If you're trying to fit your icon into a grunge style website design, you'll likely be adding texture to the style of the icon's design.

Icon sets have unique features that make them stand out. In the Echo Icon Guidelines the set is describes as, "Echo is currently a new set of icons proposed for inclusion in Fedora. Designed with a dynamic perspective, Echo icons aim to appear more realistic while still maintaining a clean and simple design by utilizing high contrast and spots of vibrant colors." Another way that this set stands out is through the consistent use of outlines. See the image below for an example.

Get Started with Icon Design

Designing icons for websites is a good way to get started with icon design. Often, there are only a few icons needed for a site design. Start simple with a small website design project where you are required to design only a handful of icons, or less. This is a good way to gain some experience with icon design.

Start the icon design process with research. Consider the common symbolic metaphor used to describe the icon your looking to make. Sketch as much as necessary to lock down the concept. Compliment the style of the icon designs with the website design you'll be using them on. Consider the color, perspective, and graphic look of the site.

Hicks design has a quick SlideShare presentation on Icon Design. One section of the presentation covers his design process. It gives some great visual examples. Below is an example of the sketching step.

Tags - icon , design

提高Photoshop的水平的10个学习方法

Wed, 26 Mar 2008 15:06:57 +0000

这段时间一直在用photoshop设计东西，由于以前习惯了用illustrator，所以在使用PS的时候特别不习惯，效率很低。这几天在网上找到了这篇文章，发上来和大家分享一下，希望自己多多努力，能有些进步吧！

1 Start with something

I know this might sound obvious but you need to have something like some drawings, sketches, or an image rather than just a white page. Otherwise you will end up doing the same effects every time you try do design something. Get inspiration from sites like Flickr, there are some very good photoshop groups. Or just look for inspiration on the web. Below are some inspirational links. 2007 inspiration

10 Photoshop Masters

Masters of Illustration - Smashingmagazine

12 Invaluable Sites for Web Design and Design Inspiration

2007 Graphic Design Inspiration

2 Don't be dissappointed

Don't be dissappointed when your image or effect is not turning out the way you want, keep working. That happens with me all the time. When I first start designing, usually I get frustrated that my design is not becoming exactly what I had in mind. However it turns out that after I have all elements in my design it's easier to make it look the way I want.
3 Try to recreate the effects you like.

Every time I find an image that has an effect I like I save it and try to create that effect in Photoshop. The Fire effect I did trying to reproduce an Nike ad, and the gold effect when I saw a Jewelry Ad as well.

4 Read tutorials before start doing your design.

We usually go straight to Photoshop and try to figure out how to do the effect, it's nice but we can save a lot of time if we get some clues or ways to do that before we start the Photoshop work. There are very good sites where you can learn how to create all sorts of effects from gold text to glowing effects.

pixel2life.com

good-tutorials.com

psdtuts.com

veerle

100 Photoshop Tutorials

5 Learn how to use Masks.

I know this might sound odd but there are a lot of people that don't understand how to use Masks. So stop deleting parts of your image and start masking them. There's a very cool video that shows us how to learn Masks

6 Play around with filters

You can do all kinds of effects with them from blur to lighting effects. The most fascinating thing is if you mix some filter you always get a new result, like the Render Clouds.

7 Spend some time learning the Layer Styles

Layer Style is one of the most useful features in Photoshop. You can create amazing text effects without applying any filter or even touching the font.

8 Brush Engine

To be honest I had never payed much attention to this feature until 6 months ago when I was creating a falling star. After that moment I simply cant stop using it. You can create sparks, stars, clouds, and unlimited number of shapes. You can make your brush random or uniform, with different colors and opacity, and I could go on and on because the possibilities are endless

Very good video explaining how the Brush Engine works

Photoshop Brushes - Lynda.com

9 Listen and watch podcasts

I think podcasts are an excellent way to learn Photoshop. The Pixel Perfect with Bert Monroy is definitely a must see podcast if you want to learn Photoshop and Illustrator.

List of Photoshop Podcasts

Adobe Photoshop Quicktips - Video Podcast

10 Share what you have learned with everybody

I think when we learn something there's nothing wrong in sharing our skills. Besides of the fact that you can help others, you can promote your work and even get money from writing tutorials. Psdtuts.com pays you for each tutorial you write and then publish it if selected.

Your Design Forums

PSDTUTS - They pay you for tutorials

Flickr

Deviantart

Tags - tutorial , design , photoshop

Serverines Olympic Graphics

Tue, 25 Mar 2008 13:59:48 +0000

很久没有发自己的作品了，这段时间在为工作忙碌，也没有什么实质性的作品，索性就发点去年业余时间做的作品吧。这是为Serverine画的奥运插图，一共12张，当时画得比较仓促，可能有些色彩的搭配不是很理想，大家先凑合看吧。配合一下最近的奥运火炬传递活动！

PS：请不要说"版权"之类的无聊提示，设计作品只为学习交流，不做任何商务用途。如果转载请注明出处。

Tags - illustrations , design , olympic

Connection 第5期浪漫法国[I]

Sat, 22 Mar 2008 14:24:22 +0000

The free donwload url:
http://ezine.newwebpick.com/connection
Tags - connection , newwebpick , web , design

icon设计过程中需要注意的10种错误

Tue, 26 Feb 2008 14:53:11 +0000

一篇不错的文章，介绍了在icon设计过程中需要注意的10种错误，对于ui设计者来说，非常值得一看。
It is much easier to criticize somebody else’s work than to create something cool yourself. But if you apply a systematic approach to criticizing, make a numbered list and prepare illustrations, it will be regarded as a fully-fledged analysis! In my opinion, icon design is undergoing a transitional period. On the one hand, screen resolutions are increasing, hence enhancing icons. On the other hand, we still have good old pixels. Icons sized 16×16 and even smaller are still widely used. And so, here are the most commonly observed mistakes in icon design…

批评别人的作品比自己制作一个优秀的作品要容易得多。但如果你使用一个有系统的方式去批评，列出项目清单并准备好插图，它就会被认为是个成熟的分析！在我看来，图标设计正经历着一个过渡阶段。一方面，屏幕分辨率在增长，因此要提高图标品质。另一方面，我们仍拥有好的旧款图素。16X16乃至于更小的图标仍在被广泛使用。所以，这里为大家介绍一下在图标设计中很容易被观察到的错误。

1 Insufficient differentiation between icons/图标间差异不充分

Sometimes within one set of icons, we have icons that look alike and it is very hard to understand what is what. If you miss the legends, you can very easily get the icons mixed up.
有时，在一套图标中，我们的一些图标看起来很像，这让人很难分辨出哪个是哪个。如果你不注意说明，你会很容易把这些图标混在一起。

Icons from the Utilities section in Mac OS X. I am always getting them confused and launching the wrong application.
MacOS X中的图标。我经常把他们搞混以致选错程序。

The problem is aggravated by having small size icons displayed on screen.
问题在显示小图标时变得更严重。

2 Too many elements in one icon / 图标中元素过多

The simpler and more laconic the icon, the better. It is preferable to keep the number of objects in a single icon to a minimum.
图标越简单、简洁，就越好。把一个图标中的元素控制到尽可能少的数量是很可取的。

Nevertheless, Microsoft’s designers, inspired by the new format of icons featured in Windows Vista, decided to go big and drew bloated icons to justify their bloated budget:
然而，微软的设计师们，受到windows vista新的图标设计特征的启示，决定设计巨大、肿胀的图标来证明他们拥有庞大的预算。

Each icon presents us with a mini-story with an intertwined plot. The problem is that in small size you are unable to work out what is depicted. Even in larger sizes, it is not always that easy to decipher the icons.
每个图标用复杂的构图给我们展现出微小的信息，问题在于在使用小图标时你无法搞清它在描述什么。甚至使用在大图标时，有时也不是那么容易搞清图标的含义。

3 Unnecessary elements / 不必要的元素

An icon should be easy to read. The fewer elements it has, the better. It is better if the whole image is relevant and not only part of it. Therefore, you have to pay attention to the context of using icons.
图标应该被轻松识读。图标元素越少越好。最好让整个图像具有相关性，而不是只是一部分。因此，你必须注意使用这些图标的环境。

Let us take for instance some database icons:
让我们看看数据库中图标的例子：

At first glance everything looks alright.
一眼扫过，没什么问题。

But if this application (or a separate toolbar) deals only with databases, we can (and should) remove the unnecessary part:
但是如果这个应用程序（或者独立工具栏）仅仅与数据库有关，你可以（也理应）去掉不必要的部分：

The sense is not lost here but the icons become much more discernible.
含义没有丢失，可是图标更好辨识了。

Here is a real-life example of unnecessary elements occurring in BeOS 5 icons:
这是个BeOS5图标中使用不必要元素的鲜活例子：

Ticks here are absolutely superfluous. By the way, why are they done in red?
这里的对号绝对多余，另外，它们为什么是红色的？

4 Lack of unity of style within a set of icons / 一套图标的风格缺乏一致性

It is a unity of style that unites several icons into a set. The uniting property can be any of the following: color scheme, perspective, size, drawing technique or a combination of several such properties. If there are only a few icons in the set, the designer can keep some rules in his head. If there are many icons in the set and there are several designers working on them (for instance, icons for an operating system), then special instructions are created. Such instructions describe in detail how to draw an icon so that it fits straight into the set.
图标风格上的一致使得多个图标称为一套。一致性可以是以下的任何一种。色彩设计、透视、大小、绘画技巧或以上多种的结合。如果一套中只有一些图标，那么设计者可以把一些规则记在脑中。可是如果一套中有许多图标，或者有好几个设计者在绘制（比如制作操作系统的图标），那么就要制定一些特别的规则。这些规则需要从细节描述如何绘制图标，从而使其契合这个系列。

A multitude of styles in the shell32.dll file in Windows XP. This is the default set of icons suggested to a user wishing to change an icon.
WindowsXP中的shell32.dll文件中有大量风格，这是给希望更换图标的用户提供的默认图标

5 Unnecessary perspective and shadows in small icons / 小图标中使用不必要的透视和阴影

Progress does not stand still: interfaces have gained the potential to display semi-transparent objects, lost the limitation on the number of colors and there is now a trend towards 3D icons. But is it really all that useful? Not always! Especially if we are talking about icons sized 16×16 or smaller.
事物一直在发展：界面中已经可以呈现出半透明物体了。没有了颜色使用数量的限制，目前有向3D图标发展的趋势。可是，这真的有用吗？不一定！尤其是在16X16乃至更小的图标中。

For example, let us take the application manager from GNOME 2.2.0 (RedHat 9):
举例来说，让我们看看GNOME 2.2.0 (RedHat 9)的应用程序管理器。

Perspective in icons of such minute size is unnecessary and even counter-productive.
在这么小的图标中使用透视画法没有必要，甚至是事与愿违

And here is the application manager from Windows XP:
这是XP的应用程序管理器

As standard, icons in Windows XP are given a two-pixel black shadow; but in 16×16 size the shadow appears too large and makes the icons look dirty. The Address Book icon looks especially bad in this set.
作为标准，XP中的图标是用了2个像素的阴影，但是在16X16的图标中，这种阴影显得太大了，而且让图标显得很脏。地址簿在这种形式中显得特别差。

6 Overly original metaphors / 过于原创的隐喻

Selecting what is to be displayed in an icon is always a compromise between recognizability and originality. Before a metaphor (image) is developed for an icon it is wise to see how it is done in other products. Maybe the best solution lies not in coming up with something original but rather in adopting the existing solution.
在选择图标要表现的内容时，要兼顾易识别性和原创性。在一个隐喻（比喻）使用前，看看它在其他产品中的表现是明智的。也许最好的方式不是选择原创而是接受已有的方法。

An example of excessive originality is the bin icon in OS/2 Warp 4, which is not actually a bin at all but a shredder.
OS/2 Warp4中回收站的过度创意就是一个例子。它实际上不是一个回收站，而是一个碎纸机。

Another problem with choosing a shredder is that there is no one well-known type of shredder out there. The icon appears very much like a printer with an octopus hidden inside. What is more, it is absolutely unclear how a full bin would be displayed according to this metaphor.
选择碎纸机的另一个问题是，并没有一个类型著名的碎纸机。这个图标看起来很像藏着章鱼的打印机。而且，在这个创意中，满了的回收站难以表现出来。

7 National or social characteristics not being taken into account / 没有考虑国家和社会特征

It is always necessary to take into account the conditions in which your icon is going to be used. An important aspect here is national characteristics. Cultural traditions, surroundings and gestures can differ radically from country to country.
考虑到你的图标将被运用到的环境是十分必要的。一个重要的方面就是国家特征。文化传统，环境，手势在不同国家的意思可能完全不同。

Let us suggest that we need to draw an icon for working with e-mail. It makes perfect sense to use a metaphor of real paper mail. A mailbox for example.
让我们设想一下，如果我们要画一个关于电子邮件的图标。使用一个真实邮箱的创意是绝好的。例如以下邮箱：

These images are courtesy of the Wikipedia article entitled Post box.
这些邮箱图片选自维基辞典。

The answer can be found in the manual on creating icons for Mac OS X: "Use universal imagery that people will easily recognize. Avoid focusing on a secondary aspect of an element. For example, for a mail icon, a rural mailbox would be less recognizable than a postage stamp.
答案可以在MacOS X图标创作指南中找到。“使用可以被轻松识读出的全球通用图像。避免注重在一个元素的次要方面。例如：一个电子邮件图标，使用一个乡村邮筒比使用一枚邮票难认。

The idea of using a stamp is great but the use of the eagle red-tailed hawk image is definitely questionable.
使用一个邮票的创意很好，可是使用一个红尾鵟的图像显然是有问题的。

However, you need to account not only for national features… That reminds me of something funny. Once, we needed an icon for a data filter, which is often portrayed using the metaphor of a funnel. It was drawn like this:[
然而，你不仅仅要考虑国家元素。这让我想到了一些有趣的事。曾经，我们需要一个数据过滤器的图标。它一般被做成一个漏斗。它是这样画的：/color]

[color=#A0522D]The client’s response was as follows: "I do not really understand why for a filter, you drew an icon shaped like a Martini glass!"
委托人这样表示：“我难以理解到它是一个过滤器，你画了一个形状类似马提尼酒杯的图标。”

8 Images of real interface elements in icons / 在图标中单纯使用界面化图标

The manual on creating icons for Mac OS X warns us: “Avoid using Aqua interface elements in your icons; they could be confused with the actual interface.” But all in vain! For instance, take a look at the following icon:
MacOS X的图标创作指南告诉我们：“避免在你的图标中使用Mac Aqua界面元素。他们会对真正的界面元素感到困惑。”但一切都是徒劳。比如说，看看下面的图标：

You reach out to click on the radio button but end up clicking the whole icon!
你本要单击图标，可是结果点击了整个图标。

Here is an interesting example from the OmniWeb browser interface:
这是OmniWeb浏览器界面的有趣例子：

Pay attention to the Previous and Next buttons, a rare type of button with legends underneath. Oops! They are not buttons at all, they are icons!
注意向前和向后的按钮，少见的有说明文字在下面的图标。哦！它们根本不是按钮，他们是图标！

9 Text inside icons / 图标中的文字

This mistake is commonly seen in application icons. Clearly the first thing that comes to mind when working on an application icon is to adapt the application’s logo. What is so bad about the text inside the icon? Firstly, it is directly language-related and so impedes localization. Secondly, if the icon is small, it is impossible to read the text. Thirdly, in the case of application icons, this text is repeated in the name of the application.
这个错误在应用程序图标中很常见。明显，当使用一个应用程序图标时首先跃入脑海的是应用程序的logo。把文字放到图标里多不好啊！首先，它受限于语言而阻碍了本土化。其次，如果图标很小，读出文字就很难。第三，在有应用程序图标存在的情况下，这个文字在应用程序名字中重复了。

10 Outside the pixel framework / 边沿像素

As a rule, this problem occurs if you use a vector editor for drawing icons. In large size everything looks pretty and clear; but in reality the icons are small, and under rasterization anti-aliasing frets the objects’ borders.
作为一个规则，这个问题在你使用矢量绘图工具绘图时存在。在大的尺寸下，每样都很美丽和清楚。但实际上这些图标很小，并且物体边沿需要完成反锯齿栅格化处理。

可以与PS相媲美的5个苹果软件

Wed, 20 Feb 2008 13:37:07 +0000

Deciding on an alternative for Photoshop depends a lot on what you use Photoshop for. There are five apps that will give you some information about that are trying to compete head to head with Photoshop. Though if you have more targeted image creation needs there are some apps that may even be a better option than Photoshop.

1. GIMP: A Great Photoshop Alternative and It's Open Source

Gimp has a strong user community that supports its product, and a large feature set, though it has a different interface and way of doing things than Photoshop.

For those used to doing things in Photoshop, but who are interested in checking out this free software, look into Gimpshop. It's a modification of Gimp that is similar to Photoshop's user interface.

Download Gimp

2. Pixelmator: Young Application Though Growing Strong

Wow, their website is beautiful. You shouldn't buy software based solely on its brand design, but let's face it, it sure does help. Pixelmator is a young application, but has a growing set of features. For example, in their 1.1 release version, code named kitten, they've just added tablet based pressure sensitivity support. They have active forums, a downloadable manual for their product, and some juice moving them forward fast. Watch out for this app.

Download Pixelmator Trial

3. Corel Paint Shop Pro X2: Robust Application with Long Term Development History

PSP X2 is mainly targeted at photo editors. Though it has many features that a Photoshop user is used to, it is just a fraction of the price.

The new graphite workspace theme of X2 looks great and has a modern elegant feel. Corel is a large respected company and continues to develop PSP so you don't need to worry about this vanishing one day.

They have built in documentation for the products as well as online community support. They also have an option to test drive the product in your browser. I tried it and it worked well to evaluate, but of course that depends on your connection speed.

Download PSP X2 Trial

4. PhotoLine: Lots of Features but Lacks That Mac Like Feel

Photoline is positioned as a Photoshop alternative, it is a commercial app with a large feature set. Its fast, powerful, and stable. But a few issues that would make me hesitate before investing any time into the software. Their website lacks that professional feel that makes you feel confident about the software your buying. Their forums don't appear to be very active. Macapper does however give them high ratings and there is a Photoline Review there. Photoline has a few features where it may edge out Photoshop that are pointed out in this review, so it's worth a read.

Download Photoline Trial

5. Pixel Image Editor - Lone Developer Application

Pavel Kanzelsberger has been developing Pixel Image Editor in his spare time for the last eight years, and as we know from the popular Textmate, sometimes these lone developer apps can be great. Pixel looks like it'll deliver the goods too. There is a wide range of tools, lots of layers, effects and workspace options. I tried to follow a link to the Wiki and Forums and it went nowhere. So, no guarantee with community support on this one.

Download Pixel Trial

Tags - photoshop , software

ZCOOL官方的杂志《站酷志·零柒》面世

Mon, 28 Jan 2008 05:22:27 +0000

本期是站酷的创刊号，这本电子杂志共230页，24位国内设计师参与，整体的形式有点《newwebpick》的感觉。这次iconfans论坛的加盟设计师们作为GUI设计专版出现其中。期待他们做得更好！不过，目前好像没有mac版本的，有点遗憾。

杂志下载页面：
http://zmag.zcool.com.cn/z...

Tags - zcool , ui , book , newwebpick , magazine

Mark Olivers illustration World

Fri, 04 Jan 2008 08:13:51 +0000

Mark Oliver是英国深受小朋友们喜爱的插图画家，他的作品轻松、诙谐、幽默、充满了想像力，因此许多的出版公司约他为儿童图书作画。我非常喜欢他的矢量风格的作品，造型可爱、构思巧妙。

These pages are dedicated to Mark Oliver's work for children's books.

Tags - illustrations

2010年加拿大温哥华冬季奥运会吉祥物设计

Tue, 18 Dec 2007 01:35:39 +0000

2010年温哥华冬季奥运会组委会吉祥物当地时间11月27日揭晓。第一代华裔移民黄慧琪等根据卑诗省神话传说所创作的3个卡通形象成功入选。

冬奧会吉祥物的名字分别是：米加(Miga，原住民神话中的北极熊)、魁特奇(Quatchi，北美大脚野人)；而冬季残奥会的吉祥物则是名叫苏米(Sumi ，戴着虎鲸帽子的动物保护神)。另外还有一个陪衬吉祥物Mukmuk(一种稀有的温哥华岛土拨鼠)。Mukmuk并不是官方的正式吉祥物，但会在一些场合出现。

27日一早，温哥华冬奥筹委会与大温地区素里市800多名小学生一起揭开了吉祥物的面纱。此前，吉祥物形象一直属于高度机密。与北京2008年夏季奥运会相似，筹委会也选择了用一组而非一个吉祥物来阐释温哥华冬奥会。

据介绍，这三个形象的设计者是温哥华本土的设计公司——米奧米设计公司(Meomi Design)，其中一位设计师为第一代华裔移民黄慧琪。这3个吉祥物都不是真实存在的动物，而是来源于加拿大的传说。Miga的灵感来自于加拿大土著民族的传说，它是一只会滑雪板的北极熊。Quatchi是一只有着长胡子，戴着蓝色御寒耳罩的大怪物。不过可别被这个名字吓住了，它其实非常害羞，非常温柔。它的设计意图是希望能把加拿大的自然与神秘和奇迹联系到一起。Sumi则是用雷鸟的翅膀飞行的一只动物精灵，它肩负着温哥华残奥会吉祥物的使命。

温哥华冬奥筹委会一共收到了178份建议。在选择期间，咨询了许多小孩子的意见，最终由这三只可爱的动物胜出。筹委会希望吉祥物会受到全世界儿童的欢迎。接下来，吉祥物的形象会出现在冬奥会的宣传广告、官方网站和出版物中，并且会制作成胸章、填充动物等等。

Quatchi is a young sasquatch who comes from the mysterious forests of Canada. Quatchi is shy, but loves to explore new places and meet new friends. Although Quatchi loves all winter sports, he’s especially fond of hockey. He dreams of becoming a world-famous goalie.

Sumi is an animal spirit who lives in the mountains of British Columbia. Like many Canadians, Sumi's background is drawn from many places. He wears the hat of the orca whale, flies with the wings of the mighty thunderbird and runs on the strong furry legs of the black bear.

Miga is a young sea bear who lives in the ocean with her family pod, out past Vancouver Island near Tofino, British Columbia. Sea bears are part killer whale and part bear. Miga is part Kermode bear, a rare white bear that only lives in British Columbia.

Tags - poster , illustrations , mascot , olympic , vancouver , 2010

Connection杂志第4期——德国之夜

Thu, 22 Nov 2007 00:59:56 +0000

本期内容

Germany Night

A international web designer union and community of international web designers, is one globe designing information focusing on the website designing.

下载链接



Tags - newwebpick , connection , design , web , magazine

Dalian Shide FC icons Design

Mon, 12 Nov 2007 02:33:17 +0000

这是我设计的一套关于足球的系统图标。因为工作很忙，所以制作的周期比较长，断断续续的，大概花了两个月的时间，其中个别几个图标是很复杂的，比如球鞋、摄像机、足球等。希望大家对我能提些宝贵的意见和建议，毕竟这是我第一次制作icon设计，还需要很多经验。

有几个图标还是有一些小创意的，我一直希望设计的东西能有独特的地方，同时又具有易用性，使理念和实用性达到最佳的标准。

These icons are inspired by Dalian Shide football team, which is one of my favorite teams. I used Adobe illustrator for this creation. Any comments and suggestions are welcome.

Tags - football , design , icon , dalian , ui

Who are they?

Tue, 30 Oct 2007 02:18:03 +0000

乌拉圭报纸《La Diaria》的广告。画面效果有点像点彩。
把图片缩小或者离显示屏远一点，你就能看出其中的奥妙来。

Reality is complex. To understand it, you have to keep some distance. La Diaria. The independent newspaper.

Client: La Diaria Newspaper
Agency: Corporacion JWT, Montevideo
Copywriter: Leandro Gomez / Manuel Amorin
Art Director: Leonardo Varela

画面里出现的四个形象分别是：教皇、赖斯、卡斯特罗和拉登。
文案的大意是：现实情况是复杂的。要了解它，你要保持一定的距离。

Tags - illustrations , poster

Blog Design

Mon, 22 Oct 2007 03:23:45 +0000

最近为设计部做了一个博客，是根据wordpress的模版修改的，自己局部修改了一些简单的css语言。虽然是简单的调整也足够把我忙坏了，因为我对编程的语言可是知之甚少。有机会一定好好研究研究，争取能独立设计一套模版！

大家有时间可以去看看，刚刚建好，需要人气！

http://blog.fltrp.com/shej...

Tags - web , css , html

guilherme marconi的作品

Tue, 16 Oct 2007 08:33:07 +0000

Guilherme Marconi 是巴西的插画设计师，他的插画作品，色彩绚丽明快，线条优美流畅，元素很丰富。
我发现巴西的插图产业还真繁荣，有好多自由插画者，不知道中国的插图市场什么时候能像人家那样规范。Guilherme Marconi的作品大多是矢量勾出来，说明他是个很细心的画家，能把握好这么多复杂的元素实在不易。

Tags - illustrations

芬兰插图师Sanna Annukka的作品

Thu, 27 Sep 2007 07:19:57 +0000

Sanna Annukka是一个喜爱自然和民俗的插画家和平面设计师。在芬兰的一个名为Paltaniemi的村庄2005年7月Sanna Annukka从英国布赖顿(Brighton)大学毕业，拿到绘图(荣誉)学士学位。在完成了大学学业后，她开始了丝网印刷。在此期间她创建了一系列的名为《我是少女》限量版的丝网作品。现在Sanna Annukka在伦敦的Islington一个叫Hygge的设计商店开始卖自己的印刷作品。

Tags - illustrations , book

07篮球世锦赛海报

Fri, 21 Sep 2007 09:09:38 +0000

2007年欧洲篮球锦标赛的海报，很有创意吧？四支夺冠的热门球队西班牙、德国、希腊、立陶宛。不过，有意思的是最后拿到冠军的是基里连科率领的俄罗斯队



Tags - basketball , poster