图标设计技巧与灵感教程

《图标设计技巧与灵感教程》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、图标设计技巧与灵感教程来源：uimaker.com作者：jeedoo发布日期：2011-04-19100次阅读  在过去10无数的图形用户界面（GUI）开发中我们看到了很多图标集。图标是生活中的基本元素以及任何精心构建的界面系统的驱动力。回到Windows2000/XP的时代，我们就看到图标在我们的数字生活中变得更加普遍。不仅仅在软件上有爆炸性的增长，在网络应用程序上也一样。美术设计师瞬间就可以获取成百上千的图形学和矢量设计方面的教程。在这篇短短的文章中我将讲述一些技巧以给那些对图标设计感兴趣的人一个好的开头。这是一个当前媒体没有关注的棘手的话题。练习A

2、dobePhotoshop不管你如何进行图标设计你都必须花一些时间在工作在AdobePhotoshop上。它是进行网页模板，页面美工，横幅，特别是像素基础的图标创作日最重要的软件套装。通过Photoshop练习，你可以掌握一些通用的工具集并熟悉艺术环境。即使你（最先）不是要创作图标，依然需要练习和耐心。事实上对于初学者来说Photoshop比起类似软件如Fireworks或IIIustrator是简单很多了。栅格是设计图标的一个重要概念，事实上对于任何图形来说都是。当为网站起草一个布局模型的时候它非常有用，他可以作为辅助线和标尺来限制页宽，和模型，文字域

3、等等。图标也很类似，你需要将它们设置到指定的大小。下面是图标最常见得尺寸：·16pxx16px·24pxx24px·32pxx32px·48pxx48px·72pxx72px·128pxx128px当你排除重重困难为诸如iPhone/iPad这样的领域设计时，你会发现自己被限定在一系列的限制范围内。比如，每个iPhone/iPad应用的图标在封面视图时会被缩放到512px*512px——这是任何软件品牌中最大的样本尺寸。练习草图作为一个设计师我觉得手绘示意图的能力是再重要不过的了。我曾经预想过很多布局和页面图像，仅仅是从我脑海里的框架开始。只需要有简单的

4、铅笔和纸你就可以在一个空白的画布上记下你所有的想法和想像。图标设计特别适用于这种考虑工艺本性的行为。相对于你有了大致的想法后再开始，直接打开Photoshop就开始创作是非常困难和受限的。事先计划是自由和成功的关键。如果你想法枯竭，草图也是最能给你一些帮助东西。它不需要进行到非常细节的程度。你只要自己觉得合适并且知道还需要多少工作要做。可能你只需要一个粗略的想法，比如你最终的作品会长什么样，可以去掉阴影，光泽以及其它效果。利用透视法制作图标需要你暂时走出条条框框并只考虑你希望你的作品看起来是什么样的。最终你的工作的理想情况是产生一个独特的，格式化的图标。

5、它可能是一唯空间的或者甚至包含突出和阴影。考虑你的用户会如何观察你的图像的边界。不论是从设计师还是从用户体验的观点来看，你的图标应该给人以什么样的感觉是非常重要的。尝试避免任何过度复杂的形状地貌模式，它们可能会扭曲最终的效果或产生混乱。简而言之，如果你需要一个信封用于邮箱图标，那就简单地创建一个信封。确保它非常明显且当放在文字边上或在浏览器内部时它很突出。然而我们并不需要全力的去追求太多的特效。图标已经成为所有出色的用户界面的标记，延续简单这种强大的立足点是非常重要的。避免覆盖文本一般来说在图标设计中放置文字或字母是一个很大的禁忌。它通常会引起多方面的问

6、题，而最大的问题就是调整尺寸。如果你用清晰的文字创建一个512*512的图标，它可能会达到一个极限，这时调整尺寸就行不通了。这限制了你的品牌发挥到极致，并且对于较小像素的图标需要重新设计。更需要注意的是要避免使用小短语或副标题，因为在大多数的转换之下它很难很好地传承下来。唯一可以适用这个规则的情况可能是首字母缩略词或者缩写。如果你运作的公司叫做GlobalInternetBank，你的图标采用字母GIB可能会被认为是闹着玩的。这当然也是当前很多情况正在使用的方式，虽然这种方式已经是很古老的了。我们在矢量绘图上看到无数的创意，这些创意可以比加大，加粗分散的

7、字母更加突出。图标画廊下面是一些从Dribbble的画廊里找到的杰出的图标设计的例子。所有内容都链接到他们原始的资源并提供了很多普遍趋势的观察。图标艺术设计入门并不容易，但是如果有一些帮助和正确的灵感所有目标都可以达到！GMailPokkiFinalUI：FastFood：HelloMac!：SocialIconSetv1：OSXDeveloperBoard：CoffeeCatIcon：FootballIcon：GameOn：Mustache：BeginDownload：Calendaricon：Conceptforcookingapp：iPhoneIc

8、on：NoutesApplication：CardboardBox：Japane