[讨论] 有关皮肤制作方面碰到的几个问题 皮肤, 制作

Sanly

目前正在制作名为“Sparkle”的皮肤，已几乎完成，但在制作过程中碰到几个问题，想与各位制作皮肤的高手或TW的开发人员讨论：

(皮肤请至http://bbs.ioage.com/cn/viewthread.php?tid=62182&page=1&extra=page%3D1下载测试)

1. 侧边栏底部是否可以有办法绘制分割线？目前我能找到的办法就是使用“bg_bottombar”绘制分割线，但结果引发一系列问题(即问题2和问题3)。

2. 上侧标签栏的顶部分割线是否可以在其他位置绘制，如“bg_topbar”中(已测试，不行)。目前我只能在“tab_bg”中绘制，导致上侧标签栏和下侧标签栏的高度相差1个像素。

3. 由于TW上侧无法统一绘制分割线，导致侧边栏宽度分割线(即“img_sideband”)上下侧不对称，上侧少1个像素的分割线无法绘制，是否有办法解决？

4. 侧边栏中“我的电脑”和“下载管理”部分，存在重复绘制的分割线(造成有2个像素的分割线，比较难看)，目前我尚未找到办法去除，不知道是否有办法可以解决？

5. 侧边栏的上侧框架线绘制不全，与右侧的侧边栏宽度分割线(即“img_sideband”)存在1个像素的距离无法绘制，是否有办法解决？

6. 侧边栏标签组隔离线(即“img_sideols”)上侧存在1个像素的多余绘制横线，导致侧边栏左侧框架线无法与侧边栏标签组隔离线(即“img_sideols”)相连接。此外，为了达到侧边栏标签组与侧边栏内容区仅以1像素分割线进行分割，我将“img_sideols”绘制为侧边栏内容区的底色，但为了内容区框架线的完整性，我将“img_sideols”的左侧1个像素绘制成框架线的颜色，但发现“img_sideols”两侧似乎采用的拉伸绘制方式，导致实际绘制出2个像素的灰线。上述问题是否有方法可以解决？

7. 插件皮肤管理器按钮上下侧边框线绘制时被拉伸，是否可以解决？

8. 侧边栏标题行的高度是否可以调整，我想达到与上侧标签栏等宽的效果，是否可以做到？(目前下侧标签栏已经做成与侧边栏的标签等宽)

9. 地址栏和搜索栏中的文字位置是否可以上下调整，目前感觉不是处于地址栏和搜索栏的中间，不够完美。

10. 菜单的边框的颜色是否可以修改？我暂时没有找到相关的设置项。

11. 目前好像“小工具栏”和侧边栏“收藏夹”中的“网络收藏夹”图标无法修改，这个是否可以改进？

相关图例可打包下载，必要时请放大图片查看。

皮肤制作的相关问题的图例.zip (147.33 KB)

图例
下载次数: 1663

2008-7-5 02:19

[ 本帖最后由 Sanly 于 2008-7-5 02:49 编辑 ]

Aycox

向楼主同志学习！看到也有人用放大镜做皮很欣慰
楼主如此细致，一些问题甚至精确到1像素，下面逐条回复，有些解释未免啰嗦就不详述，总之要想在各种情况下都做到完美很难，我想楼主看过后应该能明白。事实上楼主的皮肤实际效果不错。


1. 侧边栏底部是否可以有办法绘制分割线？目前我能找到的办法就是使用“bg_bottombar”绘制分割线，但结果引发一系列问题(即问题2和问题3)。

A：嗯，方法对头，但似乎程序只能这样做。至于楼主说的“产生的问题”，可能并非这个原因。

2. 上侧标签栏的顶部分割线是否可以在其他位置绘制，如“bg_topbar”中(已测试，不行)。目前我只能在“tab_bg”中绘制，导致上侧标签栏和下侧标签栏的高度相差1个像素。

A：皮肤有统一的工具栏分割线参数RowLine，开启时将无需在标签栏顶部再绘制，反之，若只想绘制标签栏顶部线条，因各个工具栏高度的不一致（可自定义高度）和位置及是否显示的不确定，要想将其画到工具栏背景图上自然行不通。
当标签栏处于窗口下方时，此时与标签栏接壤的是状态栏，而问题1中状态栏顶部已经绘制了线条，若此时标签栏再画线条的话势必重复，因而产生了楼主所说的1像素差的问题。但若状态栏不画线条，当标签栏处于上方时状态栏视觉上又有缺失，所以这个是个矛盾。

3. 由于TW上侧无法统一绘制分割线，导致侧边栏宽度分割线(即“img_sideband”)上下侧不对称，上侧少1个像素的分割线无法绘制，是否有办法解决？

A：顶部的那个“缺口”实际上是基于侧边栏布局的原因，同时皮肤分割线可以是单线或双线，在单线时联通该缺口似乎很容易，但双线时若联通则似有不妥（双线通常用于产生立体效果如蚀刻线，默认皮肤就是）。
纵横线条之间存在交叉关系，而且还要考虑单线、双线和禁止线条，甚至是有线条但与背景颜色却相同的情况。

4. 侧边栏中“我的电脑”和“下载管理”部分，存在重复绘制的分割线(造成有2个像素的分割线，比较难看)，目前我尚未找到办法去除，不知道是否有办法可以解决？

A：这个并非皮肤绘制问题，控件有边框，楼主说的部位这个边框为凹陷效果，所以左和上边深色右和下边浅色，从而在左上部产生了类似于双线的情况。只有做无边框设计方能避免，但势必失掉层次感。

5. 侧边栏的上侧框架线绘制不全，与右侧的侧边栏宽度分割线(即“img_sideband”)存在1个像素的距离无法绘制，是否有办法解决？

A：同问题4。

6. 侧边栏标签组隔离线(即“img_sideols”)上侧存在1个像素的多余绘制横线，导致侧边栏左侧框架线无法与侧边栏标签组隔离线(即“img_sideols”)相连接。此外，为了达到侧边栏标签组与侧边栏内容区仅以1像素分割线进行分割，我将“img_sideols”绘制为侧边栏内容区的底色，但为了内容区框架线的完整性，我将“img_sideols”的左侧1个像素绘制成框架线的颜色，但发现“img_sideols”两侧似乎采用的拉伸绘制方式，导致实际绘制出2个像素的灰线。上述问题是否有方法可以解决？

A：同问题4。sideols绘制方式是图像三等分中部不变两端拉伸，但楼主所疑问的根源并非在于此，即使不拉伸也不行。

7. 插件皮肤管理器按钮上下侧边框线绘制时被拉伸，是否可以解决？

A：这个使用的是btn_mask，我想未免复杂皮肤只能尽可能简化，这部分设法克服一下吧。

8. 侧边栏标题行的高度是否可以调整，我想达到与上侧标签栏等宽的效果，是否可以做到？(目前下侧标签栏已经做成与侧边栏的标签等宽)

A：不能调整。侧边栏标题部分本身是固定高度，但受RowLine参数的影响而变化。

9. 地址栏和搜索栏中的文字位置是否可以上下调整，目前感觉不是处于地址栏和搜索栏的中间，不够完美。

A：Tahoma 8号字体下确实有点不是垂直居中（下移一像素为好），但更大字体下都是居中的。

10. 菜单的边框的颜色是否可以修改？我暂时没有找到相关的设置项。

A：节[Menu]下BorderColor参数即是。

11. 目前好像“小工具栏”和侧边栏“收藏夹”中的“网络收藏夹”图标无法修改，这个是否可以改进？

A：可以修改。节[IMG]下添加参数 IL_NETFAV= 即可，图像大小16*16。

Sanly

感谢Aycox 超版的回答，非常细致！讨论的结果大致总结如下：

(1) 问题1、问题2和问题3实际上是有联系的，因为问题1无法解决而采用的退而求其次的办法导致了问题2和问题3的发生。如果侧边栏底部可以象上面的标签一样直接绘制分割线的话，在现有的皮肤模式下，问题2和问题3是可以解决的，即底部标签栏背景上下分别绘制分割线即可，这样上下标签栏高度即可相同，并且问题3中的则会产生上下均镂空1个像素不绘制的效果，也是对称的。问题1可能需要开发人员才能解决。

(2) 问题4、问题5和问题6也是有联系的，是由于控件边框为凹陷效果造成的，所以这些问题要解决也只能由开发人员解决，但这需要考虑层次感的问题(我觉得可以不用考虑，因为底部标签都是纯颜色绘制，都是平的，所以这里的层次感显得有点突兀)。问题6的后半部分问题比较难解决，似乎只有改成“左右部分原始，中部缩放”的三段式模式才能解决，但对于一般的皮肤，中间一般是否分割点的，所以中部缩放的效果不好，这个问题有点麻烦不能两全其美，只能等开发人员改变控件边框凹陷效果的模式后再看了。

(3) 问题7、问题8和问题9都没办法解决，但影响应该都不大。当然，如果开发人员觉得有时间顺便解决一下问题8，将其改成由“bg_sidetoolbar”图像的高度决定侧边栏标题行的高度，那是最好了。

(4) 问题10和问题11，顺利解决，非常感谢Aycox 超版!

皮肤又向着完美前进了一步，希望上述问题对开发人员以及后来的皮肤制作人员有所帮助。

[ 本帖最后由 Sanly 于 2008-7-6 00:26 编辑 ]

Aycox

楼主说的这几个问题联系是有的，这也恰恰表明很多细节会互相影响，也因皮肤设计的不同而不同。
这里讨论的线条有两种，一是根据颜色参数程序运行时加上去的，一是作图时画在图像上的，前者有很大局限性。

(1)、
楼主对问题1的说明忽视了页面区与状态栏交接处的线条处理，如果侧边栏与状态栏交接处的线条画在侧边栏上，那此时状态栏另外一半，以及不开侧边栏时状态栏岂不是没线条？显然这个线条只有画在状态栏上。

问题2，假如工具栏与标签栏的分割线不在Tab_bg上画，那么就必须增加单独的参数来控制，这样此处线条设计的灵活性差很多（#2已说明通过作图的方式画在工具栏背景图上行不通）。不难想象，真如此的话，那些复杂线条效果的以及仿MAC式标签的皮肤设计将难以实现。

楼主对问题3的解决方案基于问题2，如果问题2的方案不可行那么这个也就不可行（见#2回复），话说回来这有必要对称么，其上下相接的部位及线条图像的展现方法本身就不同。


(2)、
如果控件做无边框设计，楼主所指的部位问题是不存在了，但收藏夹、历史等栏目呢？试想下无边框的效果。因控件左右边都是紧贴侧边栏边缘的，无边框尚可，而上下边则不同。

再说之所以出现问题4，是因为楼主在侧边栏标题背景上画了底部分隔线才造成的，当然这不是说不能这样做，只是恰恰说明不同的设计不同的情况下的因素都要考虑，如果真有两全其美的办法相信程序员也绝对不会不用。

问题5，那个缺口“距离”实际上是凹陷效果的高光边缘，因为高光和背景都是白的，从而产生这种错觉。此部分颜色与系统主题相关。

-----------------------
个人认为这些问题应该属于可忽略的细节，甚至不如问题8、9来的明显和重要。
如果要谈改进的话，须先找到完美的解决办法，不过可能还有许多比这些更重要的细节对于设计发挥更有利更值得探讨。

Sanly

感谢Aycox 超版的细心回答，有些问题在考虑时确实疏忽了：

(1) 在原先考虑问题1、问题2和问题3的解决时，只是按照自己习惯考虑将标签栏放在下方的情况，而没有考虑到标签栏在上方的情况。
实际上问题1、问题2和问题3都不是大问题，就现在的情况来看没有任何影响，大家一般都不在乎问题2中的上标签栏少1个像素和问题3中上下不对称的问题。所以问题1、问题2和问题3可以PASS了。(啰嗦一句，问题3中如果“img_sideband”做成“上下部分原始，中部缩放”的三段式模式应该可以解决)

(2) 控件边框为凹陷效果确实是个两难的问题，所以也PASS吧。

(3) 问题8似乎是一个可以改进的地方。

BTW：我查看了网页上关于Skin.ini的注释，发现有许多地方可以更新了，如“btn_add_stop”、“btn_add_refresh”、“img_browserhint”、“img_hint”、“img_lock”、“img_infownd”和“img_wait”等。

此外，我在默认皮肤的ini文件中看见有“BTN_ADD_GO”、“BG_SIDEBAR”和“IMG_OPTIONS”三个参数，由于没找到相关图例，不知道实际体现在何处，如果Aycox 超版知道，请告知。

[ 本帖最后由 Sanly 于 2008-7-6 20:17 编辑 ]

Aycox

嗯，主站上的skin.ini参考刚好是一年前的，后期版本增加的皮肤参数以及原来就有的隐藏参数的确没有写上去。

BTN_ADD_GO是与btn_add_refresh配合的按钮，这个是模拟IE7，即输入网址时btn_add_refresh就显示BTN_ADD_GO的图像，页面加载后就显示成btn_add_refresh。

至于BG_SIDEBAR、IMG_OPTIONS我也不清楚，这个好像是2.0出来时最初的皮肤参数，不知道是废止的还是暂未发现其用途。

还有个参数可能楼主用得着，Fav_LoveText、Fav_LoveHighText，分别是收藏夹我的最爱文字颜色和鼠标高亮时的文字颜色。

Sanly

非常感谢，还真是不用不知道，继续更新一下皮肤！