游戏中的图标怎么设计出来的?

释放双眼,带上耳机,听听看~!

游戏中的图标设计思路!

游戏中的图标怎么设计出来的?

在游戏公司研发项目,我们需要给项目组制作相应的游戏UI界面、图标,而图标的设计制作需要和界面的风格和配色相互呼应。

尤其是图片的大小尺寸,往往根据使用不同,绘制尺寸需要300-1500大小,比如正常图标通常是300-500像素就够了,而LOGO、徽章、特卖商品需要绘制1000左右甚至更大尺寸。

游戏中的图标怎么设计出来的?

外包上线项目《苍之纪元》-已授权可展示

我们通常在绘制草图阶段就会把大图和小图同时放PS软件中一起检查识别度、项目匹配,在绘制时候就会注意细节的设计等问题。

游戏中的图标怎么设计出来的?

外包上线项目《苍之纪元》-已授权可展示

所以如果是新人,在入行初期养成良好的工作习惯往往会提高工作效率也会更加容易画出好的品质作品。

游戏中的图标怎么设计出来的?

案例分享:

相信很多设计朋友在工作中都会收到各类奇葩的工作需求,比如没有参考图,没有尺寸,没有设计说明等三无产品,但是——我们必须给出一个碉堡的设计出来。

另外除此之外可能整个工作过程也是没有人帮助、没有领导拍板、没有同事交流等囧境……

游戏中的图标怎么设计出来的?

下面情节如有雷同,不是巧合,是缘分!

游戏中的图标怎么设计出来的?

某个周五快要下班的晚上,我手机工作群收到了项目同事的工作需求,关键是当晚必须要!!

于是我放下背包重新打开电脑,开始拼命收集素材加速干活。

(这也是很多设计师没有女/男朋友的主要原因,加班太多)

生活中很多不明白的事情我喜欢多动手网上找,

一会时间我就明白为啥叫绿舌头了。

游戏中的图标怎么设计出来的?

几分钟后我已经找了很多参考图,心里也有了大致的设计思路。

游戏中的图标怎么设计出来的?

绘制图标我喜欢画的大一些,避免游戏项目做HD(高清)版本,如果画太小要重画。

01 打开photoshop新建一个1000×1000像素大小的画布,分辨率72就可以。

游戏中的图标怎么设计出来的?

02 简单的绘制一下我们需要绘制的图标草图,个人一般喜欢用ps自带的硬边笔刷。

游戏中的图标怎么设计出来的?

03 按照素材做了一个绿舌头版本,

游戏中的图标怎么设计出来的?

总是看着很奇怪,这是为啥呢??

游戏中的图标怎么设计出来的?

04 既然项目都说了只要项目合适,颜色可以自定义。

于是换了下颜色,试试粉红色版本

游戏中的图标怎么设计出来的?

这边草图大家可以把大体的明暗关系简单刻画下,

这样心里有数后期画成啥样。

05 截图是我个人笔刷,前面4-5个笔刷使用频率最高的,硬边笔刷、喷笔、升级版19号笔刷、特效笔刷等。

(建议小伙伴花一些时间整理自己常用的笔刷,这样会大大提高我们日后工作效率)

游戏中的图标怎么设计出来的?

06 使用渐变工具或者平涂加喷笔都可以得到下面效果,

这边建议大家可以先钢笔勾勒一下绘制区域,

这样画出来的图标更加精美哟~

游戏中的图标怎么设计出来的?

07 因为冰棒是通透感比较强的材质,我们可以画出一些木棒,这样显得更棒。

这边绘制使用了选区加画笔工具

游戏中的图标怎么设计出来的?

08 增加质感,添加了一些冰棒的反光,完善材质效果。

同样是选区加喷笔绘制

游戏中的图标怎么设计出来的?

09 这部增加了冰棒底部反光

游戏中的图标怎么设计出来的?

10 增加了环境色,让图标看上去颜色不单调,反光处用了一点蓝色冷光做颜色互补。

注意图层画笔用喷笔,叠加效果

游戏中的图标怎么设计出来的?

11 增加高光,钢笔勾勒整个高光,然后做一个蒙版,画笔上下和中间部分擦一下即可得到这样效果。

游戏中的图标怎么设计出来的?

12 进一步完善细节,增加反光和次要高光

游戏中的图标怎么设计出来的?

13 增加折射和水滴细节,这样冰棒更有真实性

游戏中的图标怎么设计出来的?

14 水滴的细节大图,需要使用画笔手绘刻画

游戏中的图标怎么设计出来的?

15 请注意分层,避免工作中的返工

游戏中的图标怎么设计出来的?

16 细节光影和高光不能少

游戏中的图标怎么设计出来的?

17 接下来我们画木棒,注意这边投影我后面给一点模糊,细节会更美妙

游戏中的图标怎么设计出来的?

18 刻画出木棒的厚度,注意反光和边缘转折厚度

游戏中的图标怎么设计出来的?

19 给了2像素的高光,这样木棒看着更自然,不会像个“纸片”

游戏中的图标怎么设计出来的?

20 给了点小细节—透光,

游戏中的图标怎么设计出来的?

21 整体调整,给了一点辉光,这样图标看上去更棒

背景是用渐变工具拉的,简单出效果

游戏中的图标怎么设计出来的?

22 整体饱和度和细节小小调整了下

游戏中的图标怎么设计出来的?

我们图标就画好了?

24 画好了图标需要和整体界面和其它图标品质、细节搭配检查,这样才能判断是否是一个合格的图标设计作品。

把画好的图标放到我们实际项目中的界面中去,检查配色、风格和识别度。

作者:ET

游戏中的图标怎么设计出来的?

游戏中的图标怎么设计出来的?

25 当前图标为选中态,选中时候会比正常图标放大一些。

游戏中的图标怎么设计出来的?

这个时候如果细节画的过多或者太碎需要取舍修改,

如果比例、配色、识别度、风格都没问题,那么很容易就通过了。

教程导师介绍

游戏中的图标怎么设计出来的?

邓杰/Jack

01

前网易游戏设计专家

● 游戏圈从业13年+,培训/外包经验7年+

● 主导和参与过大量国内、外游戏项目

● 曾就职于网易、人人网、掌趣科技

02

受邀分享设计经验

2019年受邀中央美院、河北美院等高校、企业分享设计经验

2018年入职网易游戏担任视觉设计专家

2017年受邀腾讯游戏“光子工作室”分享交流

03

出版畅销书籍

一切劳动,一方面是人类劳动力在生理学意义上的耗费;就相同的或抽象的人类劳动这个属性来说,它形成商品价值。

04

获得诸多荣誉

腾讯GAD游戏学院-UI导师证书

UI中国颁发-优秀培训机构奖杯

汉王杯全国CG作品大赛-最佳创意奖

游戏中的图标怎么设计出来的?

课后练习:

请根据上面说的检查图标设计定律,请选出下面每组你认为最棒的编号。

游戏中的图标怎么设计出来的?

游戏中的图标怎么设计出来的?

游戏中的图标怎么设计出来的?

请大声告诉我答案是?

人已赞赏
UI设计

9种醒目的UI图标

2020-7-8 13:52:41

UI设计

如何快速掌握系统图标的设计方法

2020-9-6 0:39:53

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索