世界之窗论坛 - Powered by Discuz! Board

标题: [皮肤教程.no.3]制作透明工具栏按钮★修正◢2005年11月2日 [打印本页]

作者: folder 时间: 2005-9-3 13:06 标题: [皮肤教程.no.3]制作透明工具栏按钮★修正◢2005年11月2日

前言：

1、何为透明？
在TW1.22版本及之前的我用过的版本，透明是指按钮在实际使用过程中，静态时、hover时，除了按钮部分显示出来以外，透明的部分显示出工具栏的背景和hover时VS设定的位图的背景

2、一直在琢磨着制作透明工具栏按钮
一直也没有什么好的方法，在chinaui上看了好久找了好久都没有找到一个有关这方面的教程，郁闷了很长一段时间
前几天在students.概念这款皮的按钮透明制作过程中，发现了一个比较好的办法
今天又试验了一把，把这个办法再深入、简化

现在制作一个教程，希望大家能相互交流
说明一下，这个方法是原创的！
包括例子里的按钮形式也是原创，当然这个按钮只是一个草图，没有表现出最终的效果

制作工具：photoshop

嗯，先看一个效果图吧！不然没有最终结果，看起来比较不那个什么。。。

http://forum.ioage.com/forum/cn/attachments/forumid_4/zbjD97SmwO3T6860zbjD97SmwO0=_wLSxjLg5ZFVT.jpg

[ Last edited by folder on 2005-11-2 at 01:54 PM ]

作者: folder 时间: 2005-9-3 13:14

教程开始
本教程以1002.bmp工具栏的24象素方形按钮为例解说

[序]
按钮的透明背景化，一般在边缘是非直线型的情况下，并且边缘有色彩过渡的情况和需要进行处理的
通常的清一色方形，或者边缘没有颜色过渡的情况是不需要的
看一下这三种情况的例图，还是图能说明一点问题

图片附件: 3个基本边缘.jpg (2005-9-3 13:14, 72.34 KB) / 下载次数 1419
http://bbs.theworld.cn./attachment.php?aid=2961&k=815b5f9bf7d3bc01b859dd196f29e2eb&t=1732368304&sid=zB37ag

作者: folder 时间: 2005-9-3 13:40

边缘过渡类型的按钮制作方法不在本教程的说明之中
另外需要说明的是边缘过渡的按钮，边缘由于渐变的关系，在边缘的颜色会有一定程度的透明度，会透出底色，而TW的各位图，目前在制作皮肤的过程中发现除了右上五按钮不支持透明色255,0,255外，都支持255,0,255的粉红色作为透明区域，如果不处理有一定透明度边缘的按钮，直接填充1002的透明区域为粉红色，那么边缘会泛红，因为保存为bmp后的1002，由于边缘透明度的关系而使得色彩会呈现为255,2,245之类的接近255,0,255粉红色的粉色，而目前的TW支持的皮肤控件可能会把这类颜色直接表现出来，边缘就会在视觉效果上呈为粉红系列的颜色

这里可以举例
处理与未处理两种边缘的视觉效果

图片附件: 透明处理与未透明处理对比.JPG (2005-9-3 13:40, 70.05 KB) / 下载次数 1387
http://bbs.theworld.cn./attachment.php?aid=2959&k=bb33ac961744001c66715719431f6a6f&t=1732368304&sid=zB37ag

作者: folder 时间: 2005-9-3 13:50

下面开始介绍如何把边缘透明解决的具体方法
其实非常简单

1、制作好边缘过渡的按钮后，制作过程中可以把消除锯齿勾上，以消除锯齿，这样边缘效果比较自然
2、确定你所用的工具栏的背景
注：
这里说“背景”而不用“背景色”是因为1002按钮的背景是1008.bmp，1008可以作成各种有过渡风格的色彩渐变的样子，并非死呆板的清一色背景
3、把背景图层置于按钮的最下面一层，作为背景层
4、设置当前层为按钮层(如果你的按钮层是分成好多图层的话，要求合并在一个层里)
5、用魔术棒工具选取按钮外侧的区域
　　★★★★注：这里魔术棒要把“消除锯齿“的勾去掉★★★★
6、当前层设置为背景层，删除选中的外侧区域
7、合并按钮层和背景层，搞定！

ps:如果你是用单色的背景层的话，可以把第3、步修改成：
3(a)、在按钮下方新建一透明图层
6(b)、当前层设置为背景层，反选，填充背景色

这样就完成了单个按钮的透明背景的处理
例图中我把按钮特效层和背景图以及粉红背景层在ps图层面板的排列给出来

[ Last edited by folder on 2005-11-2 at 01:48 PM ]

图片附件: 图层排列.jpg (2005-9-3 13:50, 135.32 KB) / 下载次数 1406
http://bbs.theworld.cn./attachment.php?aid=2960&k=fe84edf55e04ba67b485a21e66c7ad63&t=1732368304&sid=zB37ag

图片附件: 麻木棒的消除锯齿.JPG (2005-9-3 13:50, 29.26 KB) / 下载次数 1438
http://bbs.theworld.cn./attachment.php?aid=3915&k=db9cfa9b8c408b135f37ed835855b7b5&t=1732368304&sid=zB37ag

作者: folder 时间: 2005-9-3 13:58

结束语

大家可以看到我在上图的图层排列中，粉红背景图与1002工具栏背景层各建了一层在第n个步骤时，我反选后，直接删除，因为之前建立了一个粉红背景层放在最下方

补充一下本教程的思路：
我们要达到的效果是在1002背景下，使单个按钮的边缘能渐变为背景，所以直接把背景作为渐变制作的基础层就可以很好地解决渐变的问题了
再者透明区域的选择时采用　不消除边缘，也是硬梆梆地把透明区域切出来，如果消除边缘，又会有一个颜色渐变的效果，你再填充粉色，或者在最下方建立一个粉色背景层，那么这个粉红以又会在边缘显出来

本教程适用于TW的皮肤控件，至于其它类型的皮肤控件的表现效果没有研究，如果你因本教程制作方法，不能解决其它制作的透明问题，请自行研究！

PS：本教程是适用于对PS有一定了解的skinner，如果你对本教程中所用到的ps的基本操作不明白，请自己通过网上的众多教程进行学习

作者: 山水人天 时间: 2005-9-6 16:01

超级强超级支持超级拜师学艺中

作者: xmjun 时间: 2005-9-7 14:48

赢政的支持！！

作者: ncncnc 时间: 2005-9-17 15:54

谢谢教导！

作者: fxjtv 时间: 2005-9-27 18:50

支持，继续

作者: fxjtv 时间: 2005-9-27 18:56

支持，继续

作者: Ruibi 时间: 2005-9-28 17:48

学习一下～

作者: ZC_09 时间: 2005-9-28 20:59

支持，谢谢

作者: 雨心碎 时间: 2005-9-29 00:33

要能作出你图片里面那种也不错了效果很好

作者: myg579 时间: 2005-10-18 11:35

哦，有难度啊，支持一下。

作者: xyzroger 时间: 2005-11-24 14:16

我要学习了~哎~

作者: helloworld 时间: 2006-1-4 15:32

看来我得学学photoshop咯

欢迎光临世界之窗论坛 (http://bbs.theworld.cn./)