ps設(shè)計(jì)制作居家風(fēng)格美食Blog網(wǎng)頁(yè)特效(9)

接上篇：PhotoShop設(shè)計(jì)制作居家風(fēng)格美食Blog網(wǎng)頁(yè)效果教程（上）

15.新建一個(gè)圖層:arrow.選擇"自定義圖形工具(U)",在其屬性欄上的圖庫(kù)中選擇"小箭頭",并填充:#c4b08e.最終效果如下圖.

16.在產(chǎn)品展示欄下面創(chuàng)建一個(gè)分隔帶
創(chuàng)建一個(gè)新組:separator.
選擇"矢量線條工具"繪制一條1px;并填充:#d6cdbc,把它放置在圖片下30px的距離.
選擇"矩形選區(qū)工具"繪制一個(gè)矩形選區(qū),接下來:圖層>新建填充圖層>漸變,在彈出的對(duì)話框中選擇從 #a99470 到 透明 漸變.并調(diào)整不透明度:20%.步驟圖如下:

17.選中組:separator.添加一個(gè)圖層蒙版:圖層>圖層蒙版>顯示全部.選擇漸變工具,漸變顏色從黑色到白色再到黑色.按住shift鍵不放,

從左往右拉出漸變.

18.食品簡(jiǎn)介欄
新建一個(gè)組:blog,在這個(gè)組里再創(chuàng)建一個(gè)組:blog#1
新建一個(gè)圖層:image_holder,選擇"矢量矩形工具"按住shift鍵,繪制一個(gè)大小200px*200px的正方形.然后把這個(gè)矩形放到距離"分隔帶"下30px.
雙擊此圖層添加"內(nèi)發(fā)光"樣式,顏色:#f6eee1,描邊顏色:#c9c2b6
打開準(zhǔn)備好的圖片,使用"自由變形"使圖片和像框大小一樣.

19.使用"文字工具",打出所需的文字.標(biāo)題使用:#514d47,內(nèi)容使用:#6a655d.

20.創(chuàng)建"Continue Reading"按扭
新建一個(gè)組:button,再新建一個(gè)圖層:button,選用"矢量圓角矩形"并設(shè)圓角為:4px,繪制一個(gè)大小為：140*26的圓角矩形，并填充：#e5d6bb。

雙擊此圖層添加一個(gè)“描邊”樣式.其顏色:#aca291.
使用"文字工具"設(shè)置字體大小為:14px;輸入"Continue Reading >>",其文字顏色:#847c70.

21.添加blog剩余的部分
復(fù)制組:post #1,接下來使用"移動(dòng)工具"讓兩個(gè)組的間距為:30px.重復(fù)上面的步驟,效果圖如下:

22.創(chuàng)建一個(gè)邊框隔離欄
新建一個(gè)組:sidebar,在這個(gè)組里再新建另一個(gè)組:separator.
新建一個(gè)圖層:1px line;使用"矢量線條工具"繪制一條寬1px;并堅(jiān)靠在"blog主體"右側(cè)邊緣.(圖1)
使用"矩形選區(qū)工具"繪制如(圖2)的矩形選區(qū)出來.
接下選擇:圖層>新建填充圖層>漸變;漸變顏色從#a99470到透明(圖3).最后更改圖層的不透明度:20%.(圖4)
選中組:separator,添加一個(gè)蒙版,步驟如下:圖層>圖層蒙版>顯示全部.在工具箱中選中"漸變工具"其漸變從:黑色到白色到黑色,接下來按住shift鍵不放,

從上而下拉出一個(gè)漸變.(圖5)

23.添加側(cè)邊導(dǎo)航
新建一個(gè)組:popular.
選擇"文字工具(T)"設(shè)置其屬性:字體Myriad Pro Bold Italic;字體大小20px;字體顏色#514d47;接下來輸入文字"Most popular recipes"
打開準(zhǔn)備好的"coffee圖標(biāo)"素材,拖動(dòng)到文檔中.并命名:coffee cup icon
再次設(shè)置文字工具的屬性:字體Myriad Pro Regular ;字體大小13px;字體顏色:#6a655d.
新建一個(gè)組:dots.新建一個(gè)新圖層,接下來使用"矢量隨圓工具"繪制一個(gè)大小5px的正圓,并填充黑色.并移動(dòng)此圓點(diǎn)和文字的距離為:5px.最終效果圖如下:

24.添加余下的例表

25.新建一個(gè)組:flickr.打開一個(gè)"ice cream"的圖標(biāo),并把這個(gè)圖層命名:ice cream icon,并輸入文字:Flickr
新建一個(gè)圖層，使用"矢量矩形工具"繪制一個(gè)大小65*65的矩形,并填充:#f4ede2;接下來雙擊此圖層給這個(gè)矩形添加一個(gè)樣式,在彈出的"圖層樣式"對(duì)話框中選擇:

內(nèi)發(fā)光(內(nèi)發(fā)光顏色:#fdfdfd);描邊顏色:#d7d1c9.
按組合鍵:ctrl+J復(fù)制出8個(gè)矩形.然后使用"移動(dòng)工具"使矩形之間相距:15px.選中這8個(gè)圖層,合并成一個(gè)組:squares.~

26.創(chuàng)建頁(yè)腳信息
新建一個(gè)組:footer,把此組拖到組"content bg"下面.
新建一個(gè)圖層:footer,選用"矢量圓角矩形"并設(shè)其圓角為:6px.繪制出一個(gè)大小為:938*70的圓角矩形.并填充:白色.雙擊此圖層添加圖層樣式:描邊(#a95858).
再選擇"文字工具"設(shè)置字體:Myriad Pro Regula;字體顏色:#ebd5d5;字體大小:13px.

完成最終效果圖！

接上篇：PhotoShop設(shè)計(jì)制作居家風(fēng)格美食Blog網(wǎng)頁(yè)效果教程（上）