动漫东东

『hitokoto在努力随机条目中...』

快点参与到我们吧! 登录 | 注册

动漫东东 门户 萌化制作教程 软件皮肤 查看内容

千千静听个性皮肤制作教程

2011-7-23 08:53| 发布者: 影火虫| 查看: 2097| 评论: 15|来自: 千千静听

摘要: 如何把设计好的皮肤效果图应用到千千静听软件上去,有两个主导思想您应该了解:一个是需要把效果图上面的控件(或称按钮)单独切出来,另一个是需要把上一点说的控件(或称按钮)的坐标找到,为它精准定位,是不是听 ...
上篇,播放器皮肤设计部分

一、了解千千静听皮肤制作是怎么一回事?
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
 

发表评论

最新评论

引用 小藪GHOST 2012-4-28 18:30
先收藏  慢慢學  謝囉
引用 drachen 2012-3-1 22:29
膜拜啊~~
引用 drachen 2012-3-1 22:28
楼主强淫~~
引用 Mr.A君 2011-12-30 22:01
只用酷狗
引用 Mr、荣耀 2011-12-24 10:46
顶起技术!今后要我多多努力了呢
引用 珑苿 2011-12-23 19:27
强顶
引用 小卒呀 2011-12-17 14:08
看着步骤好繁琐啊~不过值得一试
引用 clyne 2011-11-27 17:18
好麻烦,以后有时间自己做一个
引用 偶是爱你的东东 2011-10-24 09:03
有空学会它!!!!
引用 kekeliy 2011-9-21 07:38
很复杂呀,不过支持!以后慢慢学
引用 YY152093 2011-8-29 03:22
技术帝,支持下。
引用 Summer丶翼 2011-8-27 23:36
表示几乎不用千千静听
引用 lmt5656303 2011-8-26 10:52
技术贴一定要顶 不过好复杂 还在学习中
引用 妙曼雨儿 2011-8-4 01:16
楼主辛苦了
分享感谢
引用 怀念黑色 2011-8-3 14:54
貌似很复杂。先支持个吧。

查看全部评论(15)

使用的Discuz搭建 [苏ICP备11049159号]    

theme by 卜卜口の

动漫东东©^让世界萌起来!

回顶部