Photoshop繪制木質(zhì)紋理的網(wǎng)站首頁模板

在本文中，我將給大家演示如何使用飛濺的筆刷和少量新奇的技術(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)整之后, 背景看起來有點(diǎn)臟. 我們將增加照明效果使其變得明亮. 點(diǎn)擊濾鏡> 渲染> 光照效果. 樣式按鈕保持 默認(rèn) . 下面給出照明設(shè)置:

這里是照明之后的效果:

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

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

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

看起來應(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è)置:

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

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

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

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

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

我們開始裁剪圖片.

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

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

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

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

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

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

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

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

Dowload AD PSD