淺談網(wǎng)頁(yè)設計中紋理的運用技巧發(fā)布者：本站     時(shí)間：2021-12-31 10:12:14

texture在設計中應用已經(jīng)越發(fā)完善了。它將形成一種趨勢，簡(jiǎn)單而有效的為web頁(yè)面設計添加幾分深度感。 充分發(fā)揮texture的威力是一份偉大的職責。它不僅能夠很好增強web設計的表現效果，對于設計師來(lái)說(shuō)還是一個(gè)質(zhì)量上乘的好工具。它的美妙作用是可以引導瀏覽者的視線(xiàn)，強調關(guān)鍵元素的重要性。

然而，長(cháng)期以往texture似乎總和“臟亂”或者“低劣”設計為伍，它的濫用處處可見(jiàn)，像樂(lè )隊的website等，對于設計師來(lái)說(shuō)，它遺留下來(lái)的滋味可不怎么樣!。 也正是由于以前的濫用，texture的優(yōu)勢長(cháng)期被人們所忽略。texture可以讓web設計更具整體感，但是前提是不要讓它滿(mǎn)屏皆是。

Texture(紋理)VS. Patterns(圖案)

在我們深入了解texture之前，先弄懂texture和pattern之間的區別。這兩個(gè)詞經(jīng)常被誤認為同義的。pattern通常是小的、重復的圖片元素，而texture更趨向于大一點(diǎn)的不重復的圖片。你可以想象兩個(gè)集合，左邊是pattern，右邊是texture，這兩個(gè)集合有一部分交集，也就是說(shuō)在某些時(shí)候texture也是pattern。去tileabl這個(gè)網(wǎng)站逛一圈，也許你會(huì )有更清晰的印象。

Texture的功能

我們喜愛(ài)texture的理由可以有很多。設計時(shí)的選擇不止是簡(jiǎn)單說(shuō)“嗯，這樣看起來(lái)還不錯”，設計是出于一種目的，而每一個(gè)對texture選擇應該權衡利弊?，F在讓我們?yōu)g覽下使用texture到底有哪些好處呢?

獲取目光焦點(diǎn)

texture可以讓元素顯著(zhù)起來(lái)，譬如titles、headings、icons和buttons。它可以吸引眼球去傳達一個(gè)動(dòng)作指示或者告訴你這是主要的heading部分。這也許是最明確的一種方式去理解texture了。

最低限度的去使用texture，以便區分website中內容和其他部分。它引導著(zhù)瀏覽者的目光直接鎖向那些設計者有意安排的元素上。它可能是一種特別棒的方法讓關(guān)鍵商標脫穎而出。

你可以用很多方法去吸引別人的注意力，然而這兩種常用的簡(jiǎn)單的方法，你不妨嘗試一下。一種是帶有紋理的logo和干凈的背景搭配，另外一種正好反過(guò)來(lái)，干凈的logo和帶有紋理的背景一起。

淺談<a href=/photoshop/web/ target=_blank class=infotextkey>網(wǎng)頁(yè)設計</a>中紋理的運用技巧,PS教程,

淺談網(wǎng)頁(yè)設計中紋理的運用技巧,PS教程,

增強信息的筑造風(fēng)格

texture習慣于指導瀏覽行為。而例如線(xiàn)條、色塊和對比同樣習慣用于將內容進(jìn)行邏輯區分。有效的將texture結合其他方式會(huì )更具表現力。使用texture的最終目的不是放棄其他的筑造風(fēng)格方式，而是要去加強它們的表現效果。

淺談網(wǎng)頁(yè)設計中紋理的運用技巧,PS教程,

淺談網(wǎng)頁(yè)設計中紋理的運用技巧,PS教程,

以上網(wǎng)站，個(gè)別的元素為了特殊的目的使用了texture。該網(wǎng)站把內容劃分成幾個(gè)邏輯區域，讓用戶(hù)清楚的看到從哪開(kāi)始，到哪結束。通過(guò)texture使得用戶(hù)能夠清晰準確識別每個(gè)邏輯內容塊，從而增強了頁(yè)面的信息筑造風(fēng)格。

