当前位置:首页 > PS教程 > 设计教程

PS制作个性的网页播放器UI设计

  • 2021-05-14 10:12:58
  • 来源/作者:互联网/佚名
  • 己被围观

今天在网上看到了一个播放器的实例教程,感觉很不错,很适合UI入门新手练习,发来给大家看看,一起学习啊,好了废话不说了。

9.好了,屏幕差不多就这样完成了,下面要做的是液晶屏幕上的图案及文字。将前景色设置为黑色,用文字输入工具在在图层3的上面输入文字88-88,并可用自由变换命令将文字缩放到适当大小,完成后用鼠标双击此图层,将图层的混合模式更改为柔光,再在图层样式面板中钩选斜面和浮雕效果,将浮雕的深度设置为1%,大小跟软化都设置为0个象素,其它不变,并将此图层的不透明度更改为50%

Photoshop制作个性的网页播放器UI设计

10.将文字图层复制一个置于图层的最顶层,将图层的混合模式改为叠加,并取消斜面和浮雕效果的设置,并将图层的不透明度更改为100%,再用文字输入工具,将此行文字修改为别的数字或字母

Photoshop制作个性的网页播放器UI设计

11.文字完成了,下面再来为液晶屏加一些小图标,在两个文字图层的上面新建图层4,用矩形选矿工具在画面上框一个横向的宽度为1个象素的矩形选区,填充为黑色,将此黑线条垂直等距离的复制几份,再将所有黑线条的图层合并,再用矩形选框工具框选不要的部分,将其删除

Photoshop制作个性的网页播放器UI设计

12.将图层4的混合模式更改为柔光,再将图层4复制一份为图层4副本,用矩形选框工具,将一些黑色线条的块框选后删除,来表达出音乐播放时节奏灯的跳动状

Photoshop制作个性的网页播放器UI设计

13.如想再做点别的图案或文字上去的话,方法还是相同的,自己想象啦

Photoshop制作个性的网页播放器UI设计

14.将图层1、2、3连接,执行菜单-编辑-自由变换,将连接的播放器的3个底层图案旋转个角度,这样看上去的播放器就不那么死板了

Photoshop制作个性的网页播放器UI设计

15.在图层面板的最顶层新建一个图层,按住CTRL点击液晶显示屏的图层,使其选区浮起,执行菜单-选择-修改-收缩,将选区收缩3个象素,再选择椭圆选框工具,按住SHIFT+ALT后框选圆形选区的左上部分,这样选能将不需要的右下部分的选区直接去除

Photoshop制作个性的网页播放器UI设计

16.在选择渐变填充工具,渐变样式选择线性样式,再将渐变色的左右端的颜色都设置为白色,并将右端颜色的不透明度设置为0,在选区中从右下角至左上角拉动鼠标来填充选区

Photoshop制作个性的网页播放器UI设计

17.下来为播放器加两个简单的按钮,在图层面板的最顶端新建一个图层,用钢笔工具,沿着图层1中播放器底层椭圆的右下部分的弧度勾画出一个回旋标式的轮廓(图19),将路径转换为选区,到图层1中将选区中的部分复制,并粘贴到新建的图层中

Photoshop制作个性的网页播放器UI设计

18.双击此图层,在图层样式面板中钩选投影、内发光及斜面和浮雕效果,将投影的距离设置为0个象素,大小设置为4个象素,再将投影的等高线更改为第二排第四种样式,其它不变;再将内发光的发光色设置为白色,其它不变;将斜面和浮雕中的大小设置为2个象素,软化设置为3个象素,并将等高线样式更改为第二排第三种样式,其它按默认设置,不做更改。完成后将图层的混合模式更改为正片叠底

Photoshop制作个性的网页播放器UI设计

19.执行菜单-图象-调整-亮度/对比度,将亮度的数值调节至最高,再用多边形套索工具框选出按钮的中间分割部分,并将选中部分删除

Photoshop制作个性的网页播放器UI设计

20.完成后再在图层面板的最上层新建一个图层,选择铅笔工具,将画笔大小设置为1个象素,前景色设置为黑色,在按钮上画两个小图标

Photoshop制作个性的网页播放器UI设计

21.用鼠标双击小图标的图层,钩选投影、内发光、斜面和浮雕效果。将投影的距离跟扩展都设置为0,大小设置为2个象素,并将等高线样式更改为第一排第三种样式,其它不变;再将内发光的发光色更改为白色,其它不作设置;将斜面和浮雕中的样式更改为外斜面,其它不变

Photoshop制作个性的网页播放器UI设计

22.好了,按钮也完成了,这个简单的微型播放器也就可以告一段落了,对颜色不满的话可以通过调节菜单-图象中的色彩平衡(CTRL+B)和色相/饱和度(CTRL+U),或者曲线命令(CTRL+M),也可以用渐变映射命令(ALT-I-M)来调整

Photoshop制作个性的网页播放器UI设计

好了教程到这里就结束了,这个实例感觉,很适合新手,只要大家认真做,应该都可以做出来的,一起学设计网分享。

*PSjia.COM 倾力出品,转载请注明来自PS家园网(www.psjia.com)

更多精彩内容

  • 文字排版技巧知识大全 文字排版技巧知识大全
  • 电商产品PS修图:金属质感效果 电商产品PS修图:金属质感效果
  • 色彩叠加在各类设计中的巧妙运用 色彩叠加在各类设计中的巧妙运用
  • PS CS5制作逼真绳子 PS CS5制作逼真绳子
  • PS绘制柔美飘逸的丝带 PS绘制柔美飘逸的丝带
  • PS制作一款科技感的立体插图 PS制作一款科技感的立体插图
  • banner制作初级教程 banner制作初级教程
  • 如何设计一个高端大气上档次的 logo? 如何设计一个高端大气上档次的 logo?