恭喜你成为UI中国推荐设计师 (详情)

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

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

原创文章 分类: 教程 版权: 举报
176 1 3 0
2020-07-31
1.1

游戏中的图标设计思路!


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


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


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


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


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


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




案例分享:


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


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



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


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


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

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



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

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



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



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


01 打开photoshop新建一个1000x1000像素大小的画布,分辨率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交流1群:

1146198611


Powered by Froala Editor

数艺社

人民邮电出版社数字艺术分社

912粉丝/0关注

诲人不倦身经百战小有名气首页新秀原创达人
听说UI设计师更喜欢Sketch,是真的吗?让人震撼的场景原画!PS高手赶紧试一试!

数艺社

数艺社

人民邮电出版社数字艺术分社

诲人不倦身经百战小有名气首页新秀原创达人

你确定要举报游戏中的图标怎么设计出来的? 附教程

如果查出恶意举报,十天内禁止提交任何举报申请。

0/200

上传证据: 超过10M的附件请使用网盘地址

点击上传附件

对谁可见:

全部设计师
  • 全部设计师
  • 推荐设计师和认证设计师

您确认要推荐?

该作品发布时间:2020年07月31日

评分

完整度

启发性

勤奋性

排版布局

推荐心得

建议20-200字以内

0/200

扫描二维码
去手机端查看海报

数艺社

TA已经获得10枚勋章啦

  • 成就勋章

    • 特别勋章

    • 身份勋章

  • 已拥有

  • 作品

    创造者才是真正的享受者。

  • 经验

    经验是一所好学校,可它的学生却经常旷课。

  • 活跃

    大神都是从围观群众开始的

  • 拓展

    作品、经验、活跃还不能满足你?

每人每天仅限5票,快给你心仪的作品鼓励的一票。

投票

账号或密码错误,请重新输入

账号或密码错误,请重新输入

登录

账号或密码错误

发送验证码 120s 验证码错误

登录

京ICP备14007358号-1 / 京公网安备11010802014104号 / Powered by 2008-2020 UI.CN