打印

[基本概念] 初步研究FW的纹理以及纹理填充

tgy007 [楼主]

夜游

高级会员

帖子: 284
体力: 660
威望: 45
离线: 134 天

1^# 大中小发表于 2006-9-6 15:51

应版主大哥的邀请，我斗胆将纹理之类的心得整理一下放上来。希望各位大侠们合适地补充添加

1.我们该在什么时候用到纹理。

首先这是个很主观向的问题，首先应该是以个人的判断来决定：比如大面积的色块，背景，需要间隔一致的线条等等，对于我本人来说，由于电脑内存和时间的原因，一个一个的克隆可不是好办法

其次，对于我们有时候需要模仿某个效果的时候，或许无法判断原图是否使用了纹理填充，那么我认为最好的办法应该是试验

。当然，前提是你的时间充分。如果不幸没有什么时间，而且经验又不是很足的请况下。请使用无敌的仿制大法之一－放大观察法

这里我提供一个小工具，它不但可以放大，放大倍数可调，而且还可以取色（默认按键Alt+C）。

利用这个工具，你可以很方便地查看原图是否是用了纹理，主要利用比较的方法。

像这个图，最起码，这个线段使用了纹理（或者说可以用纹理实现），因为其每一个交界处的像素都是一致的，而且小矩形中的像素也比较接近，但为什么又有点不一样呢？因为这只是一个JPG有损压缩文件，难免会有差异。

[ 本帖最后由凌志于 2006-9-6 16:07 编辑 ]

附件: 您所在的用户组无法下载或查看附件，您需要注册/登录后才能查看！

http://586i.com/tgy-007

TOP

做西部数码代理.Cn1元国际45元

tgy007 [楼主]

夜游

高级会员

帖子: 284
体力: 660
威望: 45
离线: 134 天

2^# 大中小发表于 2006-9-6 15:59

以上面这个图为例，这个纹理应该如何取下来呢？我们需要练习用肉眼判断：（当然也可以用工具，我就喜欢用工具，肉眼的好处是可以提高你的熟练度，节约你的时间，向老鸟进军

）

至于如何利用工具，我在PS专区发过一个教程，地址如下：
http://bbs.blueidea.com/viewthread.php?tid=2668447&highlight=
各位可以利用这个工具的裁切功能确定一个很完美又合理的纹理范围:P需要细细调试，如果配合肉眼观察效率大增。

上面这个图，我切取的纹理范围如下：

为了能达到立体感效果，我重新修改了一下：

注意这是个很小的源文件，不要忘记看了。

然后再填充到自己做的图内去：

其中，填充不单单就是填充进去就完了的，还需要仔细的调整，这个调整的一些参数和属性，我会在下面贴出来。

整个源文件↓

[ 本帖最后由 tgy007 于 2006-9-6 16:15 编辑 ]

附件: 您所在的用户组无法下载或查看附件，您需要注册/登录后才能查看！

http://586i.com/tgy-007

TOP

【美橙超级G空间】688元绑定10个子目录

心灵捕手

心灵捕手

银牌会员

帖子: 842
体力: 1687
威望: 34
离线: 211 天

3^# 大中小发表于 2006-9-6 16:03

内容还是很有用处的~ 不过标题应该是“研究”吧？

isLeon.Net－平常心非常事

TOP

请大家尊重和保护奥运知识产权。

凌志

杯莫停

版主

帖子: 4270
体力: 6444
威望: 73
当前: 辽宁鞍山

专长 UI

4^# 大中小发表于 2006-9-6 16:06

哈哈，你的速度真够快的。谢谢你的支持。

补充：

有时候FW自带的纹理和图案填充无法满足我们的需要，这时我们可以自己制作图案，然后使用其用做纹理或图案填充的素材，方法是在纹理或图案填充中选择下拉菜单最下方的“其他”项，选取对应文件，格式可以为GIF、JPG或PNG等文件类型。

自己制作纹理图案时要注意的一点就是要分析好纹理或图案的重复规律，纹理是象桌面墙纸一样平铺重复的，所以我们在制作纹理时要考虑重复后的效果，例如我们要用的纹理填充后的目的是网格线（象楼主发的图），那么就应该选择一个拐角或十字型作为纹理图案，填充后要多试看效果。

图案填充和纹理的区别是图案填充完全以图案作为重复项，并可以调整填充图案的方向和大小，但并不可以修改图案的不透明度；
而纹理的特点是可以将纹理和原有的填充融合一起，可以调整不透明度，并且还有一项专门的“透明”选项。

设计元素-ZhaoSuCai.com 杯莫停

TOP

还在为头像烦恼?还在为不能关注好友动态烦忧?快来蓝色理想家园吧!

