在本文中，我將給大家演示如何使用飛濺的筆刷和少量新奇的技術(shù)制作一個(gè)木質(zhì)背景的網(wǎng)站. 你可以定制為公司或者自己的網(wǎng)站. 另外, 還提供PSD 模板下載.

預(yù)覽

先看最終結(jié)果

所需要的素材

1. 木質(zhì)素材

2. 郵件與電話圖標(biāo)

3. 飛濺筆刷

4. 網(wǎng)點(diǎn)圖案

在本教程我們將需要用到960網(wǎng)格系統(tǒng). 接著打開PSD模板然后置入木質(zhì)背景.我們先調(diào)整背景圖片的顏色設(shè)置. 點(diǎn)擊圖形 >調(diào)整 >色階 和圖像> 調(diào)整>曲線. 現(xiàn)在是色階和曲線的設(shè)置：

當(dāng)然你可以根據(jù)個(gè)人喜好進(jìn)行調(diào)整.下面是背景調(diào)整之后的樣子:

經(jīng)過一番調(diào)整之后, 背景看起來(lái)有點(diǎn)臟.我們將增加照明效果使其變得明亮. 點(diǎn)擊濾鏡> 渲染> 光照效果.樣式按鈕保持默認(rèn) . 下面給出照明設(shè)置:

這里是照明之后的效果:

在木質(zhì)背景的兩個(gè)增加輕微的漸變，顏色值為#71644a . 理由是，如果你將該布局進(jìn)行網(wǎng)頁(yè)編碼, 背景才不至于在一個(gè)大的顯示器上看起來(lái)笨拙.

現(xiàn)在我們開始制作LOGO. 這里給出顏色編碼#afc05b.使用如下筆刷畫出LOGO背景.

不用擔(dān)心多余的飛濺. 你可以用橡皮工具輕松擦除. 使用相同的筆刷擴(kuò)展到整個(gè)LOGO背景.

看起來(lái)應(yīng)該是這樣:

使用5px 的柔性筆刷填滿我們需要的區(qū)域擦除多余的污點(diǎn).LOGO部分我使用Cooper Std 字體.

現(xiàn)在，我們開始首先制作內(nèi)容區(qū)域和目錄按鈕，內(nèi)容區(qū)域的寬與高為820 x 546 像素增加1% 的雜色，按照濾鏡 >雜色 > 增加雜色> . 在網(wǎng)格看到的模樣.

接著我們?cè)黾?strong>圖案疊加和描邊 為內(nèi)容增添深度. 以下是設(shè)置:

現(xiàn)在創(chuàng)建目錄按鈕.按鈕和內(nèi)容我使用 Rockwell Font 字體.背景填充黑色，將透明度改為 60%. 而且, 將內(nèi)容區(qū)域的樣式復(fù)制粘貼到按鈕的背景.

我們將增加一個(gè)旋轉(zhuǎn)的圖片/幻燈片區(qū)域. 導(dǎo)入任何圖片粘貼進(jìn)左邊的內(nèi)容部分. 我的是335 x 225像素. 接著增加陰影和描邊 樣式. 下面是設(shè)置:

看起來(lái)應(yīng)該是這樣的:

增加角落投影使圖片看起來(lái)有3d效果. 如下使用鋼筆工具創(chuàng)建小三角形:

右擊描邊路徑. 黑色填充.

增加高斯模糊填充區(qū)域. 模糊半徑4-6 像素. 看哪個(gè)參數(shù)好.下面是我的結(jié)果:

使用圓角矩形工具在新圖層畫出矩形. 在路徑面板 填充圖形.增加漸變效果 . 從上到下拉出漸變.

我們開始裁剪圖片.

再一次畫出選區(qū)并且刪減.移動(dòng)圖層到內(nèi)容區(qū)域的邊上并且增加文字和圖標(biāo).

增加其余必要的文字元素, 標(biāo)題相當(dāng)簡(jiǎn)潔然后增加說(shuō)明型文字. 沒有任何特別的技巧.

只有一件事特殊那就是“Testimonial” 文字增加陰影，顏色為#695a28. 下面是設(shè)置:

現(xiàn)在輪到頁(yè)腳部分. 大多數(shù)流程與頁(yè)頭一樣, 只是使用了不同的筆刷.

現(xiàn)在重復(fù)同樣的步驟使用第三種筆刷擦除多余的污點(diǎn)使飛濺的圖形看起來(lái)盡可能的漂亮.

增加附加的文字復(fù)制同意的背景到另一個(gè)標(biāo)題.

完成了! 終于到了教程的結(jié)尾，回過頭看看我們最終的結(jié)果.

你可以下載PSD模板. 它包含元素文件. 你可以自由編輯使用.

Dowload AD PSD