应用中心图标设计小教程

第一篇：应用中心图标设计小教程

应用中心图标设计小教程

|阅读原文

应用的时代到来？毋庸置疑的回答是“Yes！”。无论是PC、Web还是移动终端，都迎来自己“应用化”的春天。当然，随着UC8.0各线浏览器产品的发布，UC浏览器的粉丝们不难发现，“应用化”的道路上出现了大家挚爱的UC嘞，可喜可贺呀！

找好自己的风格！这是我们开始图标设计之前需要想好的。平面的？立体的？写实的？卡通的？等等。这个过程也许很长，也许会很短。灵感这东西很难琢磨。当我们想好大体的形状，我们就可以先动手画几个“模拟”图标，这时候的图标画的不必太过复杂，能有个感觉就好。最后咱们UC选择了较为立体的图标风格来进行设计嘞。

今天咱们一起绘制一个简单的“游戏中心”的图标，跟大家分享一下图标绘制过程的一些方法和心得吧。那我们开始!首先我们先用铅笔啦圆珠笔啥的画个草图，找个自己满意的形，哈哈，就定第二个图的了。（画的很丑——||大家将就瞅瞅！）

Stept1：这就是我们今天要一起绘制的“游戏中心”的图标啦。第一步咱们先把图标“宽衣解带”一下。这个图标主要可以分解为两个部分，一个“外框”和一个“游戏手柄”。

Stept2：先用圆角矩形工具画出两个交叠的圆角立体矩形，这个就是我们外框的基本形了。接下来我们对其进行渐变着色。在圆角处添加高光，使得整个立体图形更加自然圆滑，同时在明暗区分较强颜色区隔处增加1px的高光边线，使得图标更显质感。

Stept3：我们开始绘制暗底区域的高光，这边值得注意的是，我们绘制的高光区域要在暗底选中区域的基础上内收缩1px，使得高光区与暗底间存在明显的间隔，同时为了使绘制的高光区更有色感，我们要进行“二次混合模式叠加”，第一次使用“叠加”的混合模式，第二次则使用“滤色”的混合模式。为了使绘制的高光区更富有质感，我们在原有的高光区基础上，添加1px的高光亮边，这么一来，图标就更晶莹剔透咯。

Stept4：接下来我们开始绘制右下角的蓝色游戏标签。简单的蓝色侧45度渐变便可完成基本型配色，但是为了锦上添花，我们需要在蓝色渐变的基础上加上与高光区同向的高光亮边，绘制方法与之前提到的绘制高光区域的方法一致，同样需要“二次混合模式叠加”。接下来添加“GAME”的文字，效果使用渐变+投影即可，值得注意的是，渐变色区隔不要太大，淡淡的即可，投影选择黑色“正片叠底”，距离1px，大小2px即可。同时在暗底上层加上蓝色的高光，便可给图标带来不一样的剔透质感。

Stept5：绘制完外框，我们开始绘制游戏手柄嘞。先用鼠标绘制一个游戏手柄的外形。添加一个简单的线性渐变。然后在手柄的边界处打上阴影，让手柄立体起来。

Stept6：现在我们开始游戏手柄的左侧操作栏的绘制。为了让其更有“凹凸”感，我们选择在暗色渐变的外侧添加与手柄主体渐变色相反的渐变描边。在暗色方向操作盘上绘制上下左右的方向键，注意，渐变色使用时，与背景色不能过于反差，淡淡的区隔即可。

Stept7：至于右侧的操作按钮与左侧操作盘的绘制方法也有异曲同工之处。先绘制四个“凹槽”，然后在里边放置四个按钮，在按钮的图层属性配置上，可以只用纯色加上”斜面浮雕”效果，简单显示高光即可。然后为你的按钮配上不同的色彩即可完工。值得注意的是，每个按钮的外层可以添加一个颜色属性更深的色值，使得产生更为细致的区隔立体效果。