凌志

杯莫停

版主

帖子: 4270
体力: 6444
威望: 73
当前: 辽宁鞍山

专长 UI

5^# 大中小发表于 2006-9-6 16:07

引用:

原帖由 心灵捕手 于 2006-9-6 16:03 发表
内容还是很有用处的~ 不过标题应该是“研究”吧？

我帮他改过来了。

设计元素-ZhaoSuCai.com 杯莫停

TOP

tgy007 [楼主]

夜游

高级会员

帖子: 284
体力: 660
威望: 45
离线: 134 天

6^# 大中小发表于 2006-9-6 16:21

呵呵，烟酒烟酒，一直用这个代替研究。老毛病了

现在进入正题，首先我们从一个图开始：

画一个矩形，按照图示设置渐变参数及角度（为了体现纹理在不同的颜色下的区别）：

画好后，注意看第一个图，纹理处选择的是网格线5，其对应的文件是：
你的FW安装目录\Configuration\Textures\Grid 5.gif
好，记住这个，然后将网格线旁边的数值设置为100－这个数值就是纹理填充的强度（注意这个纹理填充不同于FW的图案填充，至于图案填充，我会在稍后写出）。

这就是其效果：

现在我们打开这个纹理文件。路径已在上面标出：

由于其本身相当小，我给它放大到5000%也就是50倍，就是下面这个样子了

[ 本帖最后由 tgy007 于 2006-9-6 16:29 编辑 ]

附件: 您所在的用户组无法下载或查看附件，您需要注册/登录后才能查看！

http://586i.com/tgy-007

TOP

tgy007 [楼主]

夜游

高级会员

帖子: 284
体力: 660
威望: 45
离线: 134 天

7^# 大中小发表于 2006-9-6 16:34

细心的读者已经发现了。这个文件明明是黑少白多，那为什么纹理填充，强度100％却是黑多白少呢？
嘿，这就是纹理填充和图案填充最大的区别所在了。
试试将刚刚所说的强度调到10

你就会发现原来这个强度就是控制它的透明度啊

对，就是控制它的透明度

而且，纹理填充就是一个图像混合的过程，这点我是根据不断的试验得出的答案。
根据程序的原理，任何颜色的控制都是通过数学（也可以说函数）的操作实现的，应该是一个图像混合的结果。
这个方面的研究soskitty是达人。我数学成绩西差～就不在龙王面前卖自来水了

嗯，为了消除各位新手朋友的困惑我还多花点时间做这个试验，然后顺便就将图案填充也一并做个简单的交待

现在我们再来画一个同样的矩形，只要选中原来那个按下CTRL+SHIFT+D即可，克隆一个同样的矩形。

原来那个矩形的纹理填充强度设置为0。

克隆的那个填充颜色里选择图案－如图：

[ 本帖最后由 tgy007 于 2006-9-6 16:46 编辑 ]

附件: 您所在的用户组无法下载或查看附件，您需要注册/登录后才能查看！

http://586i.com/tgy-007

TOP

tgy007 [楼主]

夜游

高级会员

帖子: 284
体力: 660
威望: 45
离线: 134 天

8^# 大中小发表于 2006-9-6 16:48

我们得到的结果就是这个样子：

我们现在来调整一下它的透明度，如图：

这里要插一句了，图案填充里，颜色是被保留的，而纹理填充则不同，它将原图颜色去掉了，只留下黑白两种颜色，而且根据灰度来决定最后效果，比如黑色和白色位置互换。

而现在看看图案填充的效果，透明度设置为10，透明度改变了，但是它的颜色并没有出现黑白互换。其实，图案填充就是单纯的图像叠加，且颜色保留的结果。

[ 本帖最后由 tgy007 于 2006-9-6 16:55 编辑 ]

附件: 您所在的用户组无法下载或查看附件，您需要注册/登录后才能查看！

http://586i.com/tgy-007

TOP

tgy007 [楼主]

夜游

高级会员

帖子: 284
体力: 660
威望: 45
离线: 134 天

9^# 大中小发表于 2006-9-6 16:59

教程到这里，基本上应该完结了。

突然又想到一点，不过是纯粹判断出来的，并没有验证是否确切：

将下面一层，也就是第一个矩形的纹理填充调整为50

效果如下：

出现了非常立体感的效果。

这又是为什么呢？按道理，两者之间应该重叠，看不出任何立体效果才对。

将上面一层隐藏后发现，原来纹理填充并不是按第一个图形坐标0,0来的。如图：

