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

預(yù)覽

先看最終結(jié)果

所需要的素材

1. 木質(zhì)素材

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

3. 飛濺筆刷

4. 網(wǎng)點圖案

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

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

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

這里是照明之后的效果:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

我們開始裁剪圖片.

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

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

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

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

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

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

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

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

Dowload AD PSD