Stept8：接下来绘制的是手柄的底部操作杆了。这部分的处理我们可以简单想像成一个立体按钮的绘制。概括起来就是“两个图形平移”。即先绘制一个圆形，然后复制一个副本，并将其向上平移，简单吧~操作杆的高光部分，我们同样使用简单的“斜面浮雕”效果即可。手柄的主体基本完成，然后我们添加上一些“附属”小物件，游戏手柄搞定嘞！

Stept9：最后一步就是“打包”啦。我们将游戏手柄装进我们之前绘制好的外框中。这里需要注意的是，需要在外框暗色区域的选区内，在手柄四周打上阴影，拉出手柄与外框的距离，使得整体更有层次感。之后我们只需要再增加一些小光点作为点缀，接着拉个倒影，便大功告成了！

结束语：不知道看了这篇文章是否会对大家的图标设计有所帮助嘞，绘制图标是个细致活，大家平时也多多练习，多多绘制图标，孰能生巧嘛~大家都Fighting！

第二篇：设计一个播放进度条图标教程

设计一个播放进度条图标教程

今天带同学们来绘制一个金属质感的进度条，重点依然是图层样式的练习，喜欢的跟着教程一起练习一下。做完记得交作业。PSD参考文件：http://vdisk.weibo.com/lc/2uZbBupjANLPR5E6Ql 密码：UPJW最终效果：新建文档，这里我们用的依旧是800*800像素，我们为背景图层添加一个图层样式。设置完图层样式，我们得到如下效果：下面，我们为背景图层添加一个杂色。执行“滤镜—杂色—添加杂色”，设置数量为“1%”，高斯分布，勾选单色。执行“滤镜—滤镜库—画笔描边—喷溅”，设置喷色半径为6，平滑度为5现在，我们完成了背景的创建，效果如下。www.xiexiebang.com下面，我们开始进度条的绘制。用圆角矩形工具，画一个620*45像素的圆角矩形。将其命名为“外形”，为其添加一个图层样式。设置完图层样式，我们将得到如下效果。www.xiexiebang.com现在轮廓外形已基本呈现，但是质感略嫌不足，我们来改进一下。复制一层“外形”图层，将其更改名为“轮廓投影”，并将其置于“外形”图层下层，清除其图层样式，将填充更改为0，重新设置一个图层样式，设置如下：现在我们得到如下效果。用圆角矩形工具画一个500*30像素的圆角矩形。为这个白色的圆角矩形设置一个图层样式。现在我们得到如下效果：www.xiexiebang.com下面，我们添加一个按纽，用椭圆工具画一个60*60像素的圆。为其添加一个图层样式。到这里，进度条就算搞定了。最后，我又添加了两个按纽，没什么好说的，只是加了点字，加了点外发光，有兴趣的可以下载我们的PSD看看：http://vdisk.weibo.com/lc/2uZbBupjANLPR5E6Ql 密码：UPJW。（贴吧 / P大点S)

第三篇：PhotoShop设计一个圣诞iphone icon图标教程

核心提示：借着圣诞节到来，这次用photoshop制一个简单的圣诞iphone icon，整个过程利用photoshop的矢量功能结合位图功能完成。

相关下载： Photoshop CS5官方正式版 Adobe Photoshop CS4 Adobe Photoshop CS3 Adobe Photoshop CS2

借着圣诞节到来，这次用photoshop制一个简单的圣诞iphone icon，整个过程利用photoshop的矢量功能结合位图功能完成，这篇文章很简单，主要是介绍photoshop中矢量在icon的应用和一些小细节。

最终效果

用圆角矩形工具画出长宽为512px，R值为92px的标准iphone框架

加上1px内阴影效果，使其有立体感

再用图案叠加添加木纹图案，你可以google好看的木纹图案，这里我就用自带的木纹了

效果：

添加一个圆角矩形图层

设置投影、内阴影、内发光效果进一步加强立体感

效果：

