图标设计技巧与灵感

在过去10无数的图形用户界面(GUI)开发中我们看到了很多图标集。图标是生活中的基本元素以及任何精心构建的界面系统的驱动力。
回到Windows 2000/XP的时代,我们就看到图标在我们的数字生活中变得更加普遍。不仅仅在软件上有爆炸性的增长,在网络应用程序上也一样。美术设计师瞬间就可以获取成百上千的图形学和矢量设计方面的教程。

在这篇短短的文章中我将讲述一些技巧以给那些对图标设计感兴趣的人一个好的开头。这是一个当前媒体没有关注的棘手的话题。

练习
Adobe Photoshop

不管你如何进行图标设计你都必须花一些时间在工作在Adobe Photoshop上。它是进行网页模板,页面美工,横幅,特别是像素基础的图标创作日最重要的软件套装。
通过Photoshop练习,你可以掌握一些通用的工具集并熟悉艺术环境。即使你(最先)不是要创作图标,依然需要练习和耐心。事实上对于初学者来说Photoshop比起类似软件如Fireworks或IIIustrator是简单很多了。

栅格是设计图标的一个重要概念,事实上对于任何图形来说都是。当为网站起草一个布局模型的时候它非常有用,他可以作为辅助线和标尺来限制页宽,和模型,文字域等等。图标也很类似,你需要将它们设置到指定的大小。下面是图标最常见得尺寸:

16px x 16px24px x 24px32px x 32px48px x 48px72px x 72px128px x 128px

当你排除重重困难为诸如iPhone/iPad这样的领域设计时,你会发现自己被限定在一系列的限制范围内。比如,每个iPhone/iPad应用的图标在封面视图时会被缩放到512px*512px——这是任何软件品牌中最大的样本尺寸。

练习草图

作为一个设计师我觉得手绘示意图的能力是再重要不过的了。我曾经预想过很多布局和页面图像,仅仅是从我脑海里的框架开始。只需要有简单的铅笔和纸你就可以在一个空白的画布上记下你所有的想法和想像。

图标设计特别适用于这种考虑工艺本性的行为。相对于你有了大致的想法后再开始,直接打开Photoshop就开始创作是非常困难和受限的。事先计划是自由和成功的关键。如果你想法枯竭,草图也是最能给你一些帮助东西。
它不需要进行到非常细节的程度。你只要自己觉得合适并且知道还需要多少工作要做。可能你只需要一个粗略的想法,比如你最终的作品会长什么样,可以去掉阴影,光泽以及其它效果。

利用透视法

制作图标需要你暂时走出条条框框并只考虑你希望你的作品看起来是什么样的。最终你的工作的理想情况是产生一个独特的,格式化的图标。它可能是一唯空间的或者甚至包含突出和阴影。
考虑你的用户会如何观察你的图像的边界。不论是从设计师还是从用户体验的观点来看,你的图标应该给人以什么样的感觉是非常重要的。尝试避免任何过度复杂的形状地貌模式,它们可能会扭曲最终的效果或产生混乱。

简而言之,如果你需要一个信封用于邮箱图标,那就简单地创建一个信封。确保它非常明显且当放在文字边上或在浏览器内部时它很突出。然而我们并不需要全力的去追求太多的特效。图标已经成为所有出色的用户界面的标记,延续简单这种强大的立足点是非常重要的。

避免覆盖文本

一般来说在图标设计中放置文字或字母是一个很大的禁忌。它通常会引起多方面的问题,而最大的问题就是调整尺寸。如果你用清晰的文字创建一个512*512的图标,它可能会达到一个极限,这时调整尺寸就行不通了。
这限制了你的品牌发挥到极致,并且对于较小像素的图标需要重新设计。更需要注意的是要避免使用小短语或副标题,因为在大多数的转换之下它很难很好地传承下来。

唯一可以适用这个规则的情况可能是首字母缩略词或者缩写。如果你运作的公司叫做Global Internet Bank,你的图标采用字母GIB可能会被认为是闹着玩的。这当然也是当前很多情况正在使用的方式,虽然这种方式已经是很古老的了。我们在矢量绘图上看到无数的创意,这些创意可以比加大,加粗分散的字母更加突出。

图标画廊

下面是一些从Dribbble的画廊里找到的杰出的图标设计的例子。所有内容都链接到他们原始的资源并提供了很多普遍趋势的观察。图标艺术设计入门并不容易,但是如果有一些帮助和正确的灵感所有目标都可以达到!

GMail Pokki Final UI
Fast Food
Hello Mac!
Social Icon Set v1
OSX Developer Board
CoffeeCat Icon
Football Icon
Game On
Mustache
Begin Download
Calendar icon
Concept for cooking app
iPhone Icon
Noutes Application
Cardboard Box
Japanese Lamp

查看英文源文

来源:http://rockux.com/

时间: 2024-10-03 00:36:26

图标设计技巧与灵感的相关文章

图标设计技巧:漂亮的Android应用图标

文章描述:随着手机和平板的分辨率的不断进化,将你应用的主屏图标做的更加清晰和高质也变得越来越重要.那么你知道应该如何制作一个漂亮的 Android 应用图标吗.   [核心提示] 随着手机和平板的分辨率的不断进化,将你应用的主屏图标做的更加清晰和高质也变得越来越重要.那么你知道应该如何制作一个漂亮的 Android 应用图标吗? 编辑注:本文章译自 Android Developers 博客的 Making Beautiful Android App Icons 对于一般用户而言,主屏图标/启动

