多语言展示
当前在线:421今日阅读:20今日分享:50

植树小游戏按钮UI设计

对于各界交互界面师来说,” 按钮”的制作无疑是不可缺少的一个组成部分,但是习惯于运用多个图层叠加出非常漂亮的效果但是修改极为不便。今天我们来介绍一种如何用图形渐变的方式以及图层样式简化这些图层来完成这一效果。 先睹为快:
工具/原料
1

Photoshop

2

计算机

方法/步骤
1

首先建立钢笔路径,形状随意、这里就以这个形状为例吧!

2

之后是添加渐变调整图形,渐变颜色位置随意(当然也是可以根据自己的习惯来定啦)。

3

之后就是图形样式的工作了,先给一个投影的效果,参数自己随意调整,没有绝对的限定。

4

添加内阴影效果,这个省略去了文字下方的投影,以内阴影代替(注意曲线与数据的变化)数据一定要调整之后再决定,根据图形而变化。

5

添加描边样式,描边中一定要注意样式和渐变的颜色。添加光泽,随意调整数据,直到自己满意位置。

6

添加内发光效果,这里的内发光代替了内阴影,作为边缘与按钮本身分离的界限。添加图案叠加、这里需要注意先预设好图案,这种条纹形状的图案比较出效果,绘制起来也很简单,这里就将就用这个了吧!

7

添加外发光,这里的外发光代替了阴影虚化边缘,增加了按钮与背景的距离。

8

添加渐变叠加,这一步“歪瑞“重要因为不仅要在按钮中创造出一个圆,而且还要做出立体边缘的感觉,这就一定要注意渐变的颜色位置与透明度。

9

最后添加斜面和浮雕效果,这里的斜面和浮雕仅仅是代替了圆中的右下方阴影。虽然看起来并不出奇,但是数据调试相对来说还是有点复杂的,这里要注意的是角度与高度。

10

整体按钮的“分叉投影“。其实就是将按钮设定在一个”组“之下,给”组“一个羽化的三角遮罩,就成为类似分叉的投影了。

12

填充渐变颜色是一定要根据图形的形状来添加,以此为例渐变的样式应为菱形、角度135,这样出现的效果与正常的条纹效果比较相符合。

13

添加投影。投影一定是与形状相符的、这个案例当中很明显、阴影要强烈一些。以拉开彩带中间与下方按钮的距离。

14

添加斜面浮雕效果、这里需要注意的是条纹叠加让图形增加一些质感。

15

添加内阴影增加立体效果。

16

最后添加渐变叠加,这步很重要,因为它是根据图形摆放效果,叠加后的效果就像是真是彩带翻折后的阴影。

17

最后添加文字以及能够出更好效果的素材丰富画面。

注意事项
1

严谨细节才能做出满意的作品。

2

自己在做的时候可以把色彩的饱和度调高一点,也许效果会很好一点!

推荐信息