千千听皮肤做什么。
1.如果你是一个从未接触过皮肤制作的人,请先仔细阅读下面这段话:
如何将设计好的皮肤效果图应用到成千上万的听歌软件中,有两个主导思想你要明白:一是单独把效果图上的控件(或按钮)剪下来,二是找到上面提到的控件(或按钮)的坐标进行精确定位。听着有意思吗?那我们继续吧。
2.千千的皮肤位于安装目录下的皮肤文件夹中,扩展名可以是。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
重点:所有的功能按钮都要有四种状态,而且这四种状态要做成一张图片,保存在。BMP格式。注意每个状态按钮的宽度和高度要一致,说说每个状态的含义。
第一种状态:自然状态
第二种状态:鼠标经过时的状态。
第三种状态:鼠标被按下时的状态。
第四种状态:按钮无效时的状态(比如播放列表中只有一首歌,那么“下一个”按钮就无法点击,那么这个按钮的状态就是无效时的状态)。
3)迷你模式按钮
名称:minimode.bmp
同上,这里不赘述。
(4)关闭按钮
名称:close.bmp
(5)播放进度滑块(在这种情况下,播放进度条上的小圆圈按钮)
名称:progress_thumb.bmp
重点:这个小按钮需要和背景分开扣出,那么如何处理镂空部分才能最终在界面上呈现透明效果?解决方法和上面大背景的镂空处理一样,就是用颜色(#ff00ff)填充镂空,如上图。
(6)根据播放进度填充背景图像。
名称:progress_fill.bmp
缓冲进度条填充背景图像。
这个进度条在听在线歌曲缓冲时出现。如果没有这个元素,默认的方式是加深进度条的颜色,显示为缓冲条的颜色。
名称:progress_fill2.bmp
(7)播放列表窗口打开和关闭按钮
名称:playlist.bmp
(8)均衡器窗口打开关闭按钮
名称:均衡器. 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
& lt皮肤版="2" name= "听?Blue "author= "千千听力" URL = " " email = " none " transparent _ color = " # ff 00 ff " >
以上是皮肤的基本描述信息,请根据自身情况填写,包括版本号、皮肤名称、皮肤作者、地址、邮箱、透明色设置。
1 、& ltplayer _ window & gt和
它描述了主窗口的参数设置。
Position是坐标定位,image是图片的名称,也就是我刚才讲的每张图片的名称。
坐标由逗号分隔的四个数字组成。前两个数字是图片左上角的X坐标和Y坐标,后两个数字是图片右下角的X坐标和Y坐标。请注意,这里右下角的X坐标和Y坐标要多算一分,否则玩家会少显示两条边。
这里需要注意的是,每个窗口的位置都是窗口合并后掌握的坐标,每个窗口上的按钮控件都是单独定位的。比如我们需要获取歌曲展示窗口上关闭按钮的坐标,从而将歌曲展示窗口的左上角定位在切割软件的坐标(0,0)上,进而掌握关闭按钮的坐标。
可以参考下图了解代码。
& ltplayer _ window image = " player _ skin . BMP " & gt;
& ltplay position="50,123,90,163 " image = " play . BMP "/& gt;
& ltpause position="50,123,90,163" image="pause.bmp"/>
& ltprev position="9,123,49,163" image="prev.bmp"/>
& ltnext position="132,123,172,163" image="next.bmp"/>
& ltstop position="91,123,131,163" image="stop.bmp"/>
& ltmute position="183,137,194,148" image="mute.bmp" />
& ltlyric position="248,112,272,126" image="lyric.bmp"/>
& lt均衡器position="223,112,242,126 " image = " equalizer . BMP "/>
& ltplaylist position="197,112,216,126 " image = " playlist . BMP "/& gt;
& ltbrowser position="214,86,276,106 " image = " browser . BMP "/& gt;
& ltminimize position="230,3,247,21 " image = " minimize . BMP "/& gt;
& ltminimode position="248,3,265,21 " image = " mini mode . BMP "/& gt;
& ltexit position="266,3,283,21 " image = " close . BMP "/& gt;
& ltprogress position="7,112,184,123 " bar _ image = " " thumb _ image = " progress _ thumb . BMP " fill _ image = " progress _ fill . BMP "/& gt;
& ltvolume position="197,136,277,147 " vertical = " false " bar _ image = " " thumb _ image = " progress _ thumb . BMP " fill _ image = " progress 2 . BMP "/& gt;
以下文本是在播放器上显示文本的一些设置。
Icon是一千个听的logo;
Info是音乐标题和专辑艺人的信息,依次显示在播放器窗口;
Led是一个时间数字。这不是文字代码,是图片。此图片由12个相同大小的字符组成,0 1 2 3 4 5 6 7 8 9:-
记住这12字符缺一不可。
立体声是立体声的字体设置。
状态是状态的字体设置。
视觉是视觉效果的设定,其中简单定义了位置。有关更详细的设置,请参见Visual.xml文件。
& lticon position="4,3,20,19 " image = " TT player . ico "/& gt;
& ltinfo position="21,34,208,49 " color = " # ffffff " font = " Tahoma " font _ size = " 13 " align = " left "/>
& ltled position="160,37,270,49 " image = " number . BMP " align = " right "/& gt;
& lt立体声position="224,54,273,70 " color = " # ffffff " font = " Tahoma " font _ size = " 13 " align = " right "/>
& ltstatus position="200,70,273,86 " color = " # ffffff " font = " Tahoma " font _ size = " 13 " align = " right "/>
& ltvisual position="17,56,185,106"/>
& lt/player _ window & gt;
2、歌曲展示窗口的代码
参考下图一起来看。
& ltlyric_window position="0,393,287,475" resize_rect="49,25,245,73" image="lyric_skin.bmp " >
& lt歌词位置="10,25,277,73"/>
& ltclose position="221,3,283,20 " image = " close . BMP " align = " right "/& gt;
& ltontop position="202,3,264,20 " image = " ontop . BMP " align = " right "/& gt;
& lt/lyric _ windows & gt;
3.均衡器窗口代码
& lt均衡器_窗口位置="0,165,287,279 " image = " eq _ skin . BMP " eq _ interval = " 5 " & gt;
& ltclose position="266,3,283,20 " image = " close . BMP " align = " right "/& gt;
& ltenabled position="152,3,187,21 " image = " eq _ enabled . BMP "/& gt;
& ltprofile position="224,3,259,21 " image = " eq _ profile . BMP "/& gt;
& ltreset position="188,3,223,21 " image = " reset . BMP "/& gt;
& ltbalance position="15,45,71,56 " thumb _ image = " progress _ thumb . BMP " bar _ image = " " fill _ image = " eq factor _ full 2 . BMP "/& gt;
& ltsurround position="15,76,71,87 " thumb _ image = " progress _ thumb . BMP " bar _ image = " " fill _ image = " eq factor _ full 2 . BMP "/& gt;
& lt前置放大器position="81,36,92,99 " thumb _ image = " progress _ thumb . BMP " bar _ image = " " fill _ image = " eq factor _ full . BMP "/& gt;
& lteq factor position = " 115,36,126,98 " thumb _ image = " progress _ thumb . BMP " bar _ image = " " fill _ image = " eq factor _ full . BMP "/& gt;
& lt/equalizer _ window & gt;
4.播放列表窗口的代码
& ltplaylist_window position="0,279,287,393" resize_rect="61,43,265,105 " image = " playlist _ skin . BMP " >
& ltclose position="221,2,283,19 " image = " close . BMP " align = " right "/>
& lttoolbar position="10,24,278,41 " image = " playlist _ toolbar . BMP " hot _ image = " playlist _ toolbar _ hot . BMP " align = " left "/& gt;
& ltscroll bar buttons _ image = " scroll bar _ button . BMP " thumb _ image = " scroll bar _ thumb . BMP " bar _ image = " scroll bar _ bar . BMP " align = " center "/& gt;
& ltplaylist position="10,43,278,105 " selected _ image = " playlist _ selected . BMP "/& gt;
& lt/playlist_window >
1,小窗口代码
& ltmini _ window image = " mini-player . BMP " & gt;
& ltplay position="177,3,271,27 " image = " play _ mini . BMP "/& gt;
& ltpause position="177,3,271,27 " image = " pause _ mini . BMP "/& gt;
& ltprev position="153,3,247,27 " image = " prev _ mini . BMP "/& gt;
& ltnext position="224,3,318,27 " image = " next _ mini . BMP "/& gt;
& ltstop position="201,3,295,27 " image = " stop _ mini . BMP "/& gt;
& ltlyric position="269,17,379,27 " image = " lyric _ mini . BMP "/& gt;
& ltminimode position="272,3,335,20" image="minimode.bmp" />
& ltminimize position="255,3,317,20 " image = " minimize . BMP "/& gt;
& ltexit position="289,3,351,20 " image = " close . BMP "/& gt;
& lticon position="3,6,19,22" image="TTPlayer.ico"/>
& ltinfo position="27,7,142,22 " color = " # ffffff " font = " Tahoma " font _ size = " 13 " align = " left "/>
& lt/mini _ windows & gt;
2.音乐窗口的代码(代码后面的//部分是注释)
& ltbrowser_window position="540,0,810,336 " image = " browser _ skin . BMP " transparent _ color = " # ff 00 ff " & gt;
& ltclose position="452,3,469,19 " image = " close . BMP "/& gt;//关闭按钮位置
& ltbackward position = " 112,3,133,19 " image = " browser _ backward . BMP "/>//后退按钮位置
& ltforward position="148,3,169,19 " image = " browser _ forward . BMP "/& gt;//前进按钮位置
& ltrefresh position="186,2,207,18 " image = " browser _ refresh . BMP "/>//刷新按钮位置
& ltstartup position="7,458,144,473 " CK box _ image = " browser _ startup . BMP " interval = 4 color = " # ffffff " font = " SimSun " font _ size = " 12 "/& gt;//多选框的位置。注意,X坐标应该包括下面的文字,interval的值是多选框和文字之间的距离。
& ltlinktxt position="280,457,464,472 " color = " # ffffff " font = " SimSun " font _ size = " 12 "/>//连接文本区域。建议多留一些,展示更多文字内容。
& ltbrowser position="9,26,464,447" />//html页面//的位置与“歌单秀”中歌词的显示范围相同
& lt/browser_window >
其次,我们来看看配置文件Lyric.xml
以下是歌词的设置,分别定义字体类型、字体颜色、高亮颜色、背景颜色。
& ltttplayer _ lyric & gt
& lt歌词
Font="-11,0,0,0,400,0,0,134,3,2,4,49,宋体"
TextColor="#008CC1 "
HilightColor="#005489 "
BkgndColor="#F4FBFE" />。
& lt/TT player _ lyric & gt;
第三,我们来看看Playlist.xml配置文件。
这是播放列表窗口的文本设置,定义字体类型、字体颜色、高亮颜色、第一背景颜色、数字颜色、时间颜色、当前选择的颜色和第二背景颜色(可以和第一背景颜色一致)。
& ltttplayer _ playlist & gt
& lt播放列表
Font="-11,0,0,0,400,0,0,134,3,2,4,49,宋体"
Color_Text="#008CC1 "
Color_Hilight="#005489 "
Color_Bkgnd="#EAF5FA "
Color_Number="#005489 "
Color_Duration="#005489 "
Color_Select="#84CEF9 "
Color_Bkgnd2="#EAF5FA "
/& gt;
& lt/TT player _ playlist & gt;
第四,我们来看看配置文件Visual.xml。
这用于设置视觉显示效果。先给大家介绍一下千听提供了哪些种类的视觉效果:
1,频谱分析
2.梦想星空
3.视觉波显示
4.专辑封面
5.不显示视频效果。
这五种情况可以通过在播放器主窗口上点击鼠标右键来切换。
如图所示:
下面的配置文件用于设置各种颜色的视觉效果。你可以试试,调出你喜欢的效果。
& ltttplayer _ visual & gt
& lt视觉的
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,134,3,2,4,49,宋体"
/& gt;
& lt/TT player _ visual & gt;
(c)包装成皮文件。
嗯,皮肤制作的全过程就是这样。在制作了上面的剪切和配置文件之后,您可以将它们打包成皮肤文件。可以使用WinRAR或Winzip等压缩工具。以WinRAR为例,先按键盘上的CTRL+A选择所有文件,然后将所有文件添加到压缩文件夹中。选择“ZIP”作为压缩文件格式,“Best”作为压缩方法,然后单击“确定”。
(d)皮肤的应用
将这个压缩文件复制到千千安装目录下的皮肤文件夹中,然后在“千千选项”中选择应用程序皮肤——“皮肤”,或者直接在主面板上点击右键——“选择皮肤”!
也许你已经知道如何制作皮肤。为了更深入的理解,我们增加了以下部分来帮助你消化:
三、几个重要的属性解释
位置:这是众多元素中最基本的属性之一,用来定义窗口背景以及按钮的位置和大小。参数值的格式是“a,b,c,d”,这四个值不仅固定了元素的位置还决定了它的大小,其中(a,b)是左上角的坐标,(c,d)是右下角的坐标,c-a是长度,d-b是高度。如果是每个窗口内部按钮的位置,则以对应窗口的左上角为坐标原点。比如歌词秀窗口的“关闭”按钮,以歌词秀背景图片的左上角为原点,等等!
具体来说:①播放列表中的滚动条元素不需要定义位置属性,其位置会自动固定在播放列表的最右侧;②主窗口中的进度和音量元素以及均衡器窗口中的平衡、环绕声和前置放大器元素的位置属性代表了滑块可以移动的范围的坐标;③播放列表称重机窗口中播放列表元素和歌词中歌词元素的位置属性表示播放列表和歌词的显示范围。当播放列表窗口和歌词窗口改变尺寸时,这两个元素会自动改变尺寸,但它们的四边与窗口四边的距离是通过这个位置来体现的;
Resize_rect:歌词显示和播放列表窗口的唯一属性,用于定义这两个窗口可以拉伸的部分。它的参数格式和position一样,也就是说在改变窗口大小时,只有这个矩形框里面的部分会被拉伸,这个范围之外的部分不会改变。此外,还有另一个属性resize_tile对应使用,其参数值可以是0,也可以是1。其中0表示改变窗口大小时拉伸,1表示平铺。该属性可以省略,即使用默认值0;
此外,歌曲展示和播放列表窗口还有一个可选元素:title,可以在有特定需求时使用(比如改变窗口大小时保持标题居中等。).格式如下:
& lt标题位置= " ... "图像= " ... "align= " ... "/& gt;
Align:用于定义元素的对齐方式。参数值有两种:一种是在主窗口的led、info、stereo、status元素中,值可以是左、中、右,代表这些字的缩进;第二个是在歌曲播放窗口的标题、关闭和结束元素中,以及在播放列表窗口的标题、关闭和工具栏元素中。此时,值可以是左、中、右、上、下等。,这意味着当调整窗口大小时,元素的位置相对于边框移动。如果想同时设置垂直对齐和水平对齐,可以用英文加号把两者连在一起,比如“top+left”。
垂直:主窗口中存在的进度和音量元素。参数值可以是true或false,其中true表示滑块在垂直方向移动,false表示滑块在水平方向移动;
Thumb_resize_center:它存在于playlist窗口的scrollbar元素中,用于定义滚动条的thumb slider中间可以平铺和缩放的部分的大小。如果值为0,表示播放列表窗口高度变化时,滑块不会缩放;
Thumb_resize_tile:存在于播放列表窗口的滚动条元素中,与播放列表窗口和歌曲展示窗口中的resize_tile功能相同;
Hot_image:存在于播放列表窗口的toolbar元素中,用于定义鼠标经过时播放列表工具栏中的图片形式。该属性可以选择,如果省略,当鼠标经过时程序会自动生成按钮状态;
Eq_interval:存在于均衡器窗口的equalizer_window元素中,指eqfactor元素中10波段的区间大小(另外eqfactor元素的position属性表示10个滑块中第一个滑块的位置,其他属性对所有10个滑块都有效);
Icon:它存在于主窗口的icon元素中,用于自定义皮肤图标。图标文件(*。ico,16*16)必须放在皮肤文件夹中,一起打包压缩。可以选择该属性;如果省略,将使用默认的程序图标;
Left_top_color和right_bottom_color:存在于歌曲展示窗口的mini_border元素中,用于定义歌曲展示窗口在mini模式下的左上边框和右下边框的颜色;
迷你窗口:
迷你模式其实是独立于主窗口的另一个皮肤,只是在迷你模式下,省略了播放列表和均衡器窗口,简化了歌词显示窗口和主窗口。小窗口中的所有元素、属性和参数都与主窗口中的相同,它们都包含在
迷你模式是缩小屏幕尺寸,简化按键,所以迷你窗口中的按键也要做相应的调整,省略一些不常用的按键,比如音量调节。一般只能保留“播放/暂停”、“停止”、“后退”、“前进”、“静音”、“图标”、“视觉效果”。此外,迷你模式下歌曲展示窗口的位置和长度是固定的,高度与迷你模式下背景图片的高度相同。
四、皮肤制作的注意事项和技巧:
1.压缩皮肤文件时,不要压缩整个文件夹,而是进入文件夹后按CTRL+A选择所有文件,然后添加到压缩文件中(zip格式),否则皮肤无效;
2.播放列表和歌曲展示窗口的位置属性定义了这两个窗口初始化时的大小,可能不是图片的实际大小。当这两个窗口初始化后,它们会根据resize_rect的规则将窗口拉伸到设定的大小。另外,这两个窗口最大可以拉伸到和屏幕一样大,最小只能缩小到和原图一样大,所以原图要画得尽量小,这样可以方便用户把窗口缩小到最小,同时稍微缩小图片和皮肤的尺寸;
注意:此时窗口上按钮的位置属性根据图片的实际大小决定坐标;
3.bmp图片(尤其是几个大窗口的背景图片)尽量转换成8位索引色,这样可以大大减小图片和皮肤的大小,同时减少应用皮肤时的内存占用。
具体方法是:在Adobe Photoshop中,以RGB模式打开图片,然后点击“图像”-“模式”-“索引色”,然后保存!注意:如果有透明色,需要注意两点:①填充透明色时,不要选择“公差”;(2)转换时必须选中"保持原来的实际颜色",以防止填充的透明颜色被改变。
4.按钮小的时候不要做透明,要和背景图片连起来!因为我们知道皮肤的透明部分是感知不到鼠标动作的,所以在按键比较小的时候,如果中间有一个小缝隙,鼠标移动到上面就会跳起来,不方便点击操作!如图所示:
5.做皮肤的时候最好预览一下效果,这样问题就能及时修正。
6.如果不想在主窗口或迷你模式下显示成千上万的听音图标,可以设置图标的位置超过窗口大小,比如“500,500,565,438+06,565,438+06”;
7.led元素(即播放时间)在主窗口有两种显示方式,一种是播放时间,一种是不播放时间。单击鼠标在两种显示模式之间切换。后者比前者多一个负号,所以主窗口的led至少要预留6位数字,防止显示剩余时间时数字遮住面板其他部分,影响美观;用于led元素的图片必须是12张大小相同的图片排列在一起,分别代表0-9十个数字、冒号和负号(可以用透明色);
8.如果不想在一个窗口或每个窗口显示某些元素,只需删除所有对应的元素代码即可;
9.如果用记事本打开XML文件,尽量将编码设置为ANSI存放时;如下图所示:
10,坐标定位提示:
注意坐标定义的问题。以20*20的缩略图为例。它的位置是150,30,170,50。当你看这个坐标的时候,你一定认为没有问题,但是实际效果并不会完全显示出来。为什么?因为坐标的X轴有小误差,所以要加2个像素。制作时要注意。
制作千千皮肤的基本方法只有这么多,但技巧远不止这些。可以在制作的过程中不断实践探索,发挥自己的创造力设计出各种创意皮肤!
详见/help.php?t=72