苹果iOS 程序图标的设计技巧

文章像三联的朋友们介绍苹果iOS 程序图标的设计技巧,教程难度中等,IPHONE.IPAD.IPOD成为越来越多的人使用的移动互联设备,因此我们经常会遇到为这些设备设计图片,特别是设计IPHONE图标,这篇文章就像三联的朋友们详细的介绍一下IPHONE图标的设计流程,好了一起来学习吧:程序图标主要作用是为了使该程序更加具象及更容易理解,除了上述的作用外,有更好视觉效果的图标可以提高产品的整体体验和品牌,可引起用户的关注和下载,激发起用户点击的欲望. 表现形态 在有限的空间里表达出相对应的信息,在

聊聊PS图标设计流程及小技巧

  图标设计要求熟练运用软件,涉猎各种矢量特性.蒙板以及构造实体几何,因此,会需要同学们运用不同的软件工具与技巧,今天的译文全都是超实用的技巧干货,周末来补充点有料的. 图形创建 vs 图形样式 我认为,对矢量路径的创建和图形样式的设定作出正确的区分是十分重要的,因为它们需要通过两种截然不同的设计软件来实现--Photoshop 和 Illustrator. Photoshop 的渲染质量和蒙板功能几乎超越了所有的设计软件,而 Illustrator 则囊括了丰富的矢量功能.在我的漫漫图标征途中

网页设计技巧:设计精美网页图标技巧

文章描述:满足四大要素!让网页设计中图标更有吸引力. 图标在网页设计中用途广泛,几乎每个网站中都存在着图标.通过这些小小的图标,可以方便的实现视觉引导和功能划分.如果选用恰当,图标能和页面中的图片有机融合,保持视觉上的一致性,同时也能够和整个网站的风格相契合.图标并不是华而不实的小玩意儿,小图标有大用处.在网页设计中,如果设计师并不擅长图标设计,那么就需要在图标选择上下功夫了. 一般来说,根据使用手法.使用场合的不同,一张图像可以有多种解读,图标亦如此.图标不但能够吸引用户的注意力,还能分割页面

Illustrator设计大脑图标绘制技巧教程

给各位Illustrator软件的使用者们来详细的解析分享一下设计大脑图标绘制技巧的教程. 教程分享: 第1步-研究 收集一些参考材料和图像/大脑的插图.医学书籍是一个不错的来源.大脑是一个整体构成椭圆形的,然后还有小脑和脑干.从前面看,/顶视图,大脑是两极和两个半球组成.   Step 2 绘制 在使用AI之前,我喜欢在纸上画一个草图或一个数字草图.尤其如此一个复杂的形式,因为您不清楚将是什么样子. 当你要输出你想象中的大脑图形的时候, 考虑一下几点: 观点 – 你用哪一边的大脑表现? 从一个

移动图标设计教程:快速打造iOS7风格图标

文章描述:我为你准备了一系列指南,能帮你通过简单的步骤打造iOS7风格的图标. 随着近年来iOS7的发布,很多网站和APP都忙于改头换面,来适配这套全新的扁平纤细的iOS设计风格.设计好图标是件棘手的事情,尤其当你要设计一整套时,而设计线条式图标本身又是另一项挑战. 下面,我为你准备了一系列指南,能帮你通过简单的步骤打造iOS7风格的图标. 目标是什么? 凡事分轻重缓急,你设计的图标或图标集是用于你的APP吗(这里的APP也指网站)?对于这部指南来说,都无所谓.因为无论如何你都应当遵循下面这些步

UC8.0浏览器产品游戏中心图标设计经验分享

文章描述:UC8.0诞生记–应用中心图标设计小教程. 应用的时代到来?毋庸置疑的回答是"Yes!".无论是PC.Web还是移动终端,都迎来自己"应用化"的春天.当然,随着UC8.0各线浏览器产品的发布,UC浏览器的粉丝们不难发现,"应用化"的道路上出现了大家挚爱的UC嘞,可喜可贺呀! 找好自己的风格!这是我们开始图标设计之前需要想好的.平面的?立体的?写实的?卡通的?等等.这个过程也许很长,也许会很短.灵感这东西很难琢磨.当我们想好大体的形状,我

网页设计技巧:特殊人群的设计关怀

文章描述:网页设计技巧:特殊人群的设计关怀.   2010年12月,Thomas应邀参加中国交互设计体验日大会,展开了一次主题为<特殊人群的设计关怀>的演讲.演讲主要介绍了在做产品设计时,公司对于特殊群体的一些考虑.以下是对这次演讲的现场记录: "盲人对QQ的依赖度非常高." 在正式演讲之前,想请大家看一段视频.大家可以看出这是个怎样的用户吗?是的,这是一位盲人.可能很多人会吃惊,盲人怎么可以使用QQ?其实盲人不光使用QQ,他们正在利用互联网的很多服务充实自己的生活.我们关

UC8.0诞生记 应用中心图标设计教程

应用的时代到来?毋庸置疑的回答是"Yes!".无论是PC.Web还是移动终端,都迎来自己"应用化"的春天.当然,随着UC8.0各线浏览器产品的发布,UC浏览器的粉丝们不难发现,"应用化"的道路上出现了大家挚爱的UC嘞,可喜可贺呀! 找好自己的风格!这是我们开始图标设计之前需要想好的.平面的?立体的?写实的?卡通的?等等.这个过程也许很长,也许会很短.灵感这东西很难琢磨.当我们想好大体的形状,我们就可以先动手画几个"模拟"图标,