JAS|【干货】游戏中的图标怎么设计出来的?
本帖最后由 Jack- 于 2022-3-21 11:04 编辑大家好，我是邓杰（Jack）老师，本次每周一练带来的是一枚游戏物品图标-冰棒。
炎炎夏日已经到来，马上就进入暑期时间，还记得小时候暑假是最舒服的，可以和朋友整天打游戏，出去疯玩，渴了就喝北冰洋汽水，热了吃绿舌头、娃娃头雪糕，晚上和大人们一起看射雕英雄传。
那时候没有智能手机和网络，生活简单节奏慢，挺好哒~
来，入正题，我们本次每周一练的是-粉色冰棒
在游戏公司研发项目，我们需要给项目组制作相应的游戏UI界面、图标，而图标的设计制作需要和界面的风格和配色相互呼应。
尤其是图片的大小尺寸，往往根据使用不同，绘制尺寸需要300-1500大小，比如正常图标通常是300-500像素就够了，而logo、徽章、特卖商品需要绘制1000左右甚至更大尺寸。
外包上线项目《苍之纪元》-已授权可展示
我们通常在绘制草图阶段就会把大图和小图同时放PS软件中一起检查识别度、项目匹配，在绘制时候就会注意细节的设计等问题。
外包上线项目《苍之纪元》-已授权可展示
所以如果是新人，在入行初期养成良好的工作习惯往往会提高工作效率也会更加容易画出好的品质作品。
案例分享：相信很多设计朋友在工作中都会收到各类奇葩的工作需求，比如没有参考图，没有尺寸，没有设计说明等三无产品，但是——我们必须给出一个碉堡的设计出来。
另外除此之外可能整个工作过程也是没有人帮助、没有领导拍板、没有同事交流等囧境……
下面情节如有雷同，不是巧合，是缘分！
某个周五快要下班的晚上，我手机工作群收到了项目同事的工作需求，关键是当晚必须要！！
于是我放下背包重新打开电脑，开始拼命收集素材加速干活，（这也是很多设计师没有女/男朋友的主要原因，加班太多）
生活中很多不明白的事情我喜欢多动手网上找，一会时间我就明白为啥叫绿舌头了。
好有魔性的冰棒~
原来如此？！
几分钟后我已经找了很多参考图，心里也有了大致的设计思路。
绘制图标我喜欢画的大一些，避免游戏项目做HD（高清）版本，如果画太小要重画。
打开photoshop新建一个1000x1000像素大小的画布，分辨率72就可以。
简单的绘制一下我们需要绘制的图标草图，个人一般喜欢用ps自带的硬边笔刷。
按照素材做了一个绿舌头版本，
总是看着很奇怪，这是为啥呢？？
既然项目都说了只要项目合适，颜色可以自定义。
于是换了下颜色，试试粉红色版本
这边草图大家可以把大体的明暗关系简单刻画下，
这样心里有数后期画成啥样。
截图是我个人笔刷，前面4-5个笔刷使用频率最高的，硬边笔刷、喷笔、升级版19号笔刷、特效笔刷等。
（建议小伙伴花一些时间整理自己常用的笔刷，这样会大大提高我们日后工作效率）
使用渐变工具或者平涂加喷笔都可以得到下面效果，
这边建议大家可以先钢笔勾勒一下绘制区域，这样画出来的图标更加精美哟~
因为冰棒是通透感比较强的材质，我们可以画出一些木棒，这样显得更棒。
这边绘制使用了选区加画笔工具
增加质感，添加了一些冰棒的反光，完善材质效果。
同样是选区加喷笔绘制
这部增加了冰棒底部反光
增加了环境色，让图标看上去颜色不单调，反光处用了一点蓝色冷光做颜色互补。
注意图层画笔用喷笔，叠加效果
增加高光，钢笔勾勒整个高光，然后做一个蒙版，画笔上下和中间部分擦一下即可得到这样效果。
进一步完善细节，增加反光和次要高光
增加折射和水滴细节，这样冰棒更有真实性
水滴的细节大图，需要使用画笔手绘刻画
请注意分层，避免工作中的返工
细节光影和高光不能少
接下来我们画木棒，注意这边投影我后面给一点模糊，细节会更美妙
刻画出木棒的厚度，注意反光和边缘转折厚度
给了2像素的高光，这样木棒看着更自然，不会像个“纸片”
给了点小细节—透光，
整体调整，给了一点辉光，这样图标看上去更棒
背景是用渐变工具拉的，简单出效果
整体饱和度和细节小小调整了下
我们图标就画好了？
还记得我们之前教过的，画好了图标需要和整体界面和其它图标品质、细节搭配检查，这样才能判断是否是一个合格的图标设计作品。
把画好的图标放到我们实际项目中的界面中去，检查配色、风格和识别度。
作者：ET
当前图标为选中态，选中时候会比正常图标放大一些。
这个时候如果细节画的过多或者太碎需要取舍修改，如果比例、配色、识别度、风格都没问题，那么很容易就通过了。
课后练习：
请根据上面说的检查图标设计定律，请选出下面每组你认为最棒的编号。
请大声告诉我答案是？谢谢，下期见。公众号素材每周更新，需要可自取（复制链接粘贴使用）链接：https://pan.baidu.com/s/16bnDJgxSIaoOfMnjEAuvbQ提取码：0uht
游戏UI界面、图标、二次元、VIP班随到随学 夏季班7.17日正式开课，可报名 秋季班10月左右开课，可预定 课程咨询微信jackartstudio
更多免费教程和素材，公众号菜单栏可查阅下载
谢谢分享！！！！！！！！
页:
[1]