Board logo

标题: [皮肤教程.no.1]解析bmp文件和skin.ini◢修订20050901 [打印本页]

作者: folder    时间: 2005-8-5 22:52     标题: [皮肤教程.no.1]解析bmp文件和skin.ini◢修订20050901

由于TW作者比较忙,本人在多次制作皮夫的经验上和作者沟通,终于完成了皮夫教程,希望对per或者skinner有所帮助!
no.1教程的目的在于解析基本的皮夫元素,包括各个bmp文件和skin.ini文件
了解熟悉这两部分,就能利用已有的工具DIY一份自己的皮夫了

开篇之前说几句废话:
TW的皮肤教程在官网上发过了,但是搞TW皮的人太少了,出这个教程,希望对TW感兴趣的同学和skinner能加入美化的队伍中来,省得几个人孤单孤单地在搞,很没有气氛,有发布、才有比较、才能进步、才能出精品。

开始教程

前戏:
TW的皮肤由三大块构成
1、skin.ini皮肤定义文件
2、各bmp图片
3、gif固定格式预览图

教程1:TW皮肤元素分析【位图篇】

从最直观的皮肤入手

206.bmp------------------------------是侧边条的“自动隐藏、锁定、关闭”三个按钮
229.bmp------------------------------是分页标签栏最右方的“上一个、下一个分页”的两个按钮

212--------------------------------状态栏按钮
262--------------------------------状态栏背景图片

231--------------------------------不能前进、后退时的“新建、前进、后退”三按钮,16像素小图
1003--------------------------------不能前进、后退时的“新建、前进、后退”三按钮,24像素大图

1008--------------------------------工具栏、地址栏、插件栏的背景图片,同时也是侧边栏的最上两个标题头的背景图片
232--------------------------------工具栏按钮16像素小图
1002--------------------------------工具栏按钮,24像素大图
1010--------------------------------在工具栏上显示“收藏夹”时,收藏夹的相关图标

241--------------------------------分页标签在上方时非当前页背景图片
242--------------------------------分页标签在上方时当前页背景图片
1012--------------------------------分页标签在上方时空白页背景图片
243--------------------------------分页标签在下方时非当前页背景图片
244--------------------------------分页标签在下方时当前页背景图片
265--------------------------------分页标签在下方时空白页背景图片
1006--------------------------------各分页标签头上的状态按钮“当前、正在下载显示中、非当前分页标签、已经锁定”

249--------------------------------地址栏框内,最右侧下拉按钮三状态图片:常态、鼠标移上、拉下
1001--------------------------------地址栏按钮图片

1004--------------------------------侧边条中“收藏夹”标题头的按钮
1005--------------------------------侧边条中“浏览历史”标题头的按钮

1011--------------------------------侧边栏当前插件栏的竖向标题头背景图片

1013--------------------------------右上最小化、最大化等五个按钮常规状态
1014--------------------------------右上最小化、最大化等五个按钮按下时的状态
                                                                           (很奇怪哦,按下不到0.1秒,也要搞这个,应该是hover上去才对)

1015--------------------------------标题栏(TheWorld)和侧边栏顶部(固定、活动、关闭)处的背景图片

preview.gif-----------------------------换夫预览图
                                        *有固定大小,比opera和mt的预览图要大,同学们可以在这块田地里好好创意,有时制作这个图比制作工具栏按钮还要让人费心,毕竟这是人家选择下载与否、使用与否的第一个衡量标准


另外,在发布时,可以制作集合所有按钮和其实效果的一个全预览图,这样可以让人了解你这款皮肤
我是用jpg格式保存的,尺寸和质量可以最优化,大小就没有固定了,不建议搞1024宽度,因为都是在帖子里出现,大尺寸不容易让人一眼看穿


教程2:skin.ini分析【色彩灵魂篇】

[General]
Name=orangetiger------------皮名
ComboxBorder=0xaaaaaa--------------地址栏边框的颜色
Author=Folder@the world--------皮夫作者

[Menu]------------------------菜单
;BackGround
BKColor=0xE1E1E1------------------菜单背景色
;Menu Left column
HorzBarColor=0xE1E1E1----------------菜单左侧条颜色,如果没有,则菜单左侧条颜色和整个菜单背景一致
;Text
TextColor=0--------------------菜单正常状态下的颜色
;鼠标hover光亮
HiLightTextColor=0------------------菜单项高亮时菜单文字的颜色
;鼠标未hover
GrayTextColor=------------------菜单被禁用时候菜单文字的颜色
SeparatorColor=------------------菜单分隔符颜色
;Hilight
HilightBorder=0xE1E1E1----------------菜单项高亮时,边框的颜色
HilightBKColor=0x2f65ff----------------菜单项高亮时菜单文字的颜色
;当菜单disable时,鼠标经过的颜色 ,GrayHilightBKColor
GrayHilightBKColor=菜单被禁用时候,鼠标经过时候的背景色
;allow gray item be hilight,
HightlightGray= --------------允许禁用的菜单项目在鼠标经过的时候显示高亮, 1=允许,or 0
;程序侧边条的宽度
;image size
ImgSize_X=--------------菜单图标的宽度
ImgSize_Y=--------------菜单图标的高度