因为这个纹理的图像文件是5X5像素的，我就做了两个同大的矩形，分别进行图案填充和纹理填充，发现纹理填充确实不是以0,0开始的，所以就出现了立体的效果，那么这么说来，还可以利用这个特性制作N多的立体纹理效果呢。
比如，以对角线1纹理为例。

那么我将下面的矩形纹理设置为对角线2呢？自己试试吧

[ 本帖最后由 tgy007 于 2006-9-6 17:10 编辑 ]

附件: 您所在的用户组无法下载或查看附件，您需要注册/登录后才能查看！

http://586i.com/tgy-007

TOP

tgy007 [楼主]

夜游

高级会员

帖子: 284
体力: 660
威望: 45
离线: 134 天

10^# 大中小发表于 2006-9-6 17:16

试验作品展示：

以上效果，均出自下面这个源文件

：

主要方法，就是控制里面的第三层的混合效果。第三层的填充是网页抖动(至于为什么这么做嘛，在这个帖子里按CTRL+A然后再看图就知道了

)。再透露一点小花招，你把第三层向上移动10个像素试试，看到了什么？

[End]

[ 本帖最后由 tgy007 于 2006-9-6 17:34 编辑 ]

附件: 您所在的用户组无法下载或查看附件，您需要注册/登录后才能查看！

http://586i.com/tgy-007

TOP

凌志

杯莫停

版主

帖子: 4270
体力: 6444
威望: 73
当前: 辽宁鞍山

专长 UI

11^# 大中小发表于 2006-9-8 08:54

凑个趣，帖一个刚学FW时按照某教程做的纹理填充练习：

纹理文件：

最终效果：

附件: 您所在的用户组无法下载或查看附件，您需要注册/登录后才能查看！

设计元素-ZhaoSuCai.com 杯莫停

TOP

rtben

高级会员

帖子: 395
体力: 868
威望: 0
离线: 26 天

12^# 大中小发表于 2006-9-8 12:22

学了不少了...

TOP

hewujing

新手上路

帖子: 5
体力: 7
威望: 0
离线: 646 天

13^# 大中小发表于 2006-9-11 10:19

恩.偶从最基础的学起.

TOP

coolsplay

新手上路

帖子: 9
体力: 5
威望: 0
离线: 14 天

14^# 大中小发表于 2006-10-9 15:26

哈哈，强

TOP

beautifulwork

长翅膀的野猪

中级会员

帖子: 216
体力: 387
威望: 0
当前: 大洋州澳大利亚
离线: 101 天

15^# 大中小发表于 2006-10-11 20:25

不错，学习了

TOP

makiyobaby

芒果冰山

中级会员

帖子: 183
体力: 208
威望: 0
当前: 上海徐汇
离线: 4 天

专长 网页设计,策划

16^# 大中小发表于 2008-6-26 11:15

图案也很强大的扩展的空间很大很多美术效果都可以通过自定义图案实现楼主分析的很透彻很有用收藏啦

瞌睡多脾气坏精神差

TOP

froglt

网页顽主

版主

帖子: 1938
体力: 3602
威望: 154
当前: 北京海淀区

专长 网页设计,平面,主编

17^# 大中小发表于 2008-6-26 13:55

纹理的作用还有很多，使用纹理不仅仅是为了做纹理背景的，还有可以给纹理加滤镜，效果也会不一样

(\/)︵ 
(·_ _ )~GO2HERE.NET/GO2HERE.NET.CN MORE THAN MEETS THE EYE ⺌囨囚囨図〆

TOP

blue32

FireWalk

高级会员

帖子: 571
体力: 723
威望: 4
当前: 广东广州
离线: 3 天

专长 网页设计,平面,编辑

18^# 大中小发表于 2008-6-26 22:35

纹理真的很不错。

生活是不公平的；要去适应它。

TOP

longjianghu

中级会员

帖子: 131
体力: 272
威望: 0
离线: 2 天

专长 网页设计,前端制作

19^# 大中小发表于 2008-7-31 11:26

不错的，学习了~~

http://host.chineseidc.com.cn/

TOP

mobaihuo

高级会员

帖子: 258
体力: 553
威望: 0
当前: 广东广州
离线: 1 天

20^# 大中小发表于 2008-7-31 22:54

太晚了好些地方没有参透明天再看一遍

qq群：33946792我的网站:www.nfbeauty.cn

TOP

cqliudebao

高级会员

帖子: 229
体力: 538
威望: 0
离线: 1 天

21^# 大中小发表于 2008-7-31 23:03

呵呵，这么细致啊！！佩服！！

www.webiso.net

TOP

tfusion

中级会员

帖子: 135
体力: 291
威望: 2
当前: 辽宁营口
离线: 2 天

专长平面

22^# 大中小发表于 2008-7-31 23:16

不错，值得顶

TOP