中国风游戏《花间集》的按钮制作，带教程！

不知道大家注意没有，近年来很多中国风手机游戏的UI设计，大多偏黑，黄、绿、紫色。

这样的↓↓↓

还有这样的↓↓↓

看起来非常普通。

作为游戏UI设计师，当你需要需要设计一套页面的时候，通常会先去网上找素材，找到同类型游戏参考，还有分析其他游戏的优缺点。

有时候在搜索素材时发现下面这类作品，初次看感觉很酷，非常震撼，不过仔细一看能发现很多问题。

这类作品设计大胆，元素丰富，只是忽略了游戏设计师最重要的并不是要界面好看，第一任务是让玩家方便快速的找到信息和需要交互的地方，过多华丽的元素只会让玩家看花眼，在一个界面上面花费更多的思考时间，这样并不是优秀作品。

再来看一个案例。

我们可以看出绿框的装饰元素太多，已经所占比例严重影响到了玩家读取信息和进行交互，这样过多的装饰元素和光影虽然会让作品看着很华丽，但是暴露出没有工作经验，在有经验的面试官前面这样的作品不会脱颖而出，简历的含金量也很低。（可想而知，这种设计师的月薪不会太高）

那么，好的作品应该是怎样的呢？

个人认为优秀的UI设计应该是在交互上有创新，美术的整体资源匹配度，光影和细节设计上面下功夫的，比如下面的作品耐看度就非常高。

上面两张作品是某大厂的上线游戏，我找了和前面界面类似的的结构布局，我们可以看出装饰只是占了很小的一部分，完全不影响交互，但是整体的气氛，比例和细节设计做的非常到位，这些都是我们作品值得借鉴和学习的。

前段时间，听说王者荣耀UI大改版，看了一下，还真不错

这个交互设计，很容易让人产生兴奋和荣耀感，点赞了！

还有PC端的英雄联盟，UI页面的设计也是相当出色。

虽然我平时不怎么玩游戏，但我还是会关注一些优秀的作品。

好了，回归正题。

那如何才能做出不同于行业的个人作品拿到高薪职位呢？

在设计作品之前，个人认为定好配色和明确关键词是一个非常好的方法，不少初学者在做项目练习会有很多想法，今天做A风格和使用A配色，明天看别的作品不错又抄B，过了两周C风格也来了，这样方向不停变，永远让作品在60-70分的上下浮动，不好。

我们这套中国风题材在做之前有很强的方向性，然后基于素材和配色的范围在较短时间就完成了。（3周内）

基于上述的一些出发点，我们从材质和配色方面查询了大量素材，最后集中在绢帛工笔画和自然植物两方面下手。

中国的工笔画是我们的国粹，也是作品的关键字和灵感之一。

荷花和竹子也是中国元素的典型代表，我个人也是非常喜欢竹子这一元素，我们也巧妙的把这类元素加入作品当中。

谈到莲花，在市面上某一些游戏中荷花这个元素只是很直接的被使用，这是一种较为直白的做法，表现力是比较弱的。比如这几张

而且通过大量游戏的使用，再次作品中使用荷花元素会作品没有新意，如何提高作品中的“尖叫度”呢？

我们通过观音大师的宝座得到灵感，做了一张概念图↓↓↓

是不是感觉似乎还缺少了点什么？

所以，又进行了调整之后，变成了这样↓↓↓

是不是好看多了？

通过一张概念图和最终效果图比较，大家不难看到提高的设计细节和整体气氛。

早期的概念稿层次，配色等很差，设计方面也是弱到爆，经过“还我漂漂拳”后修改了不少地方的设计和品质，在需要表现和进行交互的地方用一些饱和度高的颜色来和其它地方做区分，而不重要区域例如云纹，花瓣等弱化处理，几乎没有使用特效。

最终包装作品也是很关键的一个环节，我做了一些情景化的设计，还有加入一些说明文字可以让人更方便得了解作品设计目的，整个包装还是没有过多的使用一些人物和装饰，简约大气一气呵成，希望让视觉焦点还是在作品本身。

最后和大家一起分享下，界面按钮的制作流程，希望大家喜欢。

我们再设计按钮的时候一定要考虑按钮的使用地方和实际大小显示，网络上面有一些按钮作品制作的很“惊艳”，但是不实用，不适合我们游戏项目的研发需要。

所以一般有经验的设计师都会自己在项目界面中检查设计，是否符合项目规范。好的按钮满足这几个条件：颜色鲜明，有凸起感，信息对比明显，无过分装饰。

按钮的最终状态如下↓↓↓

图标绘制步骤

1.启动Photoshop，按Ctrl+N快捷键新建一个文档，
设置【宽度和高度】为1000×650像素，
设置【分辨率】为72像素/英寸，
设置【背景色】为白色，
设置【颜色模式】为RGB颜色，8位

2.将【背景】图层使用渐变填充，两个蓝色色值如下#79b9b7和#398a9f，
选择渐变工具 得到背景，效果如图：

3.在【图层】中，选好颜色#b34544，用【圆角矩形工具】,将圆角半径设置为【110像素】对照图，效果如图：

4.有了基础底板后，继续添加效果。点击样式选择描边和投影，参数如图

5.继续深入细节，复制之前椭圆形按钮，使用描边、内阴影、渐变叠加样式

6.给按钮增加一个玻璃的质感，这边先用颜色#fff4b1选区填充一个长方形，然后使用蒙版减去按钮的外轮廓得到下图效果（按住Ctrl键选中按钮图层得到选区后下移删除长方形区域）相关参数如图

7.增加底板细节，设置样式内阴影，会得到一些凸起的效果，具体参数如下

8. 从网络找到一个中国风纹样素材，作用于下面图层

选中纹样图层点击alt按键，在图层出现一个小箭头点击后，成功作用于下层

如果不能得到下面效果，大家可以尝试右键图层选择混合选项，然后把参数选择1,3项，关闭面板后成功。

记得给一个蒙版，做一些渐变，这样花纹会更自然。

9.选择字体为按钮打上继续，字体颜色#7e5743，记住字体要居中对齐（选择按钮底板和字体然后选择移动），参数和效果如下。加油，就要成功了。

字体也是有细节的哦，请注意品质。

10.为了增加整体气氛和效果加入了一个小高光点，使用矢量圆形工具加上外发光样式，做完感觉的确X格提升不少，参数和效果如下

11.这是一个中国风的按钮，怎么能少了云纹这些必要元素，毫不犹豫用钢笔瞄了云纹素材得到效果如下

12.最后我们可以给一点叠加增加按钮的气氛和效果，选择颜色#ee936d,使用默认喷笔中间画一下，我们可以看出文字的颜色有一些变化

13.最后一步我们可以简单做一点倒影，这样可以让自己简历又多一个作品。

（当然实际界面使用不会出现倒影，直接保存按钮png使用）

合并上面上面按钮全部图层然后 Ctrl+T 垂直翻转，然后高斯模糊，参数为半径6.6像素，完成之后下面加上一个渐变蒙版，两边也渐变擦一下，这样得到一个很自然的效果

14.除此之外我还加了一个小的过渡光亮图层，这样我们中间又增加了一些细节效果，图层模式是叠加，50%透明度，最后小调整完成，如果还想加点光效和小蝴蝶啥的，可以参考上方的界面手机包装图效果。

嗯，一个风格匹配花间集游戏的按钮就这么完成了！感兴趣的小伙伴，不妨动手试试。