0°

千千静听动漫皮肤(如何制作千千静听个性皮肤)

1、如何制作千千静听个性皮肤

一、了解千千静听皮肤制作是怎么一回事?

千千静听动漫皮肤(如何制作千千静听个性皮肤)

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

五、音乐窗窗口的控件

上图为千千音乐窗界面,其中用绿色边框套住的部分为显示部分,和皮肤设计无关,就是说我们要做的是绿色边框外的内容。

好,明确了制作部分,开始讲制作过程,首先,要制作一个窗口背景,就是图中显示的最外面的蓝色风格的窗口,像主窗口一样,不难理解,格式同样为.bmp,需要设置透明色背景(#FF00ff),注意圆角像素的处理。

然后制作窗口里的控件,上图中用红色框标出了所有控件,包括后退、前进、刷新、关闭、多选框、连接文字区。其中后退、前进的功能是像网页一样的控制当前页面,并不是歌曲的后退、前进,不过也没影响,不多说了。

最后,还要制作一个按钮,用来打开音乐窗,按钮要做在主窗口上,做主窗口时别忘了留出地方哦…

具体切图示例如下,大家一看就会明白啦:

(B)修改配置文件

一、首先看一下skin.xml这个配置文件

skin version=”2″ name=”静听蔚蓝” author=”千千静听” url=”” email=”none” transparent_color=”#ff00ff”

可以参考下图来理解代码

player_window image=”player_skin.bmp”

play position=”50, 123, 90, 163″ image=”play.bmp”/

pause position=”50, 123, 90, 163″ image=”pause.bmp”/

prev position=”9, 123, 49, 163″ image=”prev.bmp”/

next position=”132, 123, 172, 163″ image=”next.bmp”/

stop position=”91, 123, 131, 163″ image=”stop.bmp”/

mute position=”183, 137, 194, 148″ image=”mute.bmp” /

lyric position=”248, 112, 272, 126″ image=”lyric.bmp”/

equalizer position=”223, 112, 242, 126″ image=”equalizer.bmp”/

playlist position=”197, 112, 216, 126″ image=”playlist.bmp”/

browser position=”214, 86, 276, 106″ image=”browser.bmp” /

minimize position=”230, 3, 247, 21″ image=”minimize.bmp”/

minimode position=”248, 3, 265, 21″ image=”minimode.bmp”/

exit position=”266, 3, 283, 21″ image=”close.bmp”/

progress position=”7, 112, 184, 123″ bar_image=”” thumb_image=”progress_thumb.bmp” fill_image=”progress_fill.bmp”/

volume position=”197, 136, 277, 147″ vertical=”false” bar_image=”” thumb_image=”progress_thumb.bmp” fill_image=”progress2.bmp”/

以下文字是播放器上面的一些显示文字的设置

Icon是千千静听的logo;

info是音乐标题和专辑歌手的信息,轮显在播放器窗口上;

led是时间数字,这里不是文字代码,是做好了一张图片,这张图片由大小相等的12个字符组成, 0 1 2 3 4 5 6 7 8 9 : –

记住这12个字符缺一不可。

Stereo 是立体声的字体设置

Status是状态的字体设置

Visual是视觉效果的设置,这里面只是简单定义了位置,更详细的设置请看Visual.xml文件

icon position=”4, 3, 20, 19″ image=”TTPlayer.ico”/

info position=”21, 34, 208, 49″ color=”#ffffff” font=”Tahoma” font_size=”13″ align=”left”/

led position=”160, 37, 270, 49″ image=”number.bmp” align=”right”/

stereo position=”224, 54, 273, 70″ color=”#ffffff” font=”Tahoma” font_size=”13″ align=”right” /

status position=”200, 70, 273, 86″ color=”#ffffff” font=”Tahoma” font_size=”13″ align=”right” /

visual position=”17, 56, 185, 106″/

/player_window

2、歌词秀窗口的代码

参考如下图一起看

lyric_window position=”0, 393, 287, 475″ resize_rect=”49, 25, 245, 73″ image=”lyric_skin.bmp”

lyric position=”10, 25, 277, 73″/

close position=”221, 3, 283, 20″ image=”close.bmp” align=”right”/

ontop position=”202, 3, 264, 20″ image=”ontop.bmp” align=”right”/

/lyric_window

3、均衡器窗口的代码

equalizer_window position=”0, 165, 287, 279″ image=”eq_skin.bmp” eq_interval=”5″

close position=”266, 3, 283, 20″ image=”close.bmp” align=”right”/

enabled position=”152, 3, 187, 21″ image=”eq_enabled.bmp”/

profile position=”224, 3, 259, 21″ image=”eq_profile.bmp”/

reset position=”188, 3, 223, 21″ image=”reset.bmp”/

balance position=”15, 45, 71, 56″ thumb_image=”progress_thumb.bmp” bar_image=”” fill_image=”eqfactor_full2.bmp”/

surround position=”15, 76, 71, 87″ thumb_image=”progress_thumb.bmp” bar_image=”” fill_image=”eqfactor_full2.bmp”/

preamp position=”81, 36, 92, 99″ thumb_image=”progress_thumb.bmp” bar_image=”” fill_image=”eqfactor_full.bmp”/

eqfactor position=”115, 36, 126, 98″ thumb_image=”progress_thumb.bmp” bar_image=”” fill_image=”eqfactor_full.bmp”/

/equalizer_window

4、播放列表窗口的代码

playlist_window position=”0, 279, 287, 393″ resize_rect=”61, 43, 265, 105″ image=”playlist_skin.bmp”

close position=”221, 2, 283, 19″ image=”close.bmp” align=”right”/

toolbar position=”10, 24, 278, 41″ image=”playlist_toolbar.bmp” hot_image=”playlist_toolbar_hot.bmp” align=”left”/

scrollbar buttons_image=”scrollbar_button.bmp” thumb_image=”scrollbar_thumb.bmp” bar_image=”scrollbar_bar.bmp” align=”center”/

playlist position=”10, 43, 278, 105″ selected_image=”playlist_selected.bmp”/

/playlist_window

1、 迷你窗口的代码

mini_window image=”mini-player.bmp”

play position=”177, 3, 271, 27″ image=”play_mini.bmp” /

pause position=”177, 3, 271, 27″ image=”pause_mini.bmp” /

prev position=”153, 3, 247, 27″ image=”prev_mini.bmp” /

next position=”224, 3, 318, 27″ image=”next_mini.bmp” /

stop position=”201, 3, 295, 27″ image=”stop_mini.bmp” /

lyric position=”269, 17, 379, 27″ image=”lyric_mini.bmp” /

minimode position=”272, 3, 335, 20″ image=”minimode.bmp” /

minimize position=”255, 3, 317, 20″ image=”minimize.bmp” /

exit position=”289, 3, 351, 20″ image=”close.bmp” /

icon position=”3, 6, 19, 22″ image=”TTPlayer.ico”/

info position=”27, 7, 142, 22″ color=”#ffffff” font=”Tahoma” font_size=”13″ align=”left”/

/mini_window

2、 音乐窗的代码(代码后面//部分为注释)

browser_window position=”540, 0, 810, 336″ image=”browser_skin.bmp” transparent_color=”#ff00ff”

close position=”452, 3, 469, 19″ image=”close.bmp” / //关闭按钮位置

backward position=”112, 3, 133, 19″ image=”browser_backward.bmp” / //后退按钮位置

forward position=”148, 3, 169, 19″ image=”browser_forward.bmp” / //前进按钮位置

refresh position=”186, 2, 207, 18″ image=”browser_refresh.bmp” / //刷新按钮位置

startup position=”7, 458, 144, 473″ ckbox_image=”browser_startup.bmp” interval=4 color=”#ffffff” font=”SimSun” font_size=”12″ / //多选框的位置,注意X坐标要包括后面的文字,interval的值为多选框和文字之间的距离

linktxt position=”280, 457, 464, 472″ color=”#ffffff” font=”SimSun” font_size=”12″ / //连接文字区域,建议多留一些,以显示更多的文字内容

browser position=”9, 26, 464, 447″ / //html网页位置,和“歌词秀”中的歌词显示范围性质一样

/browser_window

二、下面看一下Lyric.xml这个配置文件

以下是歌词文字的设置,分别定义了字体类型,字体颜色,高亮颜色和背景颜色

ttplayer_lyric

Lyric

Font=”-11,0,0,0,400,0,0,0,134,3,2,4,49,Tahoma”

TextColor=”#008CC1″

HilightColor=”#005489″

BkgndColor=”#F4FBFE” /

/ttplayer_lyric

三、下面看一下Playlist.xml这个配置文件

这个是播放列表窗口的文字设置,分别定义了字体类型,字体颜色,高亮颜色,第一背景颜色,数字颜色,时间颜色,当前选择颜色,第二背景颜色(可以和第一背景颜色一致)

ttplayer_playlist

PlayList

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”

/

/ttplayer_playlist

四、下面看一下Visual.xml这个配置文件

这个是用来设置视觉显示的效果,我们先给大家介绍一下千千静听都提供哪几种视觉效果:

1、 频谱分析

2、 梦幻星空

3、 视波显示

4、 专辑封面

5、 不显示视频效果

这5种情况只要在播放器主窗口上面点击鼠标右键即可切换

如图:

下面的配置文件是用来设置各种视觉效果颜色的,大家可以试试看,调出你喜欢的效果来

ttplayer_visual

Visual

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”

/

/ttplayer_visual

(C)打包成皮肤文件

好了,以上就是皮肤制作的整个过程啦,把上面的切图和配置文件制作好后,就可以打包成皮肤文件了,可以用WinRAR或WinZIP等压缩工具,以 WinRAR为例,先按键盘上的Ctrl+A全选所有文件,然后将全部文件添加到压缩文件夹,压缩文件格式选择”zip”,压缩方式可选择”最好”,再点击”确定”就行了!

(D)应用皮肤

将这个压缩文件复制到千千安装目录下的Skin文件夹,然后在”千千选项…”-”皮肤”中就可以选择应用皮肤了,或直接在主面板上点击右键-”选择皮肤”即可!

或许您已经了解皮肤的制作方法了,为了更深入的理解,我们增加以下部分的内容帮助您消化:

三、几个重要的属性解释

position:这是众元素中最基本的属性之一,用于定义窗口背景及按钮的位置及大小,参数值格式为 “a, b ,c ,d”,这4个数值既固定了元素的位置也确定了其大小,其中(a, b)为左上角的坐标,(c, d)为右下角的坐标,c-a 就是长度,d-b 就是高度,坐标原点要分两种情况:如果是歌词秀、均衡器、播放列表这3个子窗口的position,则是把主窗口的左上角作为它们的坐标原点;如果是各窗口内部按钮的position,则是把对应的各窗口的左上角作为坐标原点,比如歌词秀窗口中的”关闭”按钮就是以歌词秀背景图片的左上角为原点,其它依此类推!

特别地:①播放列表中的scrollbar元素不需要定义position属性,它的位置会自动固定在playlist的最右边;②主窗口中的 progress、volume元素及均衡器窗口中的balance、surround、preamp元素的position属性表示的是滑块能够移动的范围的坐标;③播放列表衡器窗口中的playlist元素、歌词秀衡器窗口中的lyric元素的position属性表示的是播放列表和歌词的显示范围,当播放列表窗口和歌词秀窗口改变大小时,这两个元素会自动跟着改变大小,但它们的四个边和窗口的四个边的距离就是通过这个position来体现的;

resize_rect:歌词秀和播放列表窗口特有的属性,用于定义这两个窗口可被拉伸的部分,其参数格式同position,代表的是当改变窗口大小时只有这个矩形框内的部分才会被拉长,在这个范围外的部分则不会变化,另外还有一个属性resize_tile是对应使用的,其参数值可以为0或1,其中 0表示在改变窗口大小时采用拉伸的方式,1表示采用平铺的方式,该属性可省略不写,即使用默认值0;

此外,歌词秀和播放列表窗口还有一个可选择的元素:title,可在有特定需要时(比如在改变窗口大小时标题保持居中等)使用,格式如下:

title

2、怎么下载千千静听皮肤?下载完以后应该怎么安装?

千千静听皮肤下载地址:

安装方法有两种情况:

(1):下载后直接为.skn文件,那样直接把.skn文件粘贴到

C:\\Program Files\\TTPlayer\\Skin 就行了。

然后在”千千静听-选项”-”皮 肤”或者直接在千千静听主窗口 上点击右键-”选择皮肤”,即可应用皮肤了。

(2):下载后为压缩包。那就需要把压缩包转换成.skn文件。

首先把文件解压在C:\\Program Files\\TTPlayer\\Skin

然后随便选择个C:\\Program Files\\TTPlayer\\Skin里已存在的.skn文件(最好复制一个),然后单击右键/打开方式/选择程序/压缩文件管理器/确定,就可以打开文件了。

然后把解压包解压后的文件打开,你就会发现解压后的文件夹里的文件都是些图片和.xml文件把这些文件都复制粘贴覆盖到.skn文件,

这样就将压缩包转换成了一个新的.skn文件了。

然后在”千千静听-选项”-”皮 肤”或者直接在千千静听主窗口 上点击右键-”选择皮肤”,即可应用皮肤了。

3、如何更换千千静听皮肤

第一步:到美化皮肤区下载你喜欢的千千静听皮肤;

第二步:下载皮肤;千千静听的扩展名一般有两种:文件名.skn 或者文件名.zip;

第三步:安装皮肤;一般分为两种情况!

1、在扩展名为.skn情况下;假设你的千千静听安装在 D:TTPlayer 下,请找到SKIN文件夹(路径为:D:TTPlayer Skin),将后缀为.skn千千静听皮肤文件复制进去即可;

2、在扩展名为.zip情况下,请将.zip修改为.skn,然后重复上面的步骤;

第四步:应用皮肤!在播放器窗口上右键/皮肤,直接选择应用您安装的皮肤!

皮肤是.skn格式的

这个安装更简单了

直接往千千静听界面上一拖就行了

当然直接放SKIN文件夹里也可以的

参照下图…

4、请问如何修改千千静听的皮肤呢?

我把SKIN目录下在图片修改了,但是为什么播放器的皮肤还是原来的呢?请高手帮我解答一下。偶先谢谢了…..

5、千千静听皮肤怎么换?

问题缠身,只到的人一定要告诉我阿,

如果可以的话家我QQ353241053

「点点赞赏,手留余香」

    还没有人赞赏,快来当第一个赞赏的人吧!