- 相關(guān)推薦
利用Photoshop創(chuàng )建多種樣式的網(wǎng)格背景圖案教程
在去年夏天寫(xiě)的那篇文章《在Photoshop中創(chuàng )建不規則無(wú)縫拼接圖案》給大家提供了如何在Photoshop中創(chuàng )建以綠草地為內容的無(wú)縫拼接網(wǎng)頁(yè)圖案的方法。今天再來(lái)介紹一下如何在Photoshop中創(chuàng )建網(wǎng)格背景的無(wú)縫拼接圖案。
關(guān)于網(wǎng)頁(yè)圖案
首先需要說(shuō)明的是，用作頁(yè)面背景的網(wǎng)頁(yè)圖案一定要簡(jiǎn)單，效果不能太強烈，只需要提供一點(diǎn)點(diǎn)質(zhì)感就可以了，要不就搶了頁(yè)面內容的風(fēng)頭。而實(shí)際上頁(yè)面內容才應該是整個(gè)網(wǎng)站的視覺(jué)焦點(diǎn)。這種經(jīng)驗我們可以在給手機換壁紙的時(shí)候收獲到，我們經(jīng)常是本能的去挑選那些非常漂亮的風(fēng)景照或者非常搶眼的圖片作為手機的背景圖片，可等真正將壁紙換上去之后發(fā)現效果并不理想，原因是手機的屏幕不是光禿禿一片，什么也沒(méi)有，而是擺滿(mǎn)了各種圖標、文字。本來(lái)信息量就多，再添加上一張奪目的背景壁紙，只能是擾亂本來(lái)應該吸引注意力的內容，甚至讓人產(chǎn)生紛繁雜亂的感覺(jué)。在這點(diǎn)上我們要向iphone的壁紙設計師學(xué)習，iphone 手機上的壁紙看上去都比較低調，但是壁紙效果卻非常突出。因為他們知道屏幕上各種圖標才是視覺(jué)重點(diǎn)。
我們使用網(wǎng)頁(yè)圖案也要遵循這樣的原則。使用網(wǎng)頁(yè)圖案的本意是為了打破背景單一色彩的單調性， 給頁(yè)面增加不同的特質(zhì)，讓網(wǎng)頁(yè)內容和背景更有層次和區分性，并且給頁(yè)面增加觸感，可以讓網(wǎng)頁(yè)感覺(jué)更加優(yōu)美、精致和專(zhuān)業(yè)。這樣會(huì )更加強調頁(yè)面內容，給人留下深刻的印象。但是我們卻不能偏離了設計中的視覺(jué)焦點(diǎn)。關(guān)于這點(diǎn)還可以參考《弄清楚設計中視覺(jué)表達的重點(diǎn)》這篇文章。
下圖是這次我們將要創(chuàng )建的網(wǎng)頁(yè)圖案效果：
一、十字網(wǎng)格圖案
1、創(chuàng )建一個(gè)7像素乘7像素大小的文檔，之所以選擇7像素大小是因為我們要在文檔中間畫(huà)一條垂直線(xiàn)，使用奇數可以保證兩邊的空白同等大小。然后使用放大鏡工具將文檔放大到2000%。
2、新建一個(gè)圖層，選擇單列選區工具(M)，居中選取1個(gè)像素寬的垂直選區，顏色填充為#F3F3F3。再新建一個(gè)圖層，居中選取1個(gè)像素寬的水平選區，顏色仍然填充為#F3F3F3。
3、接下來(lái)將其保存為圖案。選擇編輯(Edit)》自定義圖案(Difine Pattern)命令。之后就可以在圖層樣式(Layer Style)中的圖案疊加(Pattern Overlay)中選擇做好的圖案樣式使用了。
這樣就完成了網(wǎng)格圖案的基本樣式。你還可以通過(guò)調整新建文檔的大小，比如5個(gè)像素讓網(wǎng)格密集一些，或者11個(gè)像素讓網(wǎng)格稀疏一些。無(wú)論怎樣，你都要記住，非常細微的圖案效果平鋪到整個(gè)網(wǎng)頁(yè)頁(yè)面的也會(huì )看上去比之前強烈得多，所以一定要挑選柔和的色彩。
二、對角交叉線(xiàn)圖案
實(shí)際上，將之前的十字網(wǎng)格圖案旋轉45°就是對角交叉線(xiàn)圖案，但是這次我們要使用8像素乘以8像素大小的文檔，為什么不是之前的7個(gè)像素呢?想一想就知道只有偶數像素大小的圖案才可能讓兩條對角線(xiàn)的交點(diǎn)處于文檔的中心點(diǎn)。所以這次我們要使用偶數像素大小的文檔。
1、新建一個(gè)文檔(Ctrl+N)，8像素乘以8像素大小，使用放大鏡工具將其放大至2000%。
2、新建一個(gè)圖層，選擇線(xiàn)條工具(U)，將十字光標放置于文檔的左上角，按住Shift鍵，向右下角方向畫(huà)一條1像素寬的對角線(xiàn)，顏色選擇#F3F3F3，再新建一個(gè)圖層，從右下角向左上角畫(huà)一條對角線(xiàn)，顏色任然為#F3F3F3。
3、和上面一樣，選擇編輯(Edit)》自定義圖案(Difine Pattern)命令將其保存為圖案。在圖層樣式(Layer Style)中的圖案疊加(Pattern Overlay)中選擇已經(jīng)保存的圖案樣式應用到大幅文檔中。
和上面的十字網(wǎng)格圖案一樣，你也可以調整線(xiàn)條之間的間距和線(xiàn)條顏色來(lái)獲得讓你滿(mǎn)意的效果。
三、單向對角線(xiàn)圖案
這就更簡(jiǎn)單了，只需要將上面對角交叉線(xiàn)圖案的其中一條線(xiàn)去掉保存為自定義圖案就可以了。
你還可以通過(guò)改變線(xiàn)條間的間距、線(xiàn)條的粗細以及線(xiàn)條的方向來(lái)創(chuàng )建不同樣式的單向對角線(xiàn)圖案。如下圖：
四、添加顏色和材質(zhì)
到此為止，我們要給大家介紹的三種不同樣式的網(wǎng)格背景圖案就完成了。接下來(lái)如果你還想讓這些圖案有些變化，還可以給它們添加一些顏色和材質(zhì)。添加顏色很簡(jiǎn)單，只需要給圖案背景填充顏色就可以了。需要注意的是，顏色要柔和，對比度不要太強烈，一點(diǎn)點(diǎn)顏色就可以了。添加材質(zhì)相對來(lái)說(shuō)就要復雜一些，因為這些圖案最終作為網(wǎng)頁(yè)背景被平鋪到整個(gè)頁(yè)面之后，很難讓人看不出來(lái)材質(zhì)的重復，就像《在Photoshop中創(chuàng )建不規則無(wú)縫拼接圖案》中簡(jiǎn)單平鋪的綠草地糟糕的效果一樣，這也正是無(wú)縫拼接技術(shù)在相對復雜的圖案上所發(fā)揮的作用。以下有三點(diǎn)關(guān)于創(chuàng )建材質(zhì)圖案的要點(diǎn)：
讓圖案稍微大一些，這樣平鋪以后相對不容易看出來(lái)材質(zhì)的重復性。但是還要留意圖案的文件大小對于頁(yè)面載入時(shí)間的影響。
圖案的材質(zhì)要低調一些，不要太突兀，有一點(diǎn)點(diǎn)感覺(jué)就可以了。
使用無(wú)縫拼接技術(shù)讓圖案的材質(zhì)更不容易察覺(jué)。
接下來(lái)我們用一個(gè)例子來(lái)說(shuō)明如何創(chuàng )建能夠應用于網(wǎng)頁(yè)背景的材質(zhì)圖案。
1、新建一個(gè)99像素乘以99像素大小的文檔。新建一個(gè)圖層，畫(huà)出一個(gè)覆蓋整個(gè)文檔的矩形，給矩形應用之前我們創(chuàng )建的對角交叉線(xiàn)圖案樣式。
2、將文檔放大到200%，新建圖層，使用和背景色顏色相同的畫(huà)筆工具，選擇有細微材質(zhì)的筆觸隨機在圖案上點(diǎn)擊幾次直到得到讓你滿(mǎn)意的效果。切記效果不要太強烈。之后就可以將此材質(zhì)圖案保存為自定義圖案應用于網(wǎng)頁(yè)頁(yè)面了。
【利用Photoshop創(chuàng )建多種樣式的網(wǎng)格背景圖案教程】相關(guān)文章：
利用PS濾鏡制作出多種邊框的教程06-01
多種PS照片教程07-14
PhotoShop基礎工具教程07-07
Photoshop的顏色原理教程10-11
Photoshop調色詳細教程05-30
photoshop實(shí)例教程09-15
Photoshop霧化效果教程09-23