adobeui界面设计软件,adobe ui设计

  adobeui界面设计软件,adobe ui设计

  最近,有网友问边肖如何制作UI界面。边肖今天与朋友分享了一个超级酷的Adobe Photoshop CC 2017 《UI设计小教程》。大家一起打造流光纹理界面吧~。感兴趣的朋友继续往下看!希望能帮到你。

  Adobe Photoshop CC 2017制作炫酷的UI界面:

  1.创建画布

  新建一个790*400的画布(别忘了给文件命名~)

  2.生产背景

  Alt Delete用#1c46e3填充背景色,并为其添加渐变叠加图层样式(如下图所示)

  3.创建接口基础。

  选择圆角矩形工具,创建圆角半径为250*90、2像素的白色圆角矩形,并为其添加图层样式(如下图所示)。

  目前为止的效果如下~(亲爱的,你跟上节奏了吗?)

  4.给底座添加效果。

  新建一个图层,选择椭圆选区工具画一个选区如下图所示,羽化(50px),用Alt Delete填充黑色(如下图所示)。

  使绘制的“黑羽图”Ctrl T变平(如下图所示)

  给这个图层添加一个蒙版,用笔刷和选择工具制作(如下图所示)。

  调整到柔光模式(如下图所示)

  5.制作彩色装载带

  矩形工具绘制一个288*2的矩形,为其添加渐变叠加图层样式,并在其下方绘制一条1PX的黑色直线(如下图所示)。

  6.现在给整个界面添加细节

  在这一步中,通过线条工具和选择工具来细化界面(如下图所示)。

  你可以按照上面的方法画出其余的细节(效果如下图)

  7.向界面添加文本,并将加载修改为36%状态。

  添加文案,给它添加1px装饰效果,给图层蒙版添加颜色加载,使其达到36%(如下图)。

  8.加载时添加预期的动画效果。

  这里主要是灵活运用选区工具、笔刷工具、铅笔工具(铅笔工具用于绘制1px点)来绘制类似灯光的效果(如下图所示)。

  9.放上你心爱的小图标,适当装饰一下~

  因为整个界面风格比较简洁,所以在选择icon ~(如下图)的时候也要选择风格相对一致的。

  10.最后给图标和文字加上光效装饰,再加上自己的标记,就大功告成了~

  灯光效果使用了这里的材料——http://www.zcool.com.cn/gfx/zmza1njgw.html(如下图所示)

  在你有了一些初级设计能力之后,细节的处理就成了你高级设计的重中之重!

  所以大家一定要记得培养“处理细节的能力”!

郑重声明:本文由网友发布,不代表盛行IT的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。

留言与评论(共有 条评论)
   
验证码: