ps一個(gè)木紋風(fēng)格網(wǎng)頁模板(5)

來源:未知 作者:PS學(xué)堂 學(xué)習(xí):11333人次

先來看下效果圖:

Photoshop設(shè)計(jì)國外木紋風(fēng)格的網(wǎng)頁模板,PS教程,16xx8.com教程網(wǎng)

素材包:http://pan.baidu.com/share/link?shareid=101222&uk=755000821

1.新建一個(gè)12X12 PX的白色畫布。用黑色1px大小的鉛筆做出如圖效果,然后 編輯--自定義圖案

Photoshop設(shè)計(jì)國外木紋風(fēng)格的網(wǎng)頁模板,PS教程,16xx8.com教程網(wǎng)

2.新建一個(gè)700X800 px的畫布,填充#282828.然后新建一層,填充白色,混合模式設(shè)置為正片疊底,直線濾鏡--雜色--添加雜色

Photoshop設(shè)計(jì)國外木紋風(fēng)格的網(wǎng)頁模板,PS教程,16xx8.com教程網(wǎng)

Photoshop設(shè)計(jì)國外木紋風(fēng)格的網(wǎng)頁模板,PS教程,16xx8.com教程網(wǎng)

3.用圓角矩形工具,圓角半徑設(shè)置為15px,畫出如圖大小的圓角矩形

Photoshop設(shè)計(jì)國外木紋風(fēng)格的網(wǎng)頁模板,PS教程,16xx8.com教程網(wǎng)

4.將木板紋理素材拉進(jìn)PS里面,對圓角矩形做剪切蒙板,alt+ctrl+G,調(diào)整好大小和位置

Photoshop設(shè)計(jì)國外木紋風(fēng)格的網(wǎng)頁模板,PS教程,16xx8.com教程網(wǎng)

Photoshop設(shè)計(jì)國外木紋風(fēng)格的網(wǎng)頁模板,PS教程,16xx8.com教程網(wǎng)

5.給木板紋理添加一些圖層樣式

Photoshop設(shè)計(jì)國外木紋風(fēng)格的網(wǎng)頁模板,PS教程,16xx8.com教程網(wǎng)

Photoshop設(shè)計(jì)國外木紋風(fēng)格的網(wǎng)頁模板,PS教程,16xx8.com教程網(wǎng)

 

6.繼續(xù)用圓角矩形工具創(chuàng)建一個(gè)小一點(diǎn)的圓角矩形,如圖,模式改成正片疊底,然后傻un國際,給這個(gè)圖層添加圖層樣式

Photoshop設(shè)計(jì)國外木紋風(fēng)格的網(wǎng)頁模板,PS教程,16xx8.com教程網(wǎng)

Photoshop設(shè)計(jì)國外木紋風(fēng)格的網(wǎng)頁模板,PS教程,16xx8.com教程網(wǎng)

Photoshop設(shè)計(jì)國外木紋風(fēng)格的網(wǎng)頁模板,PS教程,16xx8.com教程網(wǎng)

Photoshop設(shè)計(jì)國外木紋風(fēng)格的網(wǎng)頁模板,PS教程,16xx8.com教程網(wǎng)

7.新建一層,調(diào)出圓角矩形1的選區(qū),用柔焦的筆刷,前景色設(shè)置為白色,在左下角點(diǎn)下,筆刷稍微大一點(diǎn),然后選擇矩形選框工具,注意一定要切換到矩形選框工具,然后方向鍵向上移動(dòng),然后刪除選框內(nèi)的內(nèi)容,如圖效果,最后將此圖層混合模式設(shè)置為柔光

Photoshop設(shè)計(jì)國外木紋風(fēng)格的網(wǎng)頁模板,PS教程,16xx8.com教程網(wǎng)

Photoshop設(shè)計(jì)國外木紋風(fēng)格的網(wǎng)頁模板,PS教程,16xx8.com教程網(wǎng)

8.通用的方法,新建一層,調(diào)出圓角矩形1的選區(qū),用黑色的柔焦筆刷,做出如圖效果,切換到矩形選框工具,用方向鍵向上移動(dòng)選框,然后刪除選框的內(nèi)容,將此圖層混合模式改成柔光

Photoshop設(shè)計(jì)國外木紋風(fēng)格的網(wǎng)頁模板,PS教程,16xx8.com教程網(wǎng)

Photoshop設(shè)計(jì)國外木紋風(fēng)格的網(wǎng)頁模板,PS教程,16xx8.com教程網(wǎng)

效果如圖:

Photoshop設(shè)計(jì)國外木紋風(fēng)格的網(wǎng)頁模板,PS教程,16xx8.com教程網(wǎng)

9.用矩形工具,前景色設(shè)置為#eeeadc,做一個(gè)矩形,大小和位置如圖,然后給此矩形添加圖層樣式

Photoshop設(shè)計(jì)國外木紋風(fēng)格的網(wǎng)頁模板,PS教程,16xx8.com教程網(wǎng)

Photoshop設(shè)計(jì)國外木紋風(fēng)格的網(wǎng)頁模板,PS教程,16xx8.com教程網(wǎng)

 

10.現(xiàn)在開始做內(nèi)容部分,用素材包里面的字體,當(dāng)然你也可以用其他的,打上如圖的文字,你可以對Email做和我一樣的藍(lán)色到黑色的漸變,當(dāng)然也可以直接用藍(lán)色,這里就不多說了。

Photoshop設(shè)計(jì)國外木紋風(fēng)格的網(wǎng)頁模板,PS教程,16xx8.com教程網(wǎng)

用了下面兩種字體:

Photoshop設(shè)計(jì)國外木紋風(fēng)格的網(wǎng)頁模板,PS教程,16xx8.com教程網(wǎng)

Photoshop設(shè)計(jì)國外木紋風(fēng)格的網(wǎng)頁模板,PS教程,16xx8.com教程網(wǎng)

11.接下來做產(chǎn)品展示部分,用矩形工具,前景色設(shè)置白色,拉一個(gè)適當(dāng)大小的矩形,設(shè)置圖層樣式,然后將產(chǎn)品圖拖進(jìn)來,對矩形做剪切蒙板

Photoshop設(shè)計(jì)國外木紋風(fēng)格的網(wǎng)頁模板,PS教程,16xx8.com教程網(wǎng)

Photoshop設(shè)計(jì)國外木紋風(fēng)格的網(wǎng)頁模板,PS教程,16xx8.com教程網(wǎng)

Photoshop設(shè)計(jì)國外木紋風(fēng)格的網(wǎng)頁模板,PS教程,16xx8.com教程網(wǎng)

Photoshop設(shè)計(jì)國外木紋風(fēng)格的網(wǎng)頁模板,PS教程,16xx8.com教程網(wǎng)

12.將矩形復(fù)制一層,然后旋轉(zhuǎn)一定的角度

Photoshop設(shè)計(jì)國外木紋風(fēng)格的網(wǎng)頁模板,PS教程,16xx8.com教程網(wǎng)

13.用Jenna Sue 字體和 Hand Drawn Arrow筆刷,將前景色設(shè)置為#929292,打上 Our New Product字樣和刷上箭頭,改變圖層的不透明度,自己調(diào),適合就行了。

Photoshop設(shè)計(jì)國外木紋風(fēng)格的網(wǎng)頁模板,PS教程,16xx8.com教程網(wǎng)

14.用鋼筆工具,選擇形狀模式,勾出如圖形狀,顏色設(shè)置為#16a5da,添加圖層樣式

Photoshop設(shè)計(jì)國外木紋風(fēng)格的網(wǎng)頁模板,PS教程,16xx8.com教程網(wǎng)

Photoshop設(shè)計(jì)國外木紋風(fēng)格的網(wǎng)頁模板,PS教程,16xx8.com教程網(wǎng)

Photoshop設(shè)計(jì)國外木紋風(fēng)格的網(wǎng)頁模板,PS教程,16xx8.com教程網(wǎng)

 

