Vb教程 Vb.net教程 Vfp教程 C/C++教程 Vc/Vc++教程 Delphi教程 Java教程 Powerbuilder
  杀毒频道 | 短信频道 | 网络电视 | 论文中心 | 学上网 | 学软件 | 网页特效 | 电脑基础 | 论坛  
  NCRE | 软考 | CET | 职称英语 | 司法考试 | 报关员 | 公务员 | CATTI | CPA考试  
  Html教程 | Css教程 | Xml教程 | Asp教程 | Asp.net | Php教程 | Jsp教程 | Linux教程 | QQ技巧  
Photoshop Illustrator ImageReady Maya教程 3D Max教程 Lightscape Coredraw教程 Authorware Autocad教程 Freehand教程
Access教程 Mysql教程 Sql server Oracle教程 Word教程 Excel教程 Powerpoint Frontpage Asp.net源码 Php源代码
Flash教程 Fireworks Dreamweaver C#教程 outlook教程 系统安装 vbscript教程 Javascript Jsp源代码 Asp源代码
您的位置:首页 >> ImageReady教程 >> 正文

巧用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”滤镜对于有些图片,转换后就面目全非了……

[返回]

编程语言 web开发 数据库 网络技术 操作系统 服务器 网页设计 图形设计 办公软件 常用软件 学电脑

Copyright© www.bianceng.cn Powered by 编程入门网 All Rights Reserved.
关于本站 | 版权声明 | 联系我们 | 友情链接 |
编程入门网 版权所有