添加niigoo主体渐变色和描边，你也可以自已发挥，描边是使外部木边更有立体感，这就是细节的体现了

接着到围脖的部份，新建图层，用钢笔画出围脖，主体选用红色，添加图层阴影效果

围脖图层1

围脖图层2

围脖图层3

注意图层的顺序

再用钢笔画出围脖阴影，画好了用滤镜进行高斯模糊

用毛笔添加亮面和暗面，方法：这里可以在围脖图层1上面新建一图层，右键－创建剪贴蒙板，然后这图层就嵌入围脖图层1里了，再用毛笔画亮面和暗面，不怕出边了

其它围脖块用上述同样方法画出亮面和暗面

添加围脖波点

这里也是使用创建剪贴蒙板的方法，先用椭圆工具画出波点，再把波点图层嵌入围脖图层里

整理好图层，三层围脖完成了

回过头来检查图层，噢~~~一切就是这么整体

再来就是加上“尼果”俩字（出处表明，哈哈）

好了，在底部再添加一个反光图层就完成了

第四篇：图标设计心得

东莞生活网： www.hidg.net

图标设计

在这里分享下我对于图标设计的一些心得体会。说的不好，还请各位看客包涵指正。图标在我们日常生活中被 广泛应用，软硬件、网页、社交公共场合无所不在。广义来说，图标就是具有指代意义的图形符号，具有高度浓缩并快捷传达信息、便于记忆的特性。狭义来说，就 是我们所熟悉的在计算机程序方面的应用。包括：程序标识、数据标识、命令选择、模式信号或切换开关、状态指示等。如今图标被广泛的应用，其价值也是显而易 见的。一套好的图标能够为用户直观传达所描述的物体，减轻用户的认知负担，特别是一些抽象的功能和意义。同时增添图标的精美度不仅能提升整个界面的吸引力 和观赏性，还能使产品与用户产生共鸣。

下面以制作电话本和短消息这两个图标为例。

设定风格。通观整个图标设计，设定风格是基础，亦是非常重要的一步。需要对整套图标进行周全的构想，因为这一步为图标设定了一个方向，之后图标设计的造型，上色的深入展开都要以此为基础。在这里我设定的是复古做旧的风格。

绘制草图。这一步骤主要是设计图标的造型。造型在图标设计中有着决定性的影响，他直观的给用户展现其所代表的含义。而草图是最直观，最快速展现设计 构思的一种方法。此时我们可以通过头脑风暴列举出一些能让用户一目了然，又贴合电话本和短消息含义的元素，同时列举的元素又要符合复古做旧的风格。因此，我选取做旧的通讯录来表示电话本，选取羽毛笔和信纸来表示短消息。在绘制草图时，要注意图标造型的统一，方向的一致性，使图标有充分的辨识度。其次要控制 单个图标元素的数量与其他图标相协调，用最少的元素来表达图标的含义。不然过多的元素不仅会使图标臃肿不堪，更会使图标的含义模糊不清，难以琢磨。

东莞汽车频道：auto.hidg.net

东莞生活网： www.hidg.net 上色刻画。在确定造型之后，就需要对图标上色以及深入刻画。

东莞汽车频道：auto.hidg.net

东莞生活网： www.hidg.net

东莞汽车频道：auto.hidg.net

东莞生活网： www.hidg.net

东莞汽车频道：auto.hidg.net

东莞生活网： www.hidg.net

总结

一，设计一套完整的图标要确保其风格的一致性。在造型，透视，大小，色彩，效果处理等各个方面做到统一，以保证每个图标都与其风格相契合。其次，控制图标元素的数量，对一些不必要的元素要果断去除。图标应该是一种能使用户轻

东莞汽车频道：auto.hidg.net

