第6讲图标.ppt

图标设计 第 讲 设计一套自己的图标吧 什么是图标 图标是具有明确指代含义的计算机图形桌面图标是软件标识 界面中的图标是功能标识 广义 具有指代意义的图形符号 具有高度浓缩并快捷传达信息 便于记忆的特性 狭义 计算机软件方面的应用 包括 程序标识 数据标识 命令选择 模式信号或切换开关 状态指示 图标是可视操作系统的重要元素 图标是一种标志 它代表一文档 一段程序 一张网页 或是一段命令 通过图标可以执行一段命令或打开某种类型的文档 所要做的只是在图标上单击或双击一下 有了图标 在一大堆乱七八糟的文件中找出一种文件就不是一件海底捞针的事了 具有相同括展名的文档享有同一个图标 现在符号学已经成为一项科学研究 其理论成果也已经渗透到其他诸多学科之中 设计与符号学关系密切 设计这个词来源于拉丁文的Designare 意思就是画记号 现在被普遍采用的英文Design 也就是做记号的意思 研究和运用符号学的一些原理来帮助设计人员 做记号 不能说不是从事设计人员的一条重要的途径 图标也是一种符号 图形符号与语言符号有许多共性图形符号更侧重于直观的视觉特性 通过形象元素的组合关系展示图形的语意文字和图像互为语境 互补意义 符号是负载和传递信息的中介 是认识事物的一种简化手段 表现为有意义的代码和代码系统 符号这一概念的外延相当广泛 设计中的符号作为一种非语言符号 与语言符号有许多共性 使得语意学对设计也有实际的指导作用 通常来说 可以把设计的元素和基本手段看作符号 通过对这些元素的加工与整合 实现传情达意的目的 设计中符号的特性认知性设计中 认知性是符号语言的生命 在口语交流中 人们通过词语的含义来理解对方 在视觉交流中 人们是通过表情和眼神的视觉语义象征来理解对方 图标 是界面上的操作器件 要使用户一看就知道操作方法 功能和操作方式 一叶而知秋 落叶 秋烟 火 风向标 风 电闪 雷鸣 图标代表了概念 技术和开发者 普遍性现代设计是为大工业生产服务的 设计作品会在大众中广泛传播 设计的符号语言只有具备普遍性 才能为大众所接受 设计者只有找出让自己 客户 消费者都能理解的设计语言 才能更好地完成设计任务 符号的普遍性这一特性 在许多公共场所的标牌设计中体现得尤为充分 如公共卫生间的男女标识 相信不论男女老幼 文化深浅 都能够清楚分辨 约束性任何语言都只在一定范围内被理解 只有具备有关文化背景的人才能接受到该符号所传达的信息 只有符合特定背景的符号才能在这一范围内被接受 比如 德国招贴艺术大师冈特 兰堡 GunterRanbow 的作品中常出现土豆形象 对于不了解德国的人来说 可能看不懂作品所要表达的意思 只有知道土豆对于德国人的特殊意义 才能够明白设计者对土豆如此钟情的原因 不同的时间空间 使某一具体符号有着不同的指涉物 卐 字符 在中国等亚洲国家 卐 是一个佛教符号德国纳粹党魁希特勒将 卐 用作了纳粹党的党徽 卐 遂成为了法西斯统治 暴力和血腥恐怖的象征 独特性符号一般强调 求同 这样才容易被理解 但是 在设计中 求异 常常是关键 因为比较形式和内容 前者绝对是更值得深究的 同样是针对一个主题 我们必须找出与之相关的尽可能多的表现形式 才能创作出与众不同的作品 想做得另类出色 就使用全球知识库 google来支持你的想象力吧 但始终要保证图标的功能 图标创意 对每个功能图标的定义要非常清楚 差的图标设计最终导致用户界面的操作失败的体验 视觉审美和可用性有时候存在矛盾的方面不能走极端 只顾及可用性但忽视设计美观的一面 也不能追求设计上的美的需求而忘了这是功能性很强的界面图标 最好是能在两者之间取得平衡 收集很多关于 词语 图形 之间能转化的元素用生活中的物或其他视觉产品来代替所要表达的功能信息 或操作提示 例如音乐 我们会想到 音符 光盘 音乐播放机 耳机等等 原则上是越贴近用户的心理模型最好 用大家常见的视觉元素来表达所要传达的信息 隐喻是在图标设计中是必要的思维方法 找出物与所指之间的内在含义 这就要求设计师对生活的细微观察 丰富的联想能力 共同的隐喻 捕捉物体的特性 事物隐喻 事能隐喻概括 归纳 想象事物之间的联系 好的图标应该是在同类中易读易懂易识别 而不是在说明解释 一个好的创意应该以清晰 简明 给人印象深刻的方式表现出来 图标设计有三点是非常重要的 创意 细节 整体性 整体性 一套完整的图标应该来自同一个地方 在创意的时候你就假设你自己就生活在某处 生活在一个你的即将诞生的图标的地方 在控制整体性的技术上也一定要有把握 比如控制形状 图片的边角是否都用圆角 直角 色彩上是否都采用渐变 加不加反光 这些都要统一在每一个图标里 让他们发出的声音是一致的 表达着同一种思想 Lackofunityofstylewithinasetoficons 细节 也许你的图标再加上这一点就能变成一流的创意图标 现在有许多图标的尺寸已经从原来的32x32 px 上升到128x128 px 这要求图标创作不能仅局限于形态的描绘 细节 要更多的细节 这些看似不起眼的小东西配合上精彩的创意以及准确的外形描绘会让人们瞳孔大张的 图标放大了并不是很精致 当他们缩小到较小的尺寸时 细节的威力就体现出来了 1处的凹陷的质感2 3处的面的渐变4处的渐变以及若隐若现的电路5处的凹陷的线条6处的反光 使用一致的光源 使用阴影 色彩 创意 一个好的出发点或角度能让你的图标与众不同 脱颖而出 草图绘制阶段 确定图标透视 检查视觉关系 图标视觉分析 往往一个图标要表达一定的含义就必须组合不同的形态 借助单个形态所传达的内在信息 拼合在一起去传达另外一种信息 草图渲染阶段 图象与图标之间的差别 虽然看上去图标和一幅计算机图像差不多 只不过尺寸小了点 但它们是完全不同的两种文件 图标实际上要比你第一眼看上去的复杂的多 一幅计算机图象 CG 通常被称作位图图象 Bitmap 基于象素的 或矢量图象 Vector 基于路径的 它们有各种文件格式 BMP GIF JPG TIFF PNG 这些文件格式都有它们各自的属性 位图图象 矢量图象 有损压缩 无损压缩 含透明区域 动画 另外一幅CG可以是任何大小和分辩率 图标却不一样 图标有一套标准的大小和属性格式 且通常是小尺寸的 每个图标都含有多张相同显示内容的图片 每一张图片具有不同的尺寸和发色数 它们在图标内部是以这种方式排列的 简单的说 一个图标就是一套相似的图片 每一张图片有不同的格式 从这一点上说图标是三维的 图标还有另一个特性 它含有透明区域 在透明区域内可以透出图标下的桌面背景 在结构上图标其实和麦当劳的巨无霸汉堡差不多 图标样式特性 1 色彩丰富 是对WindowsXP外观的补充 2 不同的角度和透视特性为图像增添了动态活力 3 元素的边角十分柔和 并略微有些圆滑 4 光源位于图标的左上角 同时有环绕光照亮图标的其它部分 5 渐变效果使图标具有立体感 进而使图标的外观更加丰满 6 投影使图标更具对比度和立体感 7 添加轮廓可使图像更清晰 8 日常对象 如计算机和设备 具有更现代化的个人外观 图标尺寸WindowsXP图标有四种尺寸 建议使用以下四种尺寸 1 48 48像素 2 32 32像素 3 24 24像素 4 16 16像素 图标的可用性原则一 图标指向的映射关系应该尽可能的直接 简单 图标的可用性原则二 每个图标指向的映射关系应该是唯一的 图标的可用性原则三 同一个图标系列中 最好使用相同的映射模式 图标的可用性原则四 最好使用简短文字做为图标的冗余编码 图标的可用性原则 图标样式应该有趣 色彩丰富且充满活力 因为现在的系统支持图标是32位图标 并且边缘非常平滑 在矢量程序中绘制完每个图标后 再用AdobePhotoshop进行处理可使图像更加完美 目前流行的图标设计软件组合是 Illustrator CorelDraw Photoshop Iconworkshop 用AdobeIllustratorCS进行图标设计 并在Photoshop中进行后期处理 最后用Iconworkshop输出成 ico格式的图标文件 图标绘制 设计图标时 考虑以下因素 使用已有概念以确保真实表达了用户的想法 考虑图标在用户界面环境中以何种形式出现 以及如何作为图标集的一部分使用 考虑图形的文化背景 避免在图标中使用字母 单词 手或脸 必须用图标表示人或用户时 请尽可能使其大众化 如果图标中的图像由多个对象组成 应考虑如何使图像尺寸更小 建议在图标中使用的对象不超过三个 对于16 16的尺寸大小 还可考虑删除某些对象或简化图像使之更容易辨认 1 首先用矢量绘图软件FreeHand或Illustator绘制整个图标的轮廓 这里我们只需绘制一张该图标的最大尺寸版本的图像48x48 该图像将成为其他格式图像的 模型 2 将完成的图像轮廓粘贴到Photoshop中并进一步润色 确保图像是RGB色彩模式 图像在该模式下含有8位alpha透明通道 3 删除Background图层 合并所有图层 在layers菜单中选择MergeVisible 4 保存完工后的图像为 psd或 png格式 因为IconWorkshop对这两种格式的图像有着良好的支持 可以在程序中直接导入 图标制作方法 生成 ico文件1 运行IconWorkshop 选择菜单File New IconProjectfromImage 或直接按快捷键Ctrl J 选择刚才保存的图像文件 在随后出现的对话框中 单击OK 2 单击CreateIconfro