并且，texture完美的配合了網(wǎng)站的風(fēng)格和主題。所有元素猶如量身訂做般合理的表現了主題，因此強調了整個(gè)website的全部信息。

建立一種氛圍&個(gè)性化

越來(lái)越多的客戶(hù)希望網(wǎng)站設計不止是友好的表現頁(yè)面內容，他們更希望能看到一些個(gè)性獨特，自己的標志更易被用戶(hù)所識別的web設計。texture便可以通過(guò)很多方式實(shí)現這一目的。

淺談網(wǎng)頁(yè)設計中紋理的運用技巧,PS教程,

上面這個(gè)網(wǎng)站便十分幫的表現了她的個(gè)人品牌。她使用了texture來(lái)更簡(jiǎn)潔的表現了頭像部分，如果沒(méi)有texture，該網(wǎng)站會(huì )顯得平淡無(wú)味，而且缺乏個(gè)性。texture無(wú)形中使得web設計中多了很多超棒的因素，讓website變得更具魅力。

提示和建議

從上面看來(lái)texture的確很不錯，但是使用中你也會(huì )想到如何才能避免技術(shù)濫用和思維定式的陷阱呢。

保證易讀性

千萬(wàn)不要為了使用texture而犧牲了易讀性，這也是我們經(jīng)常犯的一個(gè)錯誤。易讀性對于一個(gè)網(wǎng)站來(lái)說(shuō)具有最高級別的重要性。

淺談網(wǎng)頁(yè)設計中紋理的運用技巧,PS教程,

別死馬當活馬醫

在印刷里，texture很難會(huì )被過(guò)渡使用，當然有時(shí)也會(huì )因為流派不同而不同。然而在web領(lǐng)域，texture卻很容易出現濫用的情況。

淺談網(wǎng)頁(yè)設計中紋理的運用技巧,PS教程,

實(shí)踐預示著(zhù)提高

讓你的設計不斷的嘗試新的想法，平時(shí)從來(lái)不會(huì )添加texture的地方你也可以嘗試一把，說(shuō)不準會(huì )有意想不到的效果。

如果它不出于任何目的，請刪除

在用戶(hù)網(wǎng)站上使用texture之前，請精煉好你的技術(shù)。必須反復的確認你使用texture出于某種有建設性的想法，如果你不能夠使得texture有助你整體設計的提升，請放棄。

沒(méi)有任何理由需要過(guò)渡使用texture。web的全部目的是為了傳播信息，當然沒(méi)有必要去讓你的內容毫無(wú)可讀性。所以，精煉和細微的紋理效果可以更好的幫助提高項目水平。

考慮你想達到什么樣的效果

從我們的經(jīng)驗得知，肆無(wú)忌憚的使用texture是件多么容易的事。而在頭腦里一直想著(zhù)你希望最終達到什么樣的效果可以有效的避免濫用情況的發(fā)生。如果你想要一個(gè)淡淡紋理效果的背景，那就馬上做，之后就去執行下一步。否則的話(huà)，你可能再也不會(huì )完成它。

收集資源，這樣你不必在用時(shí)才去搜索

你需要花大量的時(shí)間去搜尋和下載那些對你來(lái)說(shuō)有用的資源，保存資源是一項偉大的輔助工作。請相信我們，沒(méi)有什么比錯過(guò)一個(gè)完美筆刷，再想用時(shí)已經(jīng)找不到地址時(shí)更加令人沮喪了。我們的筆刷列表既長(cháng)又多樣化，長(cháng)年累月的時(shí)間里，我們從類(lèi)似deviantART和Brusheezy里收集各種各樣的筆刷，然后自定義成為自己的。

學(xué)會(huì )蒙版技術(shù)

