欢迎来到神秘园PS教程自学网,这里是Photoshop爱好者的乐园![登录][注册]

PS制作网页背景填充图案(像素化)

2011年10月18日09:24来源:互联网编辑:Dante

有些网页背景是用像素风格纹理图案填充成的,其实使用Photoshop可以很快地制作出这样的图案,然后只需在网页编辑软件中将背景定义为该图案即可。本文用实例向大家介绍如何制作这样的纹理图案,让你的网页背景更加赏心悦目。

本文以Photoshop CS2中文版为例,其它版本的Photoshop在操作步骤上可能会略有差异。具体操作步骤如下。

1.在Photoshop中按Ctrl+N打开“新建文档”对话框,输入“名称”为“图案”,设置“宽度”和“高度”均为18像素,其它选项采用默认设置,如图所示。设置完毕单击“确定”按钮。

网页背景填充图案-步骤1-www.garden29.com

2.使用工具箱中的“缩放工具”在文档窗口中拖动出一个矩形框,放大视图,可以重复操作直到放大到1600%的比例,如图所示。

网页背景填充图案-步骤2-www.garden29.com

3.单击工具箱中的“设置前景色”图标,打开“拾色器”对话框,输入十六进制的颜色值“d0d0d0”,如图所示,然后单击“确定”按钮完成前景色的设置。

 网页背景填充图案-步骤3-www.garden29.com

4.按快捷键Alt+Del将背景填充为刚才所选的浅灰色。

5.选择工具箱中的“铅笔工具”,在选项栏中将画笔直径大小设置1px,用第3步的方法将前景色设置为“4a4a4a”,在图层面板中单击“创建新图层”按钮新建一个图层,然后在上面绘制出如图所示的图案。

网页背景填充图案-步骤5-www.garden29.com

6.然后再将前景色设置为“7b7b7b”,用铅笔工具在中间位置绘制如图所示的图案。

网页背景填充图案-步骤6-www.garden29.com

还可以在图案的中间加一个字母,例如加上一个D,如图所示。完成后按Ctrl+E合并图层。

网页背景填充图案-步骤6-1-www.garden29.com

7.选择菜单命令“编辑|定义图案”,在“图案名称”对话框中输入一个名称,然后单击“确定”按钮。至此,可以直接将该图案输出为Web页所用格式图像,然后在网页编辑器中定义背景图像为该图像即可。如果是在Photoshop中使用该图案填充背景,则使用下面的方法。

8.按Ctrl+N新建一个较大的文档,如大小设置为600*600像素。选择菜单命令“编辑|填充”,然后在“填充”对话框中选择使用图案进行填充,并从“自定图案”中找到刚才自定义的图案,如图所示。设置完毕单击“确定”完成填充即可。

网页背景填充图案-步骤8-www.garden29.com

教程由[www.Garden29.com]收集整理
ps教程自学网 ps照片 ps抠图教程 ps鼠绘教程 ps字体 ps技巧 ps入门 ps知识问答
下次找不到怎么办?★一键收藏分享★
更多
设计软件教程
PS网页设计效果图推荐>>