• Welcome to Journal web site.

我是 UI设计师

让设计传递下去

Next
没有了

游戏UI界面教程之保卫萝卜篇

Data: 2014-03-09 22:15:10Form: JournalClick: 696

      作为人气最旺的几款手机游戏之一,《保卫萝卜CarrotFantasy》凭借着精致的UI设计、简单的操作方式以及有趣的闯关模式,获得了众多玩家的好评。

该游戏主要的玩家是年轻女性及儿童,所以游戏的颜色会采用鲜艳的配色,风格也走可爱调配的风格,在此这边特别针对这款游戏的UI界面设计来进行详细解析。

这个就是这次要临摹的对象,保卫萝卜里头的登陆框。


第一步:勾出界面所需的基本图形,并填色。

保卫萝卜

第二步:添加基本质感

保卫萝卜

这里的按钮设计步骤是这样的:

保卫萝卜

其实也就一层凸面,一层凹面,加上X和高光一共就6层,这里不一定要强调跟我一样的图层数量,感觉看起来匀称,真实就行。

保卫萝卜

冰可以分两层来设计,第一层用图层样式的渐变效果,另外一层用剪切蒙版叠加就直接搞定。

保卫萝卜

绳子的设计重点在他的形态要自然,只要做好一截就行,其他部分复制过去即可。

圆环跟树叶就是简单的叠加渐变跟图层样式,就没什么好说了。

保卫萝卜

木桩就是个圆柱体,中间为矩形,上下为椭圆形,纹理就是用普通的木纹材质叠加上明暗关系就有立体感了,当然有耐心的人可以再加上刀痕或者雕刻来更加丰富细节

保卫萝卜

现在就是把做好的小元素复制调整好形态叠起来就有大概的效果了,现在还是感觉很平,我们需要再丰富一些明暗关系。

保卫萝卜

设定好光源,这边的主要光源在前面,所以阴影在中间,布料四周又比较紧绷,所以高光肯定也在四周,阴影在中心。

布料的斜线纹理采用四次连续次方图来制作,具体方法可百度。

保卫萝卜

最后添加上文字及露珠。

保卫萝卜

文字采用投影加内阴影即可实现。

保卫萝卜

按钮的制作方法也是一层凸面一层凹面,然后高光文字,底部加上一个底层来衬托出按钮的光度。

水珠画一个椭圆形,然后加图层模板,把中间部分用笔刷抹掉,加上暗部及高光。

Name:
<提交>