;
;padding
ImagePadding_left=2--------------菜单图标左边留出的空白宽度
ImagePadding_right=2--------------菜单图标右边留出的空白宽度
ImagePadding_top=3--------------菜单图标上边留出的空白宽度
TextPadding_left=2--------------菜单文字左边留出的空白宽度
TextPadding_right=16--------------菜单文字右边留出的空白宽度
;top & bottom padding
TextPadding_tb=4--------------菜单文字上下留出的空白宽度

[Caption]
TextColor=0x0------------------------标题条文字的颜色

[MenuBar]-------------------------------菜单条
TextColor =------------------------------菜单条文字颜色
HighLightTextColor=0x0------------------------菜单条高亮文字颜色
BKRGB =--------------------------------菜单条背景颜色
HightLightBKRGB =0xE1E1E1-----------------------菜单条背景高亮的颜色

[Tab]
;标签条
;a tab is made by 3 part, if cell width=3, image size is 3*3=9
CellWidth=----------------标签条图像分为三部分,用于绘制标签的左中右,如果cellwidth=3,则图片宽9个像素
;tab image height
CellHeight=24----------------标签条图像高度
TextColor=----------------文字颜色
HotTextColor=----------------高亮的文字颜色
ProcessColorStart=0xE1E1E1------------------------显示进度条的起始颜色
ProcessColorEnd=0x00ff00------------------------显示进度条的结束颜色
ProcessHeight=4--------------------------------显示进度条的高度
;processbar start pos's top
ProcessPosTop=18------------------------------显示进度条的位置,相对于标签顶部

[StatusBar]
TextColor=  --------------------------------状态栏文字的颜色

接下去的教程应该是制作按钮的工具和方法
有空作一个!字顶贴子说得不狗详细,当初看了好几遍才明白它说的是什么!我现在用的方法和它完全不同。
............................

[ Last edited by folder on 2005-9-1 at 05:03 PM ]

图片附件: 皮肤使用图.jpg (2005-8-5 22:52, 132.89 KB) / 下载次数 1962
http://bbs.theworld.cn./attachment.php?aid=2813&k=74db923d49b353712d76b10fc2ab3792&t=1732688308&sid=KMYsHf


作者: vira    时间: 2005-8-5 23:18

又一篇好东西,建议加精固顶
作者: caten    时间: 2005-8-6 02:47

这个好~~~~当初我就是拿个现成的皮肤   改完了事~~~~

置顶的帖子的确太粗略了.
.......
作者: starsoft    时间: 2005-8-6 09:16

辛苦了
作者: TW越来越好    时间: 2005-8-6 09:31

为人民服务。
作者: xphy    时间: 2005-8-6 10:58

辛苦辛苦,不错不错。顶!
作者: soso    时间: 2005-8-6 23:06

很用心~
作者: zxb426    时间: 2005-8-7 02:51

补充一点:

262--------------------------------状态栏的背景图片
作者: 雕刻时光    时间: 2005-8-9 09:28

楼主辛苦了
作者: red-M    时间: 2005-8-9 11:21

确实不错,继续。。。
作者: ALEX    时间: 2005-9-22 09:29

支持,继续
作者: fxjtv    时间: 2005-9-27 18:49

支持,继续
作者: cnnerv    时间: 2005-10-1 13:29

支持楼主
作者: yyyyyyrrrrrr    时间: 2005-10-5 00:28

非常感谢,明白了许多啊,收下拉
作者: hqhh    时间: 2005-10-16 22:48

菜单字要绿色   值要怎样设
作者: 爆樽狼王    时间: 2006-1-6 14:05

好烦呢`````
作者: falcon2323    时间: 2006-1-14 09:38

感谢分享,哈哈~~~~~~~~~~~~~
作者: leeguozhe    时间: 2006-1-14 10:46

有用的教程,谢谢搂住!!!
作者: 弯刀    时间: 2006-2-12 18:28

楼主辛苦了!!!




欢迎光临 世界之窗论坛 (http://bbs.theworld.cn./) Powered by Discuz! 7.2