| 教你做无缝连接的网页背景图案(图) |
|
|
| Anjer 赛迪网--中国电脑教育报 2002-01-18 |
前一段时间阿翔做网页的时候，想着插入一张图片作为背景，但是拉伸后的背景图片之间感觉很独立，有些突兀。今天一大早就愁眉苦脸地来找我，害得我懒觉都睡不成了。: (
说到无缝的网页背景，其实主要有两类：一类是一些简单的几何图形，然后平铺开来；另一种就是使用一些方法把一张普通的图片做成无缝的效果，然后作为背景。我们就一起来看看吧。
使用几何图形做无缝背景
这里我们就以正方形为例来介绍使用几何图形做无缝背景的方法，其他几何图形大同小异，希望能以此举一反三。
1.打开ImageReady 3，新建一个文件，“Width”和“Height”的值均为“19pixels”，背景为白色。
2.将图形放大到1600%，然后使用Marquee Tools(选择工具)以及选项栏上的运算控制按钮(增加、删除、相交和与或运算)建立如图1所示的选区。
3.单击Color面板右上角的小箭头，从弹出的菜单中选择“Grayscale Slider”。然后在文本框中输入20%，设置前景色。
4.按下“Alt+Del”组合键，用前景色填充选区。
5.选择“File＼Output Settings＼Background”，在出现的对话框中的“View As”项选择“Background”。
6.单击“File＼Preview In＼Internet Explorer”，可预览效果图。
使用图片做无缝背景
制作一张无缝背景图片比制作一张几何图形背景要复杂的多，我们一起来看看。
1.在Photoshop中打开一张图片，执行“View＼Show Rulers”，显示标尺。然后在标尺上右击，从弹出的快捷菜单中选择“Percent(百分比)”。
2.单击“View＼New Guide”，在弹出的对话框中选择“Orientation”项中的“Horizontal(水平)”选项，然后在下面的“Position”框中输入“50”，单击“OK”。
3.重复第3步，不过这次选择“Vertical(竖直)”选项，同样在文本框中输入“50”，单击“OK”。这样，就在水平和竖直方向各建立了一条平分辅助线。
4.选择“View＼Snap To＼Guides”项，使图像贴紧辅助线。
5.双击“Background(背景)”图层，在出现的“New Layer”对话框中直接单击“OK”按钮，将背景图层改为普通图层，这样做是便于后面对图像进行自由变换。
6.按下“Ctrl+T”，对图像进行自由变换，使图像紧贴辅助线，大小变为原来的1/4。之后复制3次该图层，并用移动工具改变复制图层的位置，最后效果如下图，可以地看出，这时图像不是无缝的。
7.合并所有的图层。然后选择“Clone Stamp(图章工具)”，在下拉选项中选择大小合适的笔刷，建议笔刷硬度值为“0”，然后按下“Alt”键在距离边缝几个像素的地方点下橡皮图章源点，上下或左右拖动橡皮图章工具来处理竖直或水平方向接缝。这一步非常重要，可反复试几次，直到达到满意的效果为止。
8.然后重复第3、4步的操作，分别在Horizontal和Vertical方向各建立25%和75%的辅助线。使用“Marquee Tools(矩形选择工具)”选中如下图所示的区域。
9.复制所选区域的图像，新建一个文件，Photoshop会自动将新文件的大小设为复制图形的大小。然后粘贴复制的图像。这样就得到了我们想要的无缝图像了。
讲到这里，我回头看到阿翔一脸茫然。“老兄，有没有简单点的方法呀？”有啊，而且完全是傻瓜式的。这个方法主要是使用了ImageReady 3中的一个滤镜。首先用ImageReady 3打开选择的背景图片，然后执行“Filter＼Other＼Tile Maker”，在弹出的对话框中指定“Blend Edges”选项的“Width”值为“10”，然后选定“Resize Tile to Fill Image”，单击“OK”。你看到了什么？图片已经变成无缝图像了。如果你不相信的话可以把它指定为背景，然后在浏览器中预览一下好了。
“可是，你刚才还说那么复杂的方法干什么呢？”主要是刚才的那个方法是通用的，基本上可以把每个图像做成无缝的。但是这个“Tile Maker”滤镜对于有些图片，转换后就面目全非了……
|
|
|
|
|
 |
|
|
|
|
|
|
|
