ps設(shè)計(jì)制作居家風(fēng)格美食Blog網(wǎng)頁特效(11)
接下篇:PhotoShop設(shè)計(jì)制作居家風(fēng)格美食Blog網(wǎng)頁效果教程(下)
本教程教我們用PhotoShop設(shè)計(jì)制作一個(gè)美食blog網(wǎng)頁效果。
這個(gè)網(wǎng)頁最大的特色在于,底部使用了桌布的圖案,感覺有點(diǎn)居家的氣氛。再搭配上簡(jiǎn)潔的布局,好似一個(gè)家的感覺。
先看效果圖:
1。新建一個(gè)大小為:1200*1400px的文檔,并填充背影色:#fbe0b1。
再執(zhí)行濾鏡>雜色>添加雜色,設(shè)置數(shù)據(jù)如下圖:
2.創(chuàng)建自定義圖案
按ctrl+N新建一個(gè)大小為:80*80px的文檔.
再次新建一個(gè)圖層,命名:horizontal.選擇"矩形選區(qū)工具"繪制一個(gè)大小為80*40,并填充:#b52a51.設(shè)置不透明度為:20%.
新建一個(gè)圖層命名:vertical,使用"矩形工具"在左邊繪制一個(gè)40*80的圖形,并填充:#b52a51.設(shè)置不透明度為:30%.
新建一個(gè)組,把這兩個(gè)圖層放入進(jìn)去,并命名:pattern.并設(shè)不透明度:30%.
關(guān)閉白色圖層的"睛眼",編輯>自定義圖案.
3.填充自定義圖案
新建一個(gè)圖層命名:patten;并填充白色,更改填充:0%。雙擊這個(gè)圖層,在彈出的"圖層樣式"窗口中選擇"圖案疊加"選擇我們上一步自定義的圖案,
4.頂部導(dǎo)航的制作
新建一個(gè)組"top bar".
新建一個(gè)圖層命名:top bar.選擇"矩形選區(qū)"工具,繪制一個(gè)1200*15并填充#a95858,位置如圖如示.雙擊這個(gè)圖層,給這個(gè)圖層添加一個(gè)"陰影"效果,其陰影:#473e2f.
新建一個(gè)圖層命名:1px line.選取"線條(U)"工具,繪制一個(gè)1px的線條,并填充:#8b4747.把位置放在緊靠矩形的下面.
按ctrl+J復(fù)制線條圖層,選擇"移動(dòng)(V)"工具,位移到上一個(gè)線條的上面.并更改其顏色:#ca7373.
5.新建一個(gè)組"logo",打開一張食物的圖片,并命名此圖層為"ice cream icon" .
使用"文字工具" 設(shè)其顏色:#8d1c39.打上"標(biāo)志文字".雙擊此圖層在彈出的"圖層樣式"設(shè)置(陰影,浮雕,漸變)的數(shù)據(jù)如下圖:
6.新建一個(gè)組"social".
新建一個(gè)圖層:"social bg"使用"圓角矩形工具"繪制一個(gè)260*70大小的形狀,并填充:#a95858.位置放在右邊,雙擊此圖層給其"圖層樣式" ,
數(shù)據(jù)如圖如示.(描邊的顏色:#a95858)
打開所要的圖標(biāo),位置如圖如示:
7.建立主內(nèi)容的背景
新建一個(gè)新的圖層:content bg.選擇"圓角矩形"設(shè)其圓角為6px,制作一個(gè)980*1080大小的矩形.雙擊此圖層給其添加一個(gè)"外發(fā)光".
8.導(dǎo)航條
新建一個(gè)組:navigation,拖動(dòng)此組放置組"content bg"下面.
新建一個(gè)圖層:navigation bar.選擇"圓角矩形"繪制938*70大小的形狀,填充:#a95858.雙擊此圖層,添加圖層樣式(描邊顏色:#9c5151).
9.選擇"文字工具",打出鏈接的文字,填充顏色:#ece2e4.添加"陰影樣式"陰影顏色為:#803a3a.
10.搜索導(dǎo)航條
新建一個(gè)組:search bar.
新建一個(gè)圖層:search bar選擇"直角矩形"繪制一個(gè)200*26大小,填充:#f4f0e2.再給這個(gè)矩形添加1px的描邊,顏色:#925050.
使用"文字工具"打上這幾個(gè)字"Type and hit enter to search",文字顏色:#917a7a.
11.產(chǎn)品展示欄
新建一個(gè)組:image slider,把它放在"content bg"圖層上面.
新建一個(gè)圖層:image_holder,選擇"矩形工具"繪制一個(gè)300*300大小的矩形,并填充:#d6c8af.雙擊圖層給其添加一個(gè)"內(nèi)陰影"的樣式.
(陰影顏色:#f1eadf;描邊顏色:#d6cdbc).
ctrl+J復(fù)制這個(gè)圖層,然后選擇"移動(dòng)工具",按ctrl+T自由變換20px大小的距離.
12.打開一張食物的圖片,使用"移動(dòng)工具"移動(dòng)到文檔中,為了使圖片放置在"展示欄"的相框中,我們使用了"矢量蒙版".具體的操作步驟如下:
右擊"食物圖片"的圖層,選擇"矢量蒙版".(也要以按住ALT鍵不放,光標(biāo)移動(dòng)到兩個(gè)圖層之間的縫隙點(diǎn)擊一下)
13.創(chuàng)建兩個(gè)切換的按扭
新建一個(gè)組:right arrow.
新建一個(gè)圖層:circle,選擇"矢量圓形(U)",按住shift鍵不放,繪制一個(gè)60*60大小的正圓,填充:白色.其位置放在"產(chǎn)品展示欄"的右側(cè).
并給這個(gè)圖層添加一個(gè)"外發(fā)光"的圖層樣式.
14.新建一個(gè)圖層,按住鍵盤上的ctrl鍵,選擇此圖層和"circle" 圖層,右擊菜單中選擇"合并圖層".(做此步驟是為了下面切割圓時(shí),左邊的外發(fā)光不會(huì)出現(xiàn)),
這時(shí)候選擇"矩形選區(qū)"切掉左邊的半圓,如下圖所示.
- 相關(guān)教程
- TA的教程
- 收藏
- 返回
- 木設(shè)計(jì) 譯
學(xué)習(xí) · 提示
相關(guān)教程
- 網(wǎng)頁模版,個(gè)人網(wǎng)站建設(shè)入門知識(shí)
- 網(wǎng)頁模板,設(shè)計(jì)酒吧主題網(wǎng)頁模板實(shí)例
- ps設(shè)計(jì)藍(lán)色主題風(fēng)格的網(wǎng)站首頁模板教程
- 從零手把手教你設(shè)計(jì)網(wǎng)頁
- ps cs6設(shè)計(jì)時(shí)尚促銷專題頁教程
- 網(wǎng)頁設(shè)計(jì)基礎(chǔ)技巧
- ps切片工具怎么用
- 網(wǎng)頁設(shè)計(jì)的分割布局秘密
- ps cs6設(shè)計(jì)個(gè)人作品網(wǎng)頁模板教程
- ps設(shè)計(jì)網(wǎng)頁視頻游戲界面
推薦教程
- 用ps設(shè)計(jì)一個(gè)個(gè)人網(wǎng)站模板
- Photoshop打造超酷春天背景網(wǎng)頁布局
- Photoshop設(shè)計(jì)制作百度空間的模板
- Photoshop做個(gè)人主頁教程
- PS設(shè)計(jì)教程之制作WordPress新聞博客模
- photoshop制作960 Grid System的網(wǎng)頁模板
- ps cs6設(shè)計(jì)時(shí)尚促銷專題頁教程
- PS簡(jiǎn)潔網(wǎng)頁美工教程
- 網(wǎng)頁設(shè)計(jì)時(shí)的配色方案分析實(shí)例
- Photoshop美工教程:游戲網(wǎng)站首頁布局