IT技术博客大学习 共学习 共进步
全部 移动开发 后端 数据库 AI 算法 安全 DevOps 前端 设计 开发者

icon小教程之图标细节的绘制

腾讯CDC 2011-08-17 13:51:11 累计浏览 2,836 次
本机暂存

    原图已失效

      今天通过一个简单的game图标的绘制教程,和大家分享在绘制过程中细节的处理和一些画图标的心得,好的,我们开始吧!

    Step1

       首先要定好图标的透视,这是非常重要的,这关系到图标的整体美感,透视本身也可以很好的表现图标的细节,为了透视的真实,可以通过3D软件或者平面软件中的一些的透视功能来实现。整体框架搭好,开始接下来的绘制。

    原图已失效

    Step2

       先大致的铺上一层“控制板”的颜色,这里需要注意一些基本的光影渐变,以及边缘的处理。

    原图已失效

    Step3

       这一步我们将通过一些光影效果来刻画“控制板”的结构,主要是强化一些重点区域的光线效果,比如面板玻璃的光泽和外框的金属质感,当然还有边缘细节的处理,硬朗的边框也是质感表现的重要部分。

    原图已失效

    Step4

       添加高光,表现面板玻璃的质感,对底部进行一些光线的细节绘制。

    原图已失效

    Step5

       为了使面板更丰富,可以绘制四颗螺丝来变现一些真实性。然后可以绘制一些面板内部的边缘结构来表现玻璃的半透明效果,至此,“控制板”初步完成。

       注:因为四颗螺丝是一样的,建议大家把画好的螺丝转换为智能图层再复制,这样可以很方便的编辑它的样式,还能随意调整尺寸,避免失真。

    原图已失效

    Step6

       接下来画摇杆和按钮,还是和Step1一样,构建好透视,绘制出结构。

    原图已失效

    Step7

       上色,完成基本结构光线和颜色的区域划分。

    原图已失效

    Step8

       强化手柄把头以及摇杆的光效,突出各个部分不同的质感,注意一些添加投影的部分。

    原图已失效

    Step9

       细节的绘制:

       a.丰富手柄把头的反光

       b.刻画底座金属环的质感和边缘的结构

       c.丰富底座的反光及边缘细节

    原图已失效

    Step10

       控件基本完成,现在可以合起来进行一些调整,如位置、大小和玻璃面板上的反光。

       注:绘制诸如高反光球体这类在局部区域包含丰富样式的物体时,建议大家多用剪切蒙板,这样可以节省对边缘的繁琐处理工作,又可以很方便的调整样式层的大小及位置。

    原图已失效

    Step11

       面板看上去还有点空,我们可以丰富一些细节,例如控制板内部可以添加一些结构,同时还增加了玻璃通透的质感;添加一个logo,使图标更具真实性。至此,整个图标基本绘制完成。

    Step12

       最后一步可以从整体对图标进行调整,完善一些细节的地方,例如手柄把头的反光和在面板上的投影。

    原图已失效

      哦耶!整个图标绘制完成。

    原图已失效

      到这里差不多介绍完了,主要是自己画图标时常常会注意到的一些细节地方,写的有些草率,但希望能对大家有些小帮助。

    (本文出自腾讯CDC博客: http://cdc.tencent.com/?p=4120)

同分类推荐文章

  1. 如何写好设计文档? (2026-06-23 08:00:00)
  2. Designing With Uncertainty: How AI Supercharges Probabilistic Thinking (2026-06-16 23:00:00)
  3. The Benefits Of Cognitive Inclusion In UX Research (2026-06-10 18:00:00)

查看更多 设计 文章 →

建议继续学习

  1. 30套最好的网站开发与设计中使用的小型图标 (累计阅读 12,529)
  2. 浅析图标的微观世界――从符号学说起 (累计阅读 3,067)
  3. “BUSINESS”ICON制作分享 (累计阅读 3,033)
  4. Icon设计要点――信息传达的准确度(一) (累计阅读 2,962)
  5. Icon设计几个关键点 (累计阅读 2,953)
  6. 图标设计的那些事 (累计阅读 2,901)
  7. 简析 IOS 程序图标的设计 (累计阅读 2,616)
  8. 小xiao说说创意图标设计心得 (累计阅读 2,489)