当前位置:丝路教程网 > UI设计 > UI教程 >

由易到难,如何UI设计出精美的按钮

2018-02-02 14:16 来源: 丝路教程网 分类: UI教程
234 作者:丝路教程网

[导读] 按钮的设计是UI设计中必不可少的一个元素,怎么设计并制作出一个个精美得按钮呢?丝路UI设计培训机构的老师为你分享一下UI设计的教程,从易到难。

  按钮的设计是UI设计中必不可少的一个元素,怎么设计并制作出一个个精美得按钮呢?丝路UI设计培训机构的老师为你分享一下UI设计的教程,从易到难。

  LV. ★

  刚刚接触UI设计,学做按钮的时候,只会加个底色,搞个阴影,字体纯白,然后在小聪明的调个圆角。

  

 

  LV. ★★

  (描边、字体、内阴影)

  看了很多的UI设计案例,学会了一些小技巧,内描边1PX深色描边使效果有所提升。注意描边要贴近按钮色,不要用纯黑和纯白。

  其次,字体的颜色也同样不要用纯白,要用贴近按钮色的单色最佳。

  当学会了内阴影这项技能后,你就发现高光的按钮看起来非常美好。

  

 

  LV. ★★(渐变叠加)

  渐变叠加可以让按钮产生更多质感效果,多多尝试,会有新的发现。

  

 

  LV. ★★★(1像素的高光)

  这是渐变的一种,明暗清晰。这里要说的是利用矢量图做出1px的高光,伴起左、右、上,让按钮质感更加强烈。

  

 

  LV. ★★★(叠加的模糊光)

  这是常用的一种网页按钮。甚至在红色的按钮叠加黄光,黑色的按钮叠加紫光等等,具体大家自由发挥。

  

 

  LV. ★★★(图案叠加)

  图案叠加更多的是加强纹理,比如贴上皮革、金属、木纹等素材,强调按钮的与众不同。这里的叠加,扩展了纹理。

  

 

  LV. ★★★★(外发光)

  利用文字的外发光,让按钮看起来更富有光感,注意发光的颜色要贴近按钮色,不要有太大的差异。

  

 

  LV. ★★★★(投影)

  不要总使用默认的投影,多尝试他们的数值,会有不一样的感觉。还有在字体上加入1px的内阴影,让字体更加凸起。

  

 

  LV. ★★★★(1px的内阴影和投影)

  了解了内阴影和投影的使用,就多玩玩1px的威力。它会让你的按钮看起来凹陷感更强烈。

  

 

  LV. ★★★★(逆渐变)

  大部分的这种技能用在按钮触碰效果,使其和静态按钮拥有很大的反差,提醒用户鼠标悬浮于此。

  

 

  LV. ★★★★★(斜面和浮雕)

  这个技能用得好也是一神技,他能让按钮效果片刻出结果,也同样能制作金属质感,当然,这需要调整它的曲线,你可以试试。

  

 

  LV. ★★★★★★(外围辅助)

  这种外围的辅助,让按钮看起来更是掉到了坑里。更加的吸引眼球,引起注意。其次注意这个按钮PSD的渐变,不是图层叠加而是直接渐变。

  

 

  LV. ★★★★★★(厚度)

  这种按钮的现在用的非常多,加上一层使其空间感更加强烈,很多的手机应用下载按钮就是用到了他。

  

 

  LV. ★★★★★★(透明)

  外围的辅助,也有这样的功能,调整它的填充或者透明度,这样的按钮在有背景的页面里效果尤为突出。之前我们说过的光叠加,也可以这样叠加。

  

 

  LV. ★★★★★★★(内发光)

  内发光的按钮,掌握不好的很容易出丑,如果用的好,也为自己的设计提分。内发光不限于亮光,也适用于暗光。

  

 

  差不多,讲到这里,也没有太多的关于按钮的技能可以讲解了,接下来的问题就是细节问题,在做设计的设计时候,多注意细节,也许一个设计的改变也会有天壤之别。今天关于UI设计按钮的教程分享就到这里了,喜欢这样的教程分享,可以多多关注我们丝路教程网。


免责声明:

丝路教程网的部分文章信息来源于网络以及网友投稿,本网站只负责对文章进行整理、排版、编辑,是出于传递更多信息之目的,如权利人发现存在误传其作品情形,请及时与本站联系。

由易到难,如何UI设计出精美的按钮

的相关文章
Copyright © 2008-2017 blog.silucg.com 丝路教程网 版权所有 网站地图
点击这里给我发消息
丝路教育