Photoshop像素风格纹理背景图案制作技巧
作者:李东博 来源:天极设计在线
有些网页背景是用像素风格纹理图案填充成的,其实使用Photoshop可以很快地制作出这样的图案,然后只需在网页编辑软件中将背景定义为该图案即可。本文用实例向大家介绍如何制作这样的纹理图案,让你的网页背景更加赏心悦目。 【文以Photoshop CS2中文版为例,其它版本的Photoshop在操作步骤上可能会略有差异。具体操作步骤如下。 1.在Photoshop中按Ctrl+N打开新建文档对话框,输入名称为图案,设置宽度和高度均为18像素,其它选项采用默认设置,如图1所示。设置完毕单击确定按钮。
 图1 2.使用工具箱中的缩放工具在文档窗口中拖动出一个矩形框,放大视图,可以重复操作直到放大到1600%的比例,如图2所示。
 图2 3.单击工具箱中的设置前景色图标,打开拾色器对话框,输入十六进制的颜色值d0d0d0,如图3所示,然后单击确定按钮完成前景色的设置。
 图3 4.按快捷键Alt+Del将背景填充为刚才所选的浅灰色。 5.选择工具箱中的铅笔工具,在选项栏中将画笔直径大小设置1px,用第3步的方法将前景色设置为4a4a4a,在图层面板中单击创建新图层按钮新建一个图层,然后在上面绘制出如图4所示的图案。
 图4 6.然后再将前景色设置为7b7b7b,用铅笔工具在中间位置绘制如图5所示的图案。
 图5 还可以在图案的中间加一个字母,例如加上一个D,如图6所示。完成后按Ctrl+E合并图层。
 图6 7.选择菜单命令编辑|定义图案,在图案名称对话框中输入一个名称,然后单击确定按钮。至此,可以直接将该图案输出为Web页所用格式图像,然后在网页编辑器中定义背景图像为该图像即可。如果是在Photoshop中使用该图案填充背景,则使用下面的方法。 8.按Ctrl+N新建一个较大的文档,如大小设置为600*600像素。选择菜单命令编辑|填充,然后在填充对话框中选择使用图案进行填充,并从自定图案中找到刚才自定义的图案,如图7所示。设置完毕单击确定完成填充即可。
 图7 如图8、图9所示为填充图案的示例。
 图8
 图9 使用上面介绍的方法可以制作出无穷多种风格不同的图案,我们所要做的是充分发挥自己的想像力,不断地进行尝试。下面图10、图11所示就是在网页设计中用得非常广泛的线性图案,要仔细看哦。
 图10
 图11 还可以有更多的例子,分别如图12、13、14、15所示。
 图12
 图13
 图14
 图15 这些图案除了可以应用于网页背景之外,还可以用于平面广告设计、包装设计等领域。 |