手把手教你用PS制作炫酷的UI界面

吃菜的鸟叫菜鸟

吃菜的鸟叫菜鸟

2016-02-19 12:51

有一种朋友不在生活里,却在生命力;有一种陪伴不在身边,却在心间。图老师即在大家的生活中又在身边。这么贴心的服务你感受到了吗?话不多说下面就和大家分享手把手教你用PS制作炫酷的UI界面吧。

今天给“小伙伴”们带来一个酷炫的《UI设计小教程》,让我们一起来打造一枚流光质感界面吧~。

1.创建画布

新建一张790*400的画布(不要忘记文件命名哈~)

手把手教你用PS制作炫酷的UI界面

2.制作背景

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

手把手教你用PS制作炫酷的UI界面

手把手教你用PS制作炫酷的UI界面

手把手教你用PS制作炫酷的UI界面

3.创建界面底托

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

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com)

手把手教你用PS制作炫酷的UI界面

手把手教你用PS制作炫酷的UI界面

到此为止的效果如下图~(亲,你有跟上节奏吗)

手把手教你用PS制作炫酷的UI界面

4.为底托添加效果

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

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com)

手把手教你用PS制作炫酷的UI界面

手把手教你用PS制作炫酷的UI界面

将绘制好的“黑色羽化图形” Ctrl+T 变得扁一些 (如下图所示)

手把手教你用PS制作炫酷的UI界面

为该图层添加蒙版结合画笔和选区工具制作 (如下图所示)

手把手教你用PS制作炫酷的UI界面

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

手把手教你用PS制作炫酷的UI界面

5.制作彩色Loading条

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

手把手教你用PS制作炫酷的UI界面

手把手教你用PS制作炫酷的UI界面

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

这一步主要是通过直线工具和选取工具对界面进行细化 (如下图所示)

手把手教你用PS制作炫酷的UI界面

大家可以按照上述方法绘制其余的细节(效果如下图)

手把手教你用PS制作炫酷的UI界面

7.为界面添加文字,并将loading修改到36%状态

加入文案,为其添加1px修饰效果,将彩色loading添加图层蒙版,做成36%状态 (如下图所示)

手把手教你用PS制作炫酷的UI界面

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

这里主要是灵活运用选区工具,画笔工具,铅笔工具(铅笔工具作用于绘制1px点)进行仿光效绘制 (如下图所示)

手把手教你用PS制作炫酷的UI界面

9.放上自己心爱的小icon,做适当修饰~

因为整个界面风格是简约风,所以在选择icon的时候也要选用风格相对一致的哟~ (如下图所示)

手把手教你用PS制作炫酷的UI界面

10.最后为icon和文字添加光效修饰,再加入属于你自己的印记,大功告成~

光效运用了这里的素材-http://www.zcool.com.cn/gfx/ZMzA1Njgw.html (如下图所示)

手把手教你用PS制作炫酷的UI界面

在你具备了一些初级设计能力之后,细节的处理就成为了,你进阶的重中之重啦!

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

展开更多 50%)
分享

猜你喜欢

手把手教你用PS制作炫酷的UI界面

设计创意
手把手教你用PS制作炫酷的UI界面

手把手教你用Photoshop制作移轴摄影效果

设计创意
手把手教你用Photoshop制作移轴摄影效果

什么是极简主义 如何打造极简风格家居

家居设计 装修设计
什么是极简主义 如何打造极简风格家居

PS教程!手把手教你绘制炫酷的科比篮球海报

PS PS教程
PS教程!手把手教你绘制炫酷的科比篮球海报

手把手教你用illustrator创建精细的信封

Illustrator
手把手教你用illustrator创建精细的信封

2017榻榻米书房设计装修效果图 榻榻米书房设计图片

榻榻米 书房 装修设计 书房设计 平面设计
2017榻榻米书房设计装修效果图 榻榻米书房设计图片

手把手教你用photoshop做重影效果教程

设计创意
手把手教你用photoshop做重影效果教程

PS教程!手把手教你绘制一枚酷炫的多彩圆环

PS PS教程
PS教程!手把手教你绘制一枚酷炫的多彩圆环

2017春夏女装风衣外套流行趋势

服装设计 平面设计 设计 服装搭配
2017春夏女装风衣外套流行趋势

超级简单的鼠绘教程:绘制一粒写实的电池

超级简单的鼠绘教程:绘制一粒写实的电池

加拿大Emmanuel Garant人物油画作品

加拿大Emmanuel Garant人物油画作品
下拉加载更多内容 ↓