15.用Happy Phantom打上VOLUME 4字樣,然后將它旋轉(zhuǎn)到適合的角度,添加圖層樣式

Photoshop設(shè)計(jì)國外木紋風(fēng)格的網(wǎng)頁模板,PS教程,16xx8.com教程網(wǎng)

Photoshop設(shè)計(jì)國外木紋風(fēng)格的網(wǎng)頁模板,PS教程,16xx8.com教程網(wǎng)

16.在次圖層下面,用鋼筆工具勾出折角,顏色設(shè)置為#004a65,圖層樣式用第14步的

Photoshop設(shè)計(jì)國外木紋風(fēng)格的網(wǎng)頁模板,PS教程,16xx8.com教程網(wǎng)

Photoshop設(shè)計(jì)國外木紋風(fēng)格的網(wǎng)頁模板,PS教程,16xx8.com教程網(wǎng)

17.用橢圓工具,前景色設(shè)置為#cb9460,畫一個(gè)正圓,大小如圖,然后添加圖層樣式,然后復(fù)制一個(gè),位置放置在中間

Photoshop設(shè)計(jì)國外木紋風(fēng)格的網(wǎng)頁模板,PS教程,16xx8.com教程網(wǎng)

Photoshop設(shè)計(jì)國外木紋風(fēng)格的網(wǎng)頁模板,PS教程,16xx8.com教程網(wǎng)

Photoshop設(shè)計(jì)國外木紋風(fēng)格的網(wǎng)頁模板,PS教程,16xx8.com教程網(wǎng)

Photoshop設(shè)計(jì)國外木紋風(fēng)格的網(wǎng)頁模板,PS教程,16xx8.com教程網(wǎng)

18.用圓角矩形工具,拉一個(gè)圓角矩形,添加圖層樣式,然后復(fù)制一層,拉到另一個(gè)圓形上面,形成對稱

Photoshop設(shè)計(jì)國外木紋風(fēng)格的網(wǎng)頁模板,PS教程,16xx8.com教程網(wǎng)

19.接下來做分割線,分割線的制作方法有很多,你可以看我的效果圖,取色,然后用1px的鉛筆制作如圖的三條。

Photoshop設(shè)計(jì)國外木紋風(fēng)格的網(wǎng)頁模板,PS教程,16xx8.com教程網(wǎng)

20.然后用硬度為0%的橡皮擦工具,在分割線的兩頭進(jìn)行擦除

Photoshop設(shè)計(jì)國外木紋風(fēng)格的網(wǎng)頁模板,PS教程,16xx8.com教程網(wǎng)

21.前景色設(shè)置為505050,打上“Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lobortis dui non odio lacinia adipiscing. Donec at dolor ac justo dignissim feugiat quis ut lectus. Donec lacinia imperdiet est, sit amet bibendum eros malesuada et. Donec faucibus congue nibh et imperdiet. ”這段話,也是郵件的介紹說明文字

Photoshop設(shè)計(jì)國外木紋風(fēng)格的網(wǎng)頁模板,PS教程,16xx8.com教程網(wǎng)

22.前景色設(shè)置為#16a5da,選擇圓角矩形工具,圓角半徑設(shè)置為5px,做一個(gè)點(diǎn)擊按鈕,用Happy Phantom字體打上Read Me字樣,然后添加圖層樣式

Photoshop設(shè)計(jì)國外木紋風(fēng)格的網(wǎng)頁模板,PS教程,16xx8.com教程網(wǎng)

Photoshop設(shè)計(jì)國外木紋風(fēng)格的網(wǎng)頁模板,PS教程,16xx8.com教程網(wǎng)

Photoshop設(shè)計(jì)國外木紋風(fēng)格的網(wǎng)頁模板,PS教程,16xx8.com教程網(wǎng)

Photoshop設(shè)計(jì)國外木紋風(fēng)格的網(wǎng)頁模板,PS教程,16xx8.com教程網(wǎng)

 

23.用矩形工具,新建一個(gè)236X112 px大小的矩形,顏色設(shè)置為#1495c5,添加圖層樣式

Photoshop設(shè)計(jì)國外木紋風(fēng)格的網(wǎng)頁模板,PS教程,16xx8.com教程網(wǎng)

24.在此圖層下面新建一個(gè)黑色的矩形,旋轉(zhuǎn)到一定的角度

Photoshop設(shè)計(jì)國外木紋風(fēng)格的網(wǎng)頁模板,PS教程,16xx8.com教程網(wǎng)

25.執(zhí)行 濾鏡--模糊--高斯模糊

Photoshop設(shè)計(jì)國外木紋風(fēng)格的網(wǎng)頁模板,PS教程,16xx8.com教程網(wǎng)

Photoshop設(shè)計(jì)國外木紋風(fēng)格的網(wǎng)頁模板,PS教程,16xx8.com教程網(wǎng)

26.移動(dòng)到合適的位置,不透明度設(shè)置為33%,然后復(fù)制一層,ctrl+T,右鍵,水平翻轉(zhuǎn),然后拉到合適的位置,最后效果如圖,讓人感覺有立體感

Photoshop設(shè)計(jì)國外木紋風(fēng)格的網(wǎng)頁模板,PS教程,16xx8.com教程網(wǎng)

27.選擇矩形工具,拉一個(gè)適當(dāng)?shù)恼叫危瑘D層樣式設(shè)置如下,拉入圖片,做剪切蒙板

Photoshop設(shè)計(jì)國外木紋風(fēng)格的網(wǎng)頁模板,PS教程,16xx8.com教程網(wǎng)

Photoshop設(shè)計(jì)國外木紋風(fēng)格的網(wǎng)頁模板,PS教程,16xx8.com教程網(wǎng)

28.在正方形下面新建一個(gè)白色的長方形,不透明度設(shè)置為15%

Photoshop設(shè)計(jì)國外木紋風(fēng)格的網(wǎng)頁模板,PS教程,16xx8.com教程網(wǎng)

29.然后給產(chǎn)品添加產(chǎn)品名稱和價(jià)格信息,然后添加立即購買按鈕,Product Name和$10.99是用Happy Phantom字體,下面的那行小字“ Integer ut purus elit. Maecenas diam tortor, tempor ut gravida eget, eleifend laoreet ligula.”和“Buy Now”此部分字體為Arial,是系統(tǒng)自帶的。

Photoshop設(shè)計(jì)國外木紋風(fēng)格的網(wǎng)頁模板,PS教程,16xx8.com教程網(wǎng)

Photoshop設(shè)計(jì)國外木紋風(fēng)格的網(wǎng)頁模板,PS教程,16xx8.com教程網(wǎng)

30.將上訴的小產(chǎn)品價(jià)格標(biāo)簽合并到一個(gè)組,然后復(fù)制3個(gè),擺好位置,在左下角和右下角增加一些版權(quán)信息和分享按鈕,就完成了一封郵件的設(shè)計(jì)了。

Photoshop設(shè)計(jì)國外木紋風(fēng)格的網(wǎng)頁模板,PS教程,16xx8.com教程網(wǎng)

 

學(xué)習(xí) · 提示

  • 一定要打開PS,跟著教程做一遍,做完的圖到這交作業(yè):提交作業(yè)
  • 建議練習(xí)時(shí),大家自己找素材,盡量不要用教程提供的素材。
  • 教程有看不懂的地方,可以到論壇發(fā)帖提問:新手求助
  • 加官方微信,隨時(shí)隨地,想學(xué)就能學(xué):ps_bbs,或掃右側(cè)二維碼!
  • 關(guān)注我們學(xué)更多,每天都有新教程:新浪微博 抖音視頻 微信小程序
- 發(fā)評論 | 交作業(yè) -
最新評論
暫無評論,交個(gè)作業(yè)支持一下吧~

關(guān)注大神微博加入>>

網(wǎng)友求助,請回答!