Photoshop中制作多种样式网格背景图案

关于网页图案

首先需要注意的是，用作页面背景的网页图案一定要简单，效果不要太强烈。它只需要提供一点纹理，不然会抢了页面内容的风头。事实上，页面内容应该是整个网站的视觉焦点。这种体验可以在我们更换手机壁纸的时候获得。我们往往会本能的选择那些非常漂亮的风景照或者非常抢眼的图片作为手机的背景图片。但是当我们真正换壁纸的时候，发现效果并不理想。原因是我们的手机屏幕不是光秃秃的什么都没有，而是充斥着各种图标和文字。原来，有很多信息。增加一张炫目的背景壁纸，只能打乱原本应该吸引眼球的内容，甚至会让人觉得复杂。在这一点上，我们应该向iphone的壁纸设计师学习。iphone上的壁纸看起来很低调，但是壁纸效果非常突出。因为他们知道屏幕上的各种图标才是视觉焦点。

我们在使用网页模式时也应该遵循这个原则。使用网页图案的初衷是为了打破背景颜色单一的单调，给页面增加不同的特色，让网页的内容和背景更有层次和区分度，给页面增加触感，可以让网页感觉更美观、精致、专业。这样会更加强调页面的内容，给人留下深刻的印象。但是在设计上不能偏离视觉焦点。关于这一点，请参阅文章《弄清楚设计中视觉表达的重点》。

下图是这次我们将要创建的网页图案效果：

首先，交叉网格模式

1.创建一个7像素乘7像素的文档。选择7像素的文档是因为我们想在文档中间画一条垂直线。使用奇数可以保证两边留白大小相同。然后使用放大镜工具将文档放大到2000%。

2.创建一个新层，选择单列选择工具(M)，并选择一个垂直选区，宽度为1像素的中心。颜色用#F3F3F3填充。新建一个图层，选择中间宽度为1像素的水平选区，颜色仍然用#F3F3F3填充。

3.接下来，将其保存为模式。选择(编辑)“定义模式”命令。之后，您可以从图层样式中的图案叠加中选择完成的图案样式。

这就完成了网格模式的基本模式。您还可以调整新文档的大小，例如5像素使网格更密，或11像素使网格更细。无论如何，你应该记住，一个非常微妙的图案效果遍布整个网页，看起来会比以前强烈得多，所以一定要选择柔和的颜色。

二、对角交叉线图案

实际上，将前面的十字网格图案旋转45就是对角线十字线条图案，但是这次我们将使用一个8像素乘8像素的文档。为什么不是之前的7像素？想想就知道，只有像素大小均匀的图案才能让两条对角线的交点位于文档的中心。所以这次我们将使用偶数像素大小的文档。

1.创建一个新文档(Ctrl N)，大小为8像素乘8像素，使用放大镜工具将其放大到2000%。

2.创建一个新层，选择线条工具(U)，将十字光标放在文档的左上角，按住Shift键，在右下角方向画一条1像素宽的对角线。选择#F3F3F3f3作为颜色，然后新建一个图层，从右下角到左上角画一条对角线。颜色还是# f3f3f3。

3.如上，选择编辑“定义图案”命令，将其保存为图案。在图层样式的图案叠加中选择保存的图案样式，并将其应用于大文档。

与上面的十字网格图案一样，您也可以调整线条之间的间距和线条的颜色，以获得满意的结果。

三、单向对角线图案

更简单的是，只需去掉上面对角线交叉图案中的一条线，保存为自定义图案即可。

您还可以通过更改线条的间距、粗细和方向来创建不同样式的单向对角线图案。如下图：

第四，添加颜色和材料

至此，我们要给大家介绍的三种不同风格的网格背景图案已经完成。接下来，如果你想对这些图案做一些改变，你也可以给它们添加一些颜色和材料。添加颜色很简单，用颜色填充图案背景即可。需要注意的是，颜色要柔和，对比度不要太强，一点颜色就行。添加素材相对复杂，因为这些图案最终平铺到整个页面作为网页背景后，人们很难看不到素材的重复，就像《在photoshop中创建不规则无缝拼接图案》中单纯平铺绿草的糟糕效果，这正是无缝拼接技术在相对复杂的图案中的作用。创建材料阵列有三个要点：

把图案做的稍微大一点，这样贴砖后相对不容易看到材质的可重复性。还要注意模式的文件大小对页面加载时间的影响。

图案的材质要低调，不要太突兀，有点感觉就好。

使用无缝拼接技术使得图案的材料不太引人注意。

接下来，我们用一个例子来说明如何创建一个可以应用于网页背景的材质图案。

1.创建一个大小为99像素乘99像素的新文档。创建一个新层，画一个覆盖整个文件的矩形，并应用我们之前创建的对角线十字图案样式到矩形。

2.将文档放大到200%，新建一个图层，使用与背景色同色的笔刷工具，选择材质细腻的笔触，在图案上随意点击几次，直到得到满意的效果。记住效果不要太强。之后，您可以将此材质图案保存为自定义图案，并将其应用于网页。

(来源：飞鱼声纳)