hao333 4629 2023-09-19 23:50:43
今天给“朋友”们带来了一台酷炫的《UI设计小教程》。让我们一起创建一个streamer接口。
Adobe Photoshop CS6做出酷炫的UI;
创建画布
新建一个790*400的画布(别忘了给文件命名~)
2.生产背景
Alt Delete用#1c46e3填充背景色,并为其添加渐变叠加图层样式(如下图所示)。
3.创建接口库
选择圆角矩形工具,创建一个半径为250*90,像素为2的白色圆角矩形,并为其添加图层样式(如下图所示)。
目前为止的效果如下~(亲爱的,你跟上节奏了吗)
4.给底座添加效果。
新建一个图层,选择椭圆选区工具绘制选区如下图所示,羽化(50px),用黑色填充AltDelete(如下图所示)。
使绘制的“黑色羽化图”Ctrl T变平(如下图所示)。
给图层添加蒙版,用笔刷和选区工具制作(如下图所示)。
调整到柔光模式(如下图所示)
5.制作彩色装载带
矩形工具绘制一个288*2的矩形,为其添加渐变叠加图层样式,在其下绘制一条1PX的黑线(如下图所示)。
6.现在给整个界面添加细节。
这一步主要是通过线条工具和选择工具来细化界面(如下图所示)。
你可以按照上面的方法画出其余的细节(效果如下)
7.向界面添加文本,并将加载状态修改为36%。
添加文案,给它添加1px装饰效果,给图层蒙版添加颜色加载,使其达到36%(如下图)。
8.为加载添加加载时预期的动画效果。
这里主要灵活运用选区工具、笔刷工具、铅笔工具(铅笔工具用于绘制1px点)绘制仿光效果(如下图所示)。
9.换上你心爱的小图标,做适当的修改~
因为整个界面风格比较简洁,所以在选择图标的时候也要选择相对一致的风格(如下图所示)
10.最后给图标和文字加上光效装饰,再加上自己的标记,就大功告成了~
灯光效果使用here-http://www.zcool.com.cn/gfx/zmza1njgw.html材质(如下图所示)。
当你有了一些初级的设计能力之后,细节的处理就成了你进阶的重中之重!
所以大家一定要记得培养“处理细节的能力”!
发表评论
诺伊百科知识大全提供各种百科知识,包括生活知识,生活技巧,生活窍门,历史知识,地理知识,网络知识,音乐知识,科普知识,旅游知识等等百科知识,课外知识,带你遨游知识的海洋。
Copyright © 2023 诺伊网支持 粤ICP备16109411号-2
暂时没有评论,来抢沙发吧~