什么是图标?•一个图形图像——代表一个文件,程序,网页,或命令。什么是图标?•图标是不同的标准图像什么是图标?•一个图标最重要的属性是其包含透明区域的能力什么是图标?•一个图标包含几个图像格式(大小和颜色)图标设计规范图标样式应该有趣、色彩丰富且充满活力,目前的系统支持图标是32位,并且边缘非常平滑。图标设计规范•图标样式特性(1)色彩丰富,是对WindowsXP外观的补充。(2)不同的角度和透视特性为图像增添了动态活力。(3)元素的边角十分柔和,并略微有些圆滑。(4)光源位于图标的左上角,同时有环绕光照亮图标的其它部分。图标设计规范•图标样式特性(5)渐变效果使图标具有立体感,进而使图标的外观更加丰满。(6)投影使图标更具对比度和立体感。(7)添加轮廓可使图像更清晰。(8)日常对象(如计算机和设备)具有更现代化的个人外观。图标设计规范•图标尺寸Windows®XP•建议:48x48,32x32,24x24,16x16•最低:32x32,16x16•可选:128x128图标设计规范•图标尺寸WindowsVista™•建议:256x256,64x64,48x48,32x32,24x24,16x16•最低:256x256,48x48,32x32,16x16•可选:256x256,64x64图标设计规范•图标色彩深度支持每个WindowsXP图标应包含以下三种色彩深度,以支持不同的显示器显示设置:24位图像加上8位alpha通道(32位)8位图像(256色),加上1位透明色4位图像(16色),加上1位透明色图标设计规范•图标色彩深度支持——RGB图标格式与Alpha通道图标设计规范•图标色彩深度支持——RGB图标格式与Alpha通道图标的可用性原则图标的功用在于建立起计算机世界与真实世界的一种隐喻,或者映射关系,应该被用户轻松准确地理解。图标的可用性原则•图标指向的映射关系应该尽可能的直接、简单。图标的可用性原则•每个图标指向的映射关系应该是唯一的,不要使用过于复杂的图标。图标的可用性原则•同一个图标系列中,最好使用相同的映射模式。图标的可用性原则•形式与功能的协调统一图标的设计技巧•创意创意来源于生活图标的设计技巧•创意创意来源于优秀的设计作品图标的设计技巧•细节再加上这一点就能变成一流的创意图标1处:凹陷的质感2、3处:面的渐变4处:渐变以及若隐若现的电路5处:凹陷的线条6处:反光图标的设计技巧•细节图标的设计技巧•整体性一套完整的图标应该来自同一个地方图标的设计技巧•整体性形状、色彩、声音图标设计的常见问题•图标之间没有明显的差异化(太相似,难以辨识);图标设计的常见问题•在一个图标中设计了太多的元素图标设计的常见问题•加入不必要的元素图标设计的常见问题•一套图标中的图标统一性不足(颜色主题,透视角度,尺寸,绘图技法等)图标设计的常见问题•在小图标中(24X24以下)使用不必要的透视和阴影图标设计的常见问题•过度原创使语义不明确(比如将回收站设计成碎纸机的样式)图标设计的常见问题•国家区域和文化特征没有被考虑进设计中图标设计的常见问题•在图标中使用纯界面化的元素(比如泛滥的macaqua效果,用户会认为你的产品是苹果的产品)图标设计的常见问题•在图标内部使用文字(特别是不容易辨识的)图标设计的常见问题•图标外部边缘没有做像素化处理图标设计软件•PS+AI+Iconworkshop(或IconBuilder插件)•3D软件+PS+Iconworkshop(或IconBuilder插件)图标设计的几个技巧•全面了解图标设计——突出整体图标设计的几个技巧•为你的受众着想——图标的使用环境图标设计的几个技巧•设计多大的图标就使用多大的图标设计的几个技巧•保持图标简洁和图标化图标设计的几个技巧•注意保持光、影子、反射的一致性图标设计的几个技巧•使用统一的透视图标设计的几个技巧•保持一套图标风格——轮廓线、对比度、色彩、明暗等图标设计的基本流程•图标创意阶段——根据项目要求,确定图标的风格•图标创意阶段1.功能图标的定义2.词语-图形的转换图标设计的基本流程•草图绘制阶段——确定图标透视方向图标设计的基本流程•草图绘制阶段——元素组合图标设计的基本流程•草图渲染阶段——软件绘制、细节润色图标设计的基本流程•草图渲染阶段图标设计的基本流程•草图渲染阶段图标设计的基本流程•Disco软件图标设计Disco是一款用来拷贝光盘内容的软件,也可用来进行简便的刻录工作,并且也具有其他多项功能。——碟片+火;舞厅镜面球图标设计的基本流程•Disco软件图标设计创建了一个简单的3d模型来作为图标的基础确定火焰的形状图标设计的基本流程•Disco软件图标设计黑色作为火焰的基调色,因为这样可以使图标和黑/白风格软件界面相匹配图标设计的基本流程•Disco软件图标设计一个让人感觉非常有动感的黑色图标图标设计的基本流程•世界杯频道主题设计按照所给项目的需求文档和分析资料开始进行大致layout,风格趋向的设定。图标设计的基本流程•世界杯频道主题设计按照自己搜寻图片进行主界面icon设计,先从造型开始,然后进行模型的塑造,贴图材质的绘制图标设计的基本流程•世界杯频道主题设计模型制作,动画渲染图标设计的基本流程•世界杯频道主题设计主界面背景使用PScs绘制,突出绿茵场地的感觉,并且使它更具有科技感,使用3ds渲染背景效果,整合在一起,4圆盘代表icon所摆放的位置图标设计的基本流程•世界杯频道主题设计最后由程序工程师进行整合图标设计的基本流程•新闻阅读软件Times设计的图标概念草图图标设计的基本流程•新闻阅读软件Times设计的图标流程图标设计的基本流程•新闻阅读软件Times设计的图标编辑咖啡杯图标图标设计的基本流程•新闻阅读软件Times设计的图标编辑报纸图标图标设计的基本流程•新闻阅读软件Times设计的图标成品图标设计的基本流程•工业软件Kyvision的整体界面设计图标设计的基本流程图标设计的基本流程图标设计的基本流程•要想做界面,那就要做到每个像素都精确!图标设计的基本流程图标设计的基本流程图标设计的基本流程