• 所属类目:Imageready实例教程
  • 更新时间:2006-01-25 01:01:01
  • 关键词:无缝 ImageReady 背景 网页
  • 浏览次数:(今日:,本周:,本月:

分享到:

前一段时间阿翔做网页的时候,想着插入一张图片作为背景,但是拉伸后的背景图片之间感觉很独立,有些突兀。今天一大早就愁眉苦脸地来找我,害得我懒觉都睡不成了。:(

说到无缝的网页背景,其实主要有两类:一类是一些简单的几何图形,然后平铺开来;另一种就是使用一些方法把一张普通的图片做成无缝的效果,然后作为背景。我们就一起来看看吧。

使用几何图形做无缝背景

这里我们就以正方形为例来介绍使用几何图形做无缝背景的方法,其他几何图形大同小异,希望能以此举一反三。

1、打开ImageReady 3,新建一个文件,“Width”和“Height”的值均为“19pixels”,背景为白色。

2、将图形放大到1600%,然后使用Marquee Tools(选择工具)以及选项栏上的运算控制按钮(增加、删除、相交和与或运算)建立如图1所示的选区。


图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次该图层,并用移动工具改变复制图层的位置,最后效果如图2,可以明显地看出,这时图像不是无缝的。


图2

7、合并所有的图层。然后选择“Clone Stamp(图章工具)”,在下拉选项中选择大小合适的笔刷,建议笔刷硬度值为“0”,然后按下“Alt”键在距离边缝几个像素的地方点下橡皮图章源点,上下或左右拖动橡皮图章工具来处理竖直或水平方向接缝。这一步非常重要,可反复试几次,直到达到满意的效果为止。

8、然后重复第3、4步的操作,分别在Horizontal和Vertical方向各建立25%和75%的辅助线。使用“Marquee Tools(矩形选择工具)”选中如图3所示的区域。

9、复制所选区域的图像,新建一个文件,Photoshop会自动将新文件的大小设为复制图形的大小。然后粘贴复制的图像。这样就得到了我们想要的无缝图像了。


图3

讲到这里,我回头看到阿翔一脸茫然。“老兄,有没有简单点的方法呀?”有啊,而且完全是傻瓜式的。这个方法主要是使用了ImageReady 3中的一个滤镜。首先用ImageReady 3打开选择的背景图片,然后执行“Filter\Other\Tile Maker”,在弹出的对话框中指定“Blend Edges”选项的“Width”值为“10”,然后选定“Resize Tile to Fill Image”,单击“OK”。你看到了什么?图片已经变成无缝图像了。如果你不相信的话可以把它指定为背景,然后在浏览器中预览一下好了。

“可是,你刚才还说那么复杂的方法干什么呢?”主要是刚才的那个方法是通用的,基本上可以把每个图像做成无缝的。但是这个“Tile Maker”滤镜对于有些图片,转换后就面目全非了……[Page]

评论

相关下载

推荐下载