千千静听皮肤制作.docx
- 文档编号:9952340
- 上传时间:2023-02-07
- 格式:DOCX
- 页数:26
- 大小:1MB
千千静听皮肤制作.docx
《千千静听皮肤制作.docx》由会员分享,可在线阅读,更多相关《千千静听皮肤制作.docx(26页珍藏版)》请在冰豆网上搜索。
千千静听皮肤制作
2008年12月25日更新:
增加在线歌曲的缓冲进度条皮肤元素。
命名:
progress_fill2.bmp
一、了解千千静听皮肤制作是怎么一回事?
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
缓冲进度条填充背景图
该进度条在听在线歌曲发生缓冲时出现,如果没有该元素,默认方式是会将进度条的颜色加深,作为缓冲条颜色显示。
命名:
progress_fill2.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
五、音乐窗窗口的控件
上图为千千音乐窗界面,其中用绿色边框套住的部分为显示部分,和皮肤设计无关,就是说我们要做的是绿色边框外的内容。
好,明确了制作部分,开始讲制作过程,首先,要制作一个窗口背景,就是图中显示的最外面的蓝色风格的窗口,像主窗口一样,不难理解,格式同样为.bmp,需要设置透明色背景(#FF00ff),注意圆角像素的处理。
然后制作窗口里的控件,上图中用红色框标出了所有控件,包括后退、前进、刷新、关闭、多选框、连接文字区。
其中后退、前进的功能是像网页一样的控制当前页面,并不是歌曲的后退、前进,不过也没影响,不多说了。
最后,还要制作一个按钮,用来打开音乐窗,按钮要做在主窗口上,做主窗口时别忘了留出地方哦...
具体切图示例如下,大家一看就会明白啦:
增加新的音乐窗和下载管理标签按钮很简单,只需在音乐窗代码块中加入如下2行代码:
browser_mini.bmp表示音乐窗按钮图片
browser_download.bmp即是下载管理按钮图片
按钮状态都是四种(初始、鼠标浮动、按下、不可点),位置坐标和其它的元素一样,很简单吧:
)
(B)修改配置文件
一、首先看一下skin.xml这个配置文件
以上是皮肤的基本描述信息,请根据您自己的情况填写,分别是版本号,皮肤名称,皮肤作者,地址,电子邮箱,透明色的设置
1、
它是描述主窗口的参数设置的
Position是坐标定位,image是图片名称,就是我刚才讲述的每个图片的命名
坐标由4个数字组成,中间用逗号隔开,前两个数字是图片左上角的x坐标和y坐标,后两个数字是图片右下角的x坐标和y坐标,请注意,这里的右下角x坐标和y坐标都要多算一个点,否则播放器会少显示两条边;
这里需要注意的是:
每个窗口的位置是组合窗口后抓的坐标,而每个窗口上面的按钮控件是单独定位的,比如,我们要获得歌词秀窗口上面的关闭按钮的坐标,是要把歌词秀窗口的左上角定位在切图软件(0,0)坐标上,然后再抓关闭按钮的坐标。
可以参考下图来理解代码
以下文字是播放器上面的一些显示文字的设置
Icon是千千静听的logo;
info是音乐标题和专辑歌手的信息,轮显在播放器窗口上;
led是时间数字,这里不是文字代码,是做好了一张图片,这张图片由大小相等的12个字符组成,0123456789:
-
记住这12个字符缺一不可。
Stereo 是立体声的字体设置
Status是状态的字体设置
Visual是视觉效果的设置,这里面只是简单定义了位置,更详细的设置请看Visual.xml文件
2、歌词秀窗口的代码
参考如下图一起看
3、均衡器窗口的代码
4、播放列表窗口的代码
1、 迷你窗口的代码
2、 音乐窗的代码(代码后面//部分为注释)
二、下面看一下Lyric.xml这个配置文件
以下是歌词文字的设置,分别定义了字体类型,字体颜色,高亮颜色和背景颜色
Font="-11,0,0,0,400,0,0,0,134,3,2,4,49,Tahoma" TextColor="#008CC1" HilightColor="#005489" BkgndColor="#F4FBFE"/> 三、下面看一下Playlist.xml这个配置文件 这个是播放列表窗口的文字设置,分别定义了字体类型,字体颜色,高亮颜色,第一背景颜色,数字颜色,时间颜色,当前选择颜色,第二背景颜色(可以和第一背景颜色一致) Font="-11,0,0,0,400,0,0,0,134,3,2,4,49,Tahoma" Color_Text="#008CC1" Color_Hilight="#005489" Color_Bkgnd="#EAF5FA" Color_Number="#005489" Color_Duration="#005489" Color_Select="#84CEF9" Color_Bkgnd2="#EAF5FA" /> 四、下面看一下Visual.xml这个配置文件 这个是用来设置视觉显示的效果,我们先给大家介绍一下千千静听都提供哪几种视觉效果: 1、 频谱分析 2、 梦幻星空 3、 视波显示 4、 专辑封面 5、 不显示视频效果 这5种情况只要在播放器主窗口上面点击鼠标右键即可切换 如图: 下面的配置文件是用来设置各种视觉效果颜色的,大家可以试试看,调出你喜欢的效果来 SpectrumTopColor="#FFFFFF" SpectrumBtmColor="#07F7FF" SpectrumMidColor="#8CDCFF" SpectrumPeakColor="#FFFFFF" SpectrumWide="1" BlurSpeed="3" Blur="1" BlurScopeColor="#07F7FF" TextColor="#FFFFFF" Font="-11,0,0,0,400,0,0,0,134,3,2,4,49,Tahoma" /> (C)打包成皮肤文件 好了,以上就是皮肤制作的整个过程啦,把上面的切图和配置文件制作好后,就可以打包成皮肤文件了,可以用WinRAR或WinZIP等压缩工具,以WinRAR为例,先按键盘上的Ctrl+A全选所有文件,然后将全部文件添加到压缩文件夹,压缩文件格式选择"zip",压缩方式可选择"最好",再点击"确定"就行了! (D)应用皮肤 将这个压缩文件复制到千千安装目录下的Skin文件夹,然后在"千千选项..."-"皮肤"中就可以选择应用皮肤了,或直接在主面板上点击右键-"选择皮肤"即可! 或许您已经了解皮肤的制作方法了,为了更深入
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 千千 静听 皮肤 制作