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

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

Step1

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

Step2

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

Step3

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

Step4

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

Step5

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

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

Step6

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

Step7

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

Step8

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

Step9

细节的绘制:

a.丰富手柄把头的反光

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

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

Step10

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

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

Step11

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

Step12

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

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

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

时间: 2024-12-20 15:51:10

icon小教程之图标细节的绘制的相关文章

在网页中画Icon小图标

在网页中画Icon小图标. 现代网页中,绝大部分都采用了Icon小图标的方式.其积分大致分为三类,CSS Sprite,font+HTML,font+CSS. CSS Sprite:又称为CSS雪碧,把网页中零星背景图片整合在一张图片文件夹中,再利用CSS的背景图片技术定位到要显示的位置.优点:减少文本体积和服务器请求次数,从而提高效率. 知识点:background-image background-position(向下向右取的是负值). 特点:1,相对单个图标,节省文本体积和服务器请求次数

如何给网页标题添加icon小图标

今天给大家分享的是如何在网页标题中加入小图标,就像CSDN前面那个红色的C一样.主要介绍两种方法:1.在html文件的head部分添加下面代码(注意href的路径).<link rel="icon" type="image/x-icon" href="icon.ico" /> 你的图标格式最好是.ico格式的,手贱试了一下,发现png,jpg的格式都可以,而且浏览器会自动帮你把图片尺寸缩放到16*16.不过.ico格式体积要小很多,另

给网页标题添加icon小图标

so easy: 给网页标题添加icon小图标: 直接在html文件的head部分添加下面代码(注意href的路径): <link rel="icon" type="image/x-icon" href="../static/images/brand.jpg" /> 原文地址:https://www.cnblogs.com/zkkysqs/p/9536886.html

积累的VC编程小技巧之图标、光标及位图

1.图标透明 (1).Windows中的图标其实是有两个图像组成的,其中一个用于与它要显示的位置的图像做"AND"操作,另一个作"XOR"操作. 透明:用"白色"AND,用"黑色"XOR反色:用"白色"AND,用"白色"XOR正常色:用"黑色"AND,用正常颜色XOR.(2). WIN9X中好像是对像素的操作实现透明的WIN2K中就有API直接实现透明了!WIN2K中

为帝国cms模板添加站内搜索小教程

由于客户的需要,最近都在整帝国cms,很多东西还是不熟悉,特别是帝国cms模板,以前用的那些网站模板一般是保存在ftp文件中,而帝国cms模板是直接保存在数据库中,修改是在网站后台的模板管理,得慢慢适应. 这几天接到一个站,整体是做得差不多了,就是有很多细节还没解决,例如帝国cms站内搜索还不能实现.本着好奇的新鲜,就随着xmyanke一起来鼓捣一下吧. 在本帝国cms模板修改案例中,站内搜索是放在网站头部右上角,那么我们就在后台-模板-公共模板变量-管理模板变量-页面头部[!--temp.he

dubbo小教程

dubbo小教程 先给出阿里巴巴dubbo的主页:http://code.alibabatech.com/wiki/display/dubbo/Home-zh 自己的demo下载地址:http://download.csdn.net/detail/u012049463/6763315 1. Dubbo是什么? Dubbo是一个分布式服务框架,致力于提供高性能和透明化的RPC远程服务调用方案,以及SOA服务治理方案.简单的说,dubbo就是个服务框架,如果没有分布式的需求,其实是不需要用的,只有在

入门的小教程!

下面是记录打开文件的一个小教程. 首先从cmd 打开文件进入文件夹 比如进入F\文件\某个程序 第一输入F:回车键cd 文件.....最后找到文件打开python 某个程序     下面是将近一个钟头学会的.`(*∩_∩*)′

中兴新支点操作系统——菜单小教程

之前一直在安利中兴新支点的操作系统,于是今天就来给大家做个关于操作系统的小教程吧- 今天的主要内容是围绕着他的菜单这个板块. 与Windows的一样,中兴新支点的操作系统也是单击左下角以显示菜单,这个菜单分四个部分,左侧为菜单栏,中间为软件分类,右侧为已安装软件列表,下方为搜索栏 .而在菜单右侧选项当中,右键则能弹出对该程序的更多操作菜单,例如可以把程序添加到桌面或者添加到面板. 在菜单栏上右键后能选择编辑菜单,在这里可以对菜单进行进一步更加详细的编辑. 同时我还发现,如果是不被允许或者无法进行

请用fontAwesome代替网页icon小图标

1. 引言 网页小图标到处可见,如果一个网页都是干巴巴的文字和图片,而没有小图标,会显得非常简陋.下面的小图标,你是不是会经常用到? 你可能说——“我们用的都是彩色的,不是黑白的”——别着急,下面会讲到.因为它们也可以变为彩色的. 黑白的也好,彩色的也罢,如果用传统的“css + 图片”的方式来制作这些icon,我估计你至少得雇佣一个专业的设计师吧.一般的程序猿,包括前端程序猿,估计只能去搜索了,不会自己拿ps画.例如,我之前经常去一个叫做“懒人图库”的网站去找资源,现在那个网站还存在. 但是问