东莞生活网： www.hidg.net 松识别的图形语言，而不是成为用户阅读的负担。更要充分展现各个 图标间的差异程度，提升图标自身的辨识度，从而帮助用户理解阅读。再则还要考虑这套图标所应用的环境。不同国度，不同社会环境，不同文化传统对图形也有不 同的认识理解。同时也要考虑到人们的情感因素，避免使用敏感图形。所以在设计开始就应考虑周详，谨慎使用。最后，画图标要有足够的耐心，对于细节要不怕繁琐,细心揣摩。（详细咨询：东莞论坛——汽车频道）

东莞汽车频道：auto.hidg.net

第五篇：图标设计心得

图标设计心得

December 22, 2010adali 图标在生活中运用是显而可见的。例如：男女厕所标志和各种交通标志等。在计算机系统或软件方面的应用也是很广泛。例如：程序标识、数据标识、命令选择、模式信号或切换开关、状态指示等。下面的例子更形象的说明这个问题。

(图片来源：九铭)外国人A与中国人B，两人在语言上存在差异对文字的认识是不同的，用图标来表示，会缩短语言描述的距离。所以图标更具有快捷传达信息、便于记忆的特性。那么图标被广泛使用的时候，什么样的图标才是好图标呢？好图标从两个角度去认识：辨识度与精致度。

辨识度：图标能够直观的表现要描述的物体。精致度：在精美的页面或者系统界面上，精致的图标能提升整个页面的最佳视觉。那么怎么样才能做出一套好的图标？在图标设计过程中需要注意哪些问题？ 在《图标设计语言》中作者Yegor Gilyov(来源站点Turbo Milk)曾提到 “如果你需要画几个图标，你需要整体考虑这个站点所有图标，然后再开始使用软件绘制。”如果你的icon全都是粗糙模糊的造型或拙劣的渐变色，那么这个icon很失败，不能当作是“风格的问题”来了事。这样的icon不仅仅会毁掉整个页面的美观，更让被描述的文字降低了被查看的欲望，对你的用户来使用或阅读它是一种极大的痛苦。Icon的细节包含对颜色的使用，对造型的创新，对质感的体现。Icon的设计步骤

我认为icon设计遵循上面的一个规则，在做icon的前提要先构思好整个icon的风格，有了构思可以开始造型设计接着就是上色，然后对整体的icon进行细节修改。

Icon的要点从学会批评别人开始

曾经有人说过：“批评别人的作品比自己制作一个优秀的作品要容易得多。但如果使用系统的方式去批判，这才是个成熟的分析！”那么怎么学会去批判呢？下面来分享一些批判后总结的例子。

（图片来源iconfans）上面一些图标看起来很像，这让人很难分辨出哪个是哪个。尤其小图标的时候辨识性差了。如果你不注意说明，你会很容易把这些图标混在一起。图标还是要有差异性，在保全风格统一的前提下要有很好的识别性，可以在颜色上或者造型上做差异的改变。

(图片来源：九铭)图标应该是轻松被识别的，构建它的元素要越少越好。而上面的插画和图形明显的告诉我们图标的相关性不该是复杂的，可以省略掉相同的对象，凸显出重要的信息。

上面图片形象的说明了图标像素边沿化的问题，左边的图标比较模糊不清，右边的比较清晰。

在做icon时很容易出现一些常见的毛边，导致像素过渡化，最后圆角不柔和。怎么样处理不柔和的圆角？

在由大icon到小icon的过程中你要重视一些细节的处理，对于这个我创了一句口诀：去多稳造型，边沿移到位。

去多稳造型：大icon到小icon的过程是由细节的减少开始变化，大icon比较注重质感和光泽等，小icon除了保证质感还要清晰可见。在做16像素icon时可以减少一些必要的元素用像素点去代替，去掉多余的阴影与高光。

边沿移到位：小icon的边缘移位主要靠移动像素点来实现，或者增加像素点。

经过处理，上面的图标已经没有了原来的锯齿，有的是柔和的圆角。

当然每个设计师做icon的习惯都是不一样的，这只是我做icon时的一些心得。