關於網頁（yè）圖案

首先需要說明的是，用作頁（yè）麵背景的網頁圖案（àn）一定要簡單，效（xiào）果不能太強烈（liè），隻需要提供一點點質感（gǎn）就可以了，要不就搶了頁麵內容的風頭。而實際（jì）上頁麵內容才應該是整個網站的（de）視覺焦點。這種經驗我們可以（yǐ）在給手機換壁紙的時候收獲到，我們經常是本能的去挑選那（nà）些非常漂亮的風景照或者非常搶眼（yǎn）的圖（tú）片作為手機的背景圖片，可等真（zhēn）正（zhèng）將壁紙換上（shàng）去之後發現（xiàn）效果並不理想，原因是手（shǒu）機的屏幕不（bú）是光禿禿一片，什麽也沒有，而是（shì）擺滿了各種圖標、文字。本（běn）來信息量就多，再添（tiān）加上一張奪目的背景壁（bì）紙，隻能是擾亂（luàn）本來（lái）應該吸引注意力的內（nèi）容（róng），甚至讓人產生紛（fēn）繁雜亂（luàn）的感覺。在這點上我們（men）要向（xiàng）iphoness的壁紙設計師學習，iphoness 手機上的壁紙看上去都比較低調，但是壁紙效果卻非常突出。因為他們知道屏幕上各種圖標才是視覺重點。

我們使用網頁圖案也要遵循這樣（yàng）的原則。使用網頁圖（tú）案（àn）的本（běn）意是為了打破背景單一色彩的單調性， 給頁麵增加不同的特質，讓（ràng）網（wǎng）頁內容和背景更有層次和區分性，並且給頁麵增（zēng）加觸感，可以讓網頁感覺更加優美、精致和專業。這樣會更加強調（diào）頁麵內容，給人留下深刻的印（yìn）象。但是我們卻不能（néng）偏離了設計中的視覺焦點。關（guān）於（yú）這點還可以參考《弄清楚設計中視覺表達（dá）的重點》這篇文章。

下圖是這次我們將要創建的（de）網頁圖案（àn）效果（guǒ）：

一、十（shí）字網格圖案

1、創建一個7像素乘7像素大小的文檔，之所以選擇7像素大小是因為我們要在文檔中間畫一條垂直（zhí）線（xiàn），使用奇數可以保證（zhèng）兩邊的空白同等大小。然後使用放大鏡工具將文檔放大（dà）到2000%。

2、新建一個圖層，選擇單列選區工具（jù）（M），居中選取1個像素（sù）寬的垂直（zhí）選區，顏（yán）色填充為#F3F3F3。再新建一個圖層，居中選取1個像素寬的水平選區，顏色仍然填充為#F3F3F3。

3、接（jiē）下來將其保存為圖案。選擇編輯（Edit）》自定義圖案（Difine Pattern）命令（lìng）。之後（hòu）就可以在圖層樣式（Layer Style）中的圖（tú）案（àn）疊加（Pattern Overlay）中選擇做好的圖案樣式（shì）使用了。

這樣就完成了（le）網格圖案的（de）基本樣式。你還可以通過（guò）調整新建文檔的大小，比如5個像素讓網格密集一（yī）些，或者11個像素讓網格（gé）稀疏一（yī）些。無論怎樣，你都要記（jì）住，非常細微的圖案效果平鋪（pù）到整個網頁頁麵的也會看上去比之前強烈得多，所以一定（dìng）要挑選柔和的色彩。

二、對角交叉線圖案

實際上，將（jiāng）之前的十字（zì）網格（gé）圖案旋轉45°就是對角交叉線圖案，但是這次我們要使（shǐ）用8像素乘以8像（xiàng）素大小的（de）文檔（dàng），為什麽不是之前的7個像素呢？想一想就知道隻有偶數像素大小的圖（tú）案才可能讓兩條對角線的交點處於文檔的中心（xīn）點。所以這次（cì）我們要使用偶（ǒu）數像素大小的文檔。

1、新建一個文檔（Ctrl+N），8像素乘以8像素（sù）大小，使用放大鏡（jìng）工具將（jiāng）其放大至2000%。

2、新建一個圖層，選擇線條工具（U），將十字光標放（fàng）置於文（wén）檔的左上（shàng）角，按（àn）住Shift鍵，向右下（xià）角方向畫一（yī）條1像素寬的對（duì）角線，顏色選擇#F3F3F3，再新建（jiàn）一（yī）個圖層，從右下角向左上（shàng）角畫一條對（duì）角線（xiàn），顏色（sè）任然為（wéi）#F3F3F3。

3、和上（shàng）麵一樣，選擇編輯（Edit）》自定義圖案（Difine Pattern）命令將其保存為圖案。在圖層樣（yàng）式（Layer Style）中的圖案疊加（Pattern Overlay）中選擇已（yǐ）經保存的圖案樣式應用到（dào）大幅文檔中。

和上麵（miàn）的十字網格圖案一樣（yàng），你也可（kě）以調整線條之間的間距和線條顏色來獲得讓你滿意的效果。

三（sān）、單向對角線圖案

這就更簡單了，隻需要將上麵對角交（jiāo）叉線圖案的（de）其中一條線去掉保存為自定義圖案就可以了。

你還可（kě）以（yǐ）通過改變線條間的間距、線條的粗細以（yǐ）及線條的方向來創（chuàng）建不同樣式的單向對角線圖案（àn）。如下圖：

四、添（tiān）加顏色和材質

到此為止，我們要給大家介紹的三種不同樣式的網格背景圖案就完成了。接下來如果你還想（xiǎng）讓這些圖案有些變化，還可（kě）以給它（tā）們（men）添加一些顏色和材質。添加顏色很（hěn）簡單，隻需要給圖案背景填充顏色（sè）就可以了（le）。需要注意（yì）的是，顏色要柔和，對比（bǐ）度不（bú）要（yào）太強烈，一點點顏色（sè）就可以了。添加材質相對來說就要複雜一些（xiē），因為這些圖案最（zuì）終（zhōng）作為（wéi）網頁背（bèi）景被（bèi）平鋪（pù）到整個頁麵（miàn）之後，很難讓人看不出來材質的重複，就像（xiàng）《在Photoshop中創建不規則無縫拚接圖案》中簡單平鋪的綠草地糟（zāo）糕的效果（guǒ）一樣，這也正是無縫拚接技術在相對複雜（zá）的圖案上所發揮（huī）的作用。以下有三點關於創建材質圖案（àn）的要點：

讓圖案稍微大一些，這樣（yàng）平鋪以後相對不容易看出來材（cái）質的重複性。但是還要留意圖案的文（wén）件大小對於頁麵載入時間的影響。

圖案的材質要低調一些，不要太突兀，有一點點感覺就可以了。

使用無縫拚接技（jì）術讓圖案的材質更不容易察覺。

接下來我們用一個（gè）例子來說明（míng）如何創建能夠應用於網頁（yè）背景的材質圖（tú）案。

1、新建一個99像素（sù）乘以99像素大小的文（wén）檔。新建一個圖層，畫出一個覆蓋整個文檔的矩形（xíng），給矩形應用之前我們創建的對角交叉（chā）線圖案樣式。

2、將文檔（dàng）放大到200%，新建圖層，使用和背景色顏（yán）色相同的畫筆工具，選擇（zé）有細微材質的筆觸隨機在圖案上點擊幾次直到得到讓你滿意的效（xiào）果。切記效果不（bú）要太強烈（liè）。之後（hòu）就可以將此材質圖案保存（cún）為自定義圖（tú）案應用於網頁頁麵了。

（來源：飛魚聲（shēng）納）