千千静听个性皮肤之播放器皮肤设计

来源:网络时间:2011-06-21 10:10:24

  一、了解千千静听皮肤制作是怎么一回事?
1、如果您是位从未接触过皮肤制作的人,那么请先仔细看下面的这段话:
如何把设计好的皮肤效果图应用到千千静听软件上去,有两个主导思想您应该了解:一个是需要把效果图上面的控件(或称按钮)单独切出来,另一个是需要把上一点说的控件(或称按钮)的坐标找到,为它精准定位,是不是听的有点眉目了,那么我们接着往下讲。

2、千千的皮肤位于安装目录下的Skin文件夹内,扩展名可以为.skn或.zip,实际上二者是一样的。对于前者,可以先将.skn的扩展名改为.zip(要在系统中显示文件的扩展名,依次点击"工具"-"文件夹选项"-"查看",再把"隐藏已知文件类型的扩展名"前的小勾去除即可),然后将其解压到单独的文件夹,进入该文件夹,可以发现里面包含了许多bmp格式的图片和若干个xml文件,他这些文件便是皮肤的组成部分了,bmp图片是各个窗口的背景及按钮图片,Skin.xml则是配置文件,定义了皮肤的基本信息、窗口及按钮的位置、大小等,它是基于XML格式的文件,可直接用系统自带的记事本或者其它文本编辑工具打开的。

好,了解以上的基础知识后,我们就开始学习实际的制作过程。

  二、开始制作啦!
按照四个步骤进行:(A)切图(B)修改配置文件(C)打包成皮肤文件(D)应用皮肤

(A)切图:
用PS或FW打开设计效果图,整体观察一下,下面讲一下哪些图片是要单独切出来的以及图片的命名。

千千静听个性皮肤之播放器皮肤设计

  一、主窗口的控件
(1)主窗口背景 命名:player_skin.bmp

千千静听个性皮肤之播放器皮肤设计



重点:边缘小圆角的镂空处理,把镂空填充成(#ff00ff)这个颜色,要细心处理这部分哦,边缘要1像素1像素的填充(如上图,镂空部分的颜色处理)

(2)最小化按钮(4个状态)
命名:minimize.bmp
千千静听个性皮肤之播放器皮肤设计
重点:凡是功能按钮都要做4种状态,并把这四种状态做在一张图里,存储成.BMP格式,注意每种状态按钮他的宽度和高度要一致,说一下每种状态代表的含义
第一个状态:自然状态
第二个状态:鼠标划过时的状态
第三个状态:鼠标按下去时的状态
第四个状态:按钮失效时的状态(举个例子,比如播放列表只有一首歌曲,那么“下一首”按钮就是无法点击的,那么此时这个按钮状态就是失效时的状态)

3)迷你模式按钮
命名:minimode.bmp
千千静听个性皮肤之播放器皮肤设计 同上,这里不再赘述了。

(4)关闭按钮
命名:close.bmp
千千静听个性皮肤之播放器皮肤设计

(5)播放进度滑块(本例中播放进度条上的小圆按钮)
命名:progress_thumb.bmp
千千静听个性皮肤之播放器皮肤设计

重点:这个小按钮是需要脱离背景部分单独扣出来的,那么镂空部分需要如何处理才能最终在界面上显示出透明的效果呢,解决的办法和上面的大背景镂空处理一样就是把镂空填充成(#ff00ff)这个颜色,如上图。

(6)播放进度填充背景图
命名:progress_fill.bmp
千千静听个性皮肤之播放器皮肤设计

缓冲进度条填充背景图


该进度条在听在线歌曲发生缓冲时出现,如果没有该元素,默认方式是会将进度条的颜色加深,作为缓冲条颜色显示。
命名:千千静听个性皮肤之播放器皮肤设计


(7)播放列表窗口打开关闭按钮
命名:playlist.bmp
千千静听个性皮肤之播放器皮肤设计

(8)均衡器窗口打开关闭按钮
命名:equalizer.bmp
千千静听个性皮肤之播放器皮肤设计

(9)歌词窗口打开关闭按钮
命名:lyric.bmp
千千静听个性皮肤之播放器皮肤设计

(10)“上一首”按钮
命名:prev.bmp
千千静听个性皮肤之播放器皮肤设计

(11)“播放”按钮
命名:play.bmp
千千静听个性皮肤之播放器皮肤设计

(12)“暂停”按钮
命名:pause.bmp
千千静听个性皮肤之播放器皮肤设计

(13)“下一首”按钮
命名:next.bmp
千千静听个性皮肤之播放器皮肤设计

(14)“打开播放文件”按钮
命名:open.bmp
千千静听个性皮肤之播放器皮肤设计

(15)音量小喇叭按钮
命名:mute.bmp
千千静听个性皮肤之播放器皮肤设计

(16)音量进度背景填充图
命名:progress2.bmp
千千静听个性皮肤之播放器皮肤设计

(17)音量滑块
同(5)

  二、均衡器窗口的控件
(18)开启按钮
命名:eq_enabled.bmp
千千静听个性皮肤之播放器皮肤设计

(19)重设按钮
命名:reset.bmp
千千静听个性皮肤之播放器皮肤设计

(20)配置按钮
命名:eq_profile.bmp
千千静听个性皮肤之播放器皮肤设计

(21)关闭按钮,切图同主窗口上的关闭按钮
(22)平衡器环绕声所有滑动的小按钮 同(5)
(23)平衡,环绕填充背景
命名:eqfactor_full2.bmp
千千静听个性皮肤之播放器皮肤设计

(24)均衡填充背景
命名:eqfactor_full.bmp
千千静听个性皮肤之播放器皮肤设计

  三、播放列表窗口的控件
(25)关闭按钮,同主窗口关闭按钮
(26)工具条按钮,
命名:playlist_toolbar.bmp
千千静听个性皮肤之播放器皮肤设计

热点状态命名:playlist_toolbar_hot.bmp
千千静听个性皮肤之播放器皮肤设计

(27)滚动条上下按钮
命名:scrollbar_button.bmp
千千静听个性皮肤之播放器皮肤设计重点:将上下按钮拼在一张图上制作

(28)滚动条滑动按钮
命名:scrollbar_thumb.bmp
千千静听个性皮肤之播放器皮肤设计

(29)滚动条背景
命名:scrollbar_bar.bmp
千千静听个性皮肤之播放器皮肤设计

  四、歌词秀窗口的控件
(30)关闭按钮,同主窗口
(31)总在最前按钮
命名:ontop.bmp
千千静听个性皮肤之播放器皮肤设计

文章内容来源于网络,不代表本站立场,若侵犯到您的权益,可联系我们删除。(本站为非盈利性质网站) 联系邮箱:rjfawu@163.com
多特网友 2013-11-02 20:57:31 回复
然后呢?只做控件就好了??
多特网友 2013-11-02 20:57:31 回复
然后呢?只做控件就好了??