學(xué)習使用圖層蒙版會(huì )為你在工作節省下大量的時(shí)間，同時(shí)也會(huì )成為你的利器之一。圖層蒙版也是一個(gè)超棒的方式而不會(huì )破壞任何原圖設計。網(wǎng)絡(luò )上有大量關(guān)于蒙版的技術(shù)文章，這里有個(gè)快速搜索鏈接，如果你需要的話(huà)。

不要為了減少下載時(shí)間而犧牲質(zhì)量

這里有很多有趣的辦法可以在保持使用texture的同時(shí)也不犧牲下載時(shí)間。但是千萬(wàn)別一味的降低texture的質(zhì)量，因為與其顯示得專(zhuān)業(yè)，慢一點(diǎn)兒不別讓網(wǎng)站剛剛面世就已經(jīng)過(guò)時(shí)。平鋪紋理圖案是個(gè)比較好的辦法去節省下載時(shí)間。

當然，我們還是希望能夠設計出腦袋想要的效果來(lái)，但愿隨著(zhù)全球網(wǎng)絡(luò )速度的提高，下載時(shí)間將會(huì )不再是你考慮的主要問(wèn)題。盡管如此，還是讓你的texture使用理由充足吧，一個(gè)網(wǎng)頁(yè)如果使用過(guò)多的texture仍然會(huì )不可避免的下載緩慢。使用平鋪的小圖案作為背景吧，Tileables已經(jīng)開(kāi)始實(shí)踐，你不妨跟他們學(xué)一學(xué)。另外我們還有CSS Sprites技術(shù)，或者使用雅虎的圖片無(wú)損壓縮Smush來(lái)減少圖片的加載時(shí)間。

淺談網(wǎng)頁(yè)設計中紋理的運用技巧,PS教程,

合理選擇texture

最后，和保證可讀性一樣重要的是，為你的設計選擇合理的texture。如果你是幫助一家家具店做頁(yè)面設計，那種生銹效果的紋理顯然非常不合適。texture是為了營(yíng)造一種特性，而不是迷惑了來(lái)訪(fǎng)者，無(wú)論不管這些texture看起來(lái)有多好看。實(shí)用性永遠應該優(yōu)先考慮。

如何 DIY texture

獲取一個(gè)texture最常用的辦法是自己去制作。而且我們強烈建議你這么做，因為這種方法不僅省時(shí)而且常常會(huì )意想不到的出彩。其實(shí)自己動(dòng)手制作方法十分簡(jiǎn)單。

拍攝照片

最簡(jiǎn)單的辦法就是抓起你的數碼相機去拍你身邊可見(jiàn)各種紋理，特別是那些你從來(lái)未曾考慮過(guò)會(huì )成為紋理的物件。比如，蛋糕的表面或者水池里的泡沫。如果你環(huán)顧四周，原來(lái)你不屑的那些東西也會(huì )是很棒的texture，像倒塌的建筑，水泥墻面，生銹的金屬，樹(shù)皮，風(fēng)化的木質(zhì)等。它們都是超級棒的樣本。而一件普通的數碼相機，或者帶攝像頭的手機就已完全夠用。

在拍攝的時(shí)候，使用自動(dòng)模式，關(guān)掉閃光燈，耐心的照出清晰滿(mǎn)意的紋理效果，然后稍微進(jìn)行下后期處理即可使用。我們人人都可以成為圖片編輯。

掃描儀

另外一個(gè)很好的工具就是掃描儀。(在生活中比較少會(huì )用到，這里省略)

錦上添花

你還可以通過(guò)加工這些原料形成新的texture。在PS中使用圖層混合模式，你可以組合各種各樣的texture制作新的texture，看看 lostandtaken這個(gè)網(wǎng)站，也許不是難事。

信或不信，PS里有很多濾鏡同樣可以制作texture。比如噪點(diǎn)濾鏡，通過(guò)設置噪點(diǎn)值來(lái)獲取一種紋理效果，也許這正是你所需要的。