UI入门实例做一个个性的播放器

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

  最终效果图


  1.新建一个文件,图象大小设置为200X200象素,72DIP,白色背景,RGB模式,.新建图层1,选择椭圆选框工具在图象中拉一个椭圆的选区出来


  2.选择渐变填充工具,渐变样式选择‘径向’渐变,并将渐变色作如下图般设置,从选区的左上角向选区的右下角拖动鼠标来填充选区


  3.用鼠标双击图层1,在图层样式面板中钩选投影、内阴影、外发光,投影参数不作设置,按默认样式,将内阴影的不透明度降低至20%,距离设置为0个象素,阻塞保持0%,大小设置为2个象素;再将内发光的不透明速降低至15%,发光色也设置为白色,其它不变


  4.新建图层2,选择椭圆渐变工具,按住SHIFT在前一个椭圆的范围内拉一个正圆的选区,再选择渐变填充工具,依然是前一次用的渐变色,简便样式也同样是‘径向’渐变,从正圆选区的左上角(圆形以外)到有右下角(圆形以内)拖动鼠标来填充渐变色


  5.用鼠标双击图层2,在图层样式面板中钩选投影、内阴影、外发光效果,将投影的距离设置为0个象素,扩展为0%,大小设置为8个象素,其它不变;将内阴影的距离设置为0个象素,阻塞为0%,大小为5个象素,其它不变;再将外发光的发光色更改为白色,扩展为0%,大小设置为8个象素,其它不变。完成后再执行菜单-图象-调整-亮度对比度,将亮度设置为10,对比度设置为50


  6.新建图层3,选择椭圆选框工具,按住SHIFT在前一个制作的圆形的中间靠左的位置拉一个正圆的选区,将前景色设置为R:145、G:165、B:125,填充选区


  7.用鼠标双击图层3,在图层样式面板中钩选投影、内阴影、内发光效果,将投影的距离跟大小都设置为6个象素,其它不变;再将内阴影的不透明度设置为100%,距离设置为0个象素,阻塞设置为16%,大小设置为5个象素,等高线选择第二排第五种样式;再将内发光的发光色更改为白色,然后将扩展的数值更改为18%,大小更改为8个象素,其它不变


  8.下面来做液晶屏内的有机层面表现出来。当前图层定在图层3,执行菜单-滤镜-杂色-添加杂色,将数量设置为1%,选择平均分布 ,并钩选‘单色’选项。完成后再执行菜单-滤镜-渲染-光照效果,将光照参数作如(图9)般设置。完成后效果如


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


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


  11.文字完成了,下面再来为液晶

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


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


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


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


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


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


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


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


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


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


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


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

时间: 2024-08-01 18:43:54

UI入门实例做一个个性的播放器的相关文章

使用Qt做一个简易音乐播放器[Phonon浅谈--续]

2010-2-13 使用Qt做一个简易音乐播放器[Phonon浅谈--续]   在第一篇Phonon浅谈中提及到了Phonon这个多媒体框架的一些基本知识,于是想着结合这些基本知识来实践一番,做一个简单的音乐播放器.   [步骤一] 新建一个Qt Gui工程,在建立过程中需要包含Phonon模块,之后生成文件如下图: Qt Gui工程会生成一个ui文件,在这里是mainwindow.ui.双击mainwindow.ui进行一番简单的布局,如下图: 关于这个ui界面,中央位置是一个QListWid

flash-问: 10 我想做一个winform的播放器来播放斗鱼的直播,求大神指点。

问题描述 问: 10 我想做一个winform的播放器来播放斗鱼的直播,求大神指点. 目前没有思路,希望大神出来指点一二.我试过了很多种,利用flash 的插件也无法实现. 解决方案 webbrowser里面加载http://www.douyutv.com/ 解决方案二: 想做一个推荐系统,求志同道合者...

用Flex3.0 做一个简单Flv 播放器

今天早上, 以前高中同学要我教他用 Flex 写一个flv播放器. 网上应该也有不少的教程了, 但中午吃完饭后, 觉得自己写写也不错, 毕竟自己很少在自己博客上写教程, 于是就写写了..... 有错误请高手指出..以下为我今天写在博客上的一篇简单教程: 用 AS2.0 做的 flv 播放器不少了, Flex 3.0 早期又出了, 就尝试着做一个 flv 播放器. 用 Flex3.0 写出来的东西, 本人觉得, 其产物可以是 flex , 也可以是 AIR ( 早期的Apollo ).  好了,

如何创建一个视屏播放器?

问题描述 我是一个学生,我知道像"皮皮狗"."优酷"."迅雷"."暴风影音"."pps"."快播"等等视屏播放器,可是我不知道怎么样才能自己制作一个类似的播放器,请大家给我点意见,我目前了解一点c#语言,也懂得一点asp.net和sqlserver数据库,请高手指点迷津,我很想学,请高手指点一下,我会非常感谢. 解决方案 解决方案二:照着这个例子自己动手做就可以了,地址:

android初学者要做一个pdf的阅读器要从什么地方着手

问题描述 android初学者要做一个pdf的阅读器要从什么地方着手 android初学者要做一个pdf的阅读器要从什么地方着手,这学期刚上android这门课,期末作业是要自己做一样东西,打算做一个pdf格式的阅读器,现在还在一边学习中.阅读器该从哪里开始做,UI层吗?还是先做个类似需求分析的文档?后面引用的图片是不是要用到ps去整理图片? 解决方案 http://download.csdn.net/detail/yshwaishui/9514810 可以帮到你 解决方案二: 先做需求分析,用

swing-java如何做视频或音乐播放器

问题描述 java如何做视频或音乐播放器 java有什么类是用来解码视频或者音乐的.想做个视频播放器.有什么现成的类使用么. 解决方案 MediaPlayer 解决方案二: Vitamiohttp://pan.baidu.com/share/link?shareid=2421751472&uk=423516888 解决方案三: Android中是使用android.media.MediaPlayer:Java中应该有类似的类,但我没有用过.

Windows 8风格应用开发入门 二十一 构建简单媒体播放器

<快速构建Windows 8风格应用20-MediaElement>博文中提到了如何使用MediaElement对象进行播放视频的简单功能,但是在实际应用中需要更复杂的功能,例如:控制视频播放的控件.全屏模式.进度条等等其他功能. 本篇博文中示例使用应用程序中包含的媒体文件,当然我们也可以通过网络或者本地[使用FileOpenPicker]进行加载某一媒体文件. MSDN中关于媒体播放器的示例代码下载地址:XAML media playback sample. 构建基本的MediaElemen

实例解析iOS中音乐播放器应用开发的基本要点_IOS

一.调整项目的结构,导入必要的素材 调整后的项目结构如下: 二.新建两个控制器(1)新建一个控制器,用于展示音乐文件列表界面,其继承自UITableViewController (2)新建一个控制器,用于展示播放界面,其继承自UIViewController (3)在storyboard中,把之前的控制器删除,换上一个导航控制器,设置tableViewController与之前新建的控制器类进行关联 三.音乐文件列表控制器中基本界面的搭建(1)新建一个音乐文件的模型 根据plist文件建立模型:

用media play控件 做个简单的播放器,简单可以播放就可 求高手

问题描述 只要有个按钮选定文件然后播放就可网上看了很多似乎都不对啊 解决方案 解决方案二:这个为什么播放不了视频文件啊求指教ofDialog.Filter="*.avi|*.avi";ofDialog.Title="选择视频文件";ofDialog.InitialDirectory=Application.StartupPath.Substring(0,Application.StartupPath.LastIndexOf("\")).Subst