關於網（wǎng）頁圖（tú）案

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

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

下圖是這次我們（men）將要創建（jiàn）的網頁（yè）圖案效果：

一、十字網格圖（tú）案

1、創建一個7像素乘7像素大小的（de）文檔，之所（suǒ）以選擇7像素大小是因為（wéi）我們要在文檔（dàng）中間畫一條垂直線，使用（yòng）奇數可以保（bǎo）證兩邊的（de）空白同等（děng）大小（xiǎo）。然後使用放大鏡工具將（jiāng）文檔放大到2000%。

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

3、接下來將其（qí）保存（cún）為圖案。選擇編輯（jí）（Edit）》自定義圖案（Difine Pattern）命（mìng）令。之後就可（kě）以在圖（tú）層樣式（Layer Style）中的（de）圖案疊（dié）加（Pattern Overlay）中選擇做好的圖案樣式使（shǐ）用了。

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

二、對角交（jiāo）叉線圖案（àn）

實際上，將之前的十字網（wǎng）格（gé）圖（tú）案旋轉45°就是對（duì）角交（jiāo）叉線圖案，但是這次我（wǒ）們要使用8像素乘以8像素（sù）大（dà）小的文檔，為什（shí）麽不是之前（qián）的7個像（xiàng）素呢？想一想就知道隻有偶數像（xiàng）素大小的圖案才可能讓兩條對角線（xiàn）的交點處（chù）於（yú）文檔的中（zhōng）心點。所（suǒ）以這次我們（men）要使用偶數（shù）像素大小的文（wén）檔。

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

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

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

和上麵的十（shí）字（zì）網格圖案一樣，你也可以調整線條之間的間距和線條顏色來（lái）獲得讓（ràng）你滿意（yì）的效（xiào）果。

三、單向對角線圖案

這就更簡單了，隻需（xū）要將上麵對角交叉線（xiàn）圖案（àn）的（de）其中一條線去掉保（bǎo）存為自定（dìng）義圖（tú）案就（jiù）可以了（le）。

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

四、添加顏色和材質（zhì）

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

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

圖案的材（cái）質要低調一些（xiē），不要太突（tū）兀，有一點點感覺（jiào）就可以了（le）。

使用無縫拚（pīn）接技（jì）術（shù）讓圖（tú）案的材質更不容易（yì）察覺（jiào）。

接下來（lái）我們用一個（gè）例（lì）子來說明如（rú）何（hé）創（chuàng）建能（néng）夠應用於網頁背景（jǐng）的材（cái）質圖案。

1、新建一個99像素乘以（yǐ）99像素大小（xiǎo）的（de）文檔（dàng）。新建（jiàn）一個圖層（céng），畫出一個覆蓋（gài）整（zhěng）個文檔的矩形，給矩形（xíng）應用（yòng）之前我（wǒ）們創（chuàng）建的對（duì）角交叉（chā）線圖案樣式。

2、將文檔放大到200%，新（xīn）建圖層，使（shǐ）用和背景色顏色相同的（de）畫筆工具，選擇有（yǒu）細微材質的筆觸（chù）隨機在圖（tú）案上點擊（jī）幾次直到得到讓你滿意（yì）的效果（guǒ）。切（qiē）記效果不要太強（qiáng）烈。之後就可（kě）以將（jiāng）此材質（zhì）圖案保存為（wéi）自（zì）定義圖（tú）案應用於（yú）網頁頁麵了。

（來源：飛魚聲納）