日韩小视频-日韩久久一区二区三区-日韩久久一级毛片-日韩久久久精品中文字幕-国产精品亚洲精品影院-国产精品亚洲欧美云霸高清

下載吧 - 綠色安全的游戲和軟件下載中心

軟件下載吧

當前位置:軟件下載吧 > 圖形圖象 > PHOTOSHOP > ps設計制作居家風格美食Blog網頁特效

ps設計制作居家風格美食Blog網頁特效

時間:2024-02-20 10:30作者:下載吧人氣:31

接下篇:PhotoShop設計制作居家風格美食Blog網頁效果教程(下)

本教程教我們用PhotoShop設計制作一個美食blog網頁效果。

這個網頁最大的特色在于,底部使用了桌布的圖案,感覺有點居家的氣氛。再搭配上簡潔的布局,好似一個家的感覺。

先看效果圖:

ps設計制作居家風格美食Blog網頁特效

1。新建一個大小為:1200*1400px的文檔,并填充背影色:#fbe0b1。
再執行濾鏡>雜色>添加雜色,設置數據如下圖:

ps設計制作居家風格美食Blog網頁特效

2.創建自定義圖案
按ctrl+N新建一個大小為:80*80px的文檔.
再次新建一個圖層,命名:horizontal.選擇"矩形選區工具"繪制一個大小為80*40,并填充:#b52a51.設置不透明度為:20%.

新建一個圖層命名:vertical,使用"矩形工具"在左邊繪制一個40*80的圖形,并填充:#b52a51.設置不透明度為:30%.

新建一個組,把這兩個圖層放入進去,并命名:pattern.并設不透明度:30%.

關閉白色圖層的"睛眼",編輯>自定義圖案.

ps設計制作居家風格美食Blog網頁特效

3.填充自定義圖案
新建一個圖層命名:patten;并填充白色,更改填充:0%。雙擊這個圖層,在彈出的"圖層樣式"窗口中選擇"圖案疊加"選擇我們上一步自定義的圖案,

ps設計制作居家風格美食Blog網頁特效

4.頂部導航的制作
新建一個組"top bar".
新建一個圖層命名:top bar.選擇"矩形選區"工具,繪制一個1200*15并填充#a95858,位置如圖如示.雙擊這個圖層,給這個圖層添加一個"陰影"效果,其陰影:#473e2f.

新建一個圖層命名:1px line.選取"線條(U)"工具,繪制一個1px的線條,并填充:#8b4747.把位置放在緊靠矩形的下面.

按ctrl+J復制線條圖層,選擇"移動(V)"工具,位移到上一個線條的上面.并更改其顏色:#ca7373.

ps設計制作居家風格美食Blog網頁特效

5.新建一個組"logo",打開一張食物的圖片,并命名此圖層為"ice cream icon" .
使用"文字工具" 設其顏色:#8d1c39.打上"標志文字".雙擊此圖層在彈出的"圖層樣式"設置(陰影,浮雕,漸變)的數據如下圖:

ps設計制作居家風格美食Blog網頁特效

6.新建一個組"social".
新建一個圖層:"social bg"使用"圓角矩形工具"繪制一個260*70大小的形狀,并填充:#a95858.位置放在右邊,雙擊此圖層給其"圖層樣式" ,

數據如圖如示.(描邊的顏色:#a95858)
打開所要的圖標,位置如圖如示:

ps設計制作居家風格美食Blog網頁特效

7.建立主內容的背景
新建一個新的圖層:content bg.選擇"圓角矩形"設其圓角為6px,制作一個980*1080大小的矩形.雙擊此圖層給其添加一個"外發光".

ps設計制作居家風格美食Blog網頁特效

8.導航條
新建一個組:navigation,拖動此組放置組"content bg"下面.
新建一個圖層:navigation bar.選擇"圓角矩形"繪制938*70大小的形狀,填充:#a95858.雙擊此圖層,添加圖層樣式(描邊顏色:#9c5151).

ps設計制作居家風格美食Blog網頁特效

9.選擇"文字工具",打出鏈接的文字,填充顏色:#ece2e4.添加"陰影樣式"陰影顏色為:#803a3a.

ps設計制作居家風格美食Blog網頁特效

10.搜索導航條
新建一個組:search bar.
新建一個圖層:search bar選擇"直角矩形"繪制一個200*26大小,填充:#f4f0e2.再給這個矩形添加1px的描邊,顏色:#925050.
使用"文字工具"打上這幾個字"Type and hit enter to search",文字顏色:#917a7a.

ps設計制作居家風格美食Blog網頁特效

11.產品展示欄

新建一個組:image slider,把它放在"content bg"圖層上面.
新建一個圖層:image_holder,選擇"矩形工具"繪制一個300*300大小的矩形,并填充:#d6c8af.雙擊圖層給其添加一個"內陰影"的樣式.

(陰影顏色:#f1eadf;描邊顏色:#d6cdbc).

ctrl+J復制這個圖層,然后選擇"移動工具",按ctrl+T自由變換20px大小的距離.

ps設計制作居家風格美食Blog網頁特效

12.打開一張食物的圖片,使用"移動工具"移動到文檔中,為了使圖片放置在"展示欄"的相框中,我們使用了"矢量蒙版".具體的操作步驟如下:
右擊"食物圖片"的圖層,選擇"矢量蒙版".(也要以按住ALT鍵不放,光標移動到兩個圖層之間的縫隙點擊一下)

ps設計制作居家風格美食Blog網頁特效

13.創建兩個切換的按扭
新建一個組:right arrow.
新建一個圖層:circle,選擇"矢量圓形(U)",按住shift鍵不放,繪制一個60*60大小的正圓,填充:白色.其位置放在"產品展示欄"的右側.

并給這個圖層添加一個"外發光"的圖層樣式.

ps設計制作居家風格美食Blog網頁特效

14.新建一個圖層,按住鍵盤上的ctrl鍵,選擇此圖層和"circle" 圖層,右擊菜單中選擇"合并圖層".(做此步驟是為了下面切割圓時,左邊的外發光不會出現),

這時候選擇"矩形選區"切掉左邊的半圓,如下圖所示.

ps設計制作居家風格美食Blog網頁特效

接下篇:PhotoShop設計制作居家風格美食Blog網頁效果教程(下)

標簽網頁,效果,教程,Blog,美食,設計制作,居家,風格,Ph

相關下載

查看所有評論+

網友評論

網友
您的評論需要經過審核才能顯示

公眾號

主站蜘蛛池模板: 最近最新中文字幕免费的一页 | 成人毛片一区二区三区 | 日韩欧美一级 | 国产精品爱久久久久久久 | 免费国产成人午夜在线观看 | 国产亚洲综合成人91精品 | 亚洲美女视频免费 | 美女视频黄a视频美女大全 美女视频黄a视频免费全程 | 久久厕所视频 | 免费的成人a视频在线观看 免费的毛片 | 国产日韩欧美综合一区二区三区 | 特黄a大片免费视频 | 亚洲欧美精品网站在线观看 | 欧美一级美片在线观看免费 | 成人久久 | 国内精品2020情侣视频 | 在线观看免费视频网站色 | 亚洲欧美另类视频 | 国产美女精品一区二区三区 | 欧美a极品极品欧美 | 日本道综合一本久久久88 | 91精品视品在线播放 | 国产一国产一有一级毛片 | 免费国产成人高清视频网站 | 欧美一区二区三区日韩免费播 | 亚洲三级视频在线观看 | 成年人免费大片 | 国产肥老妇视频一 | 亚洲 欧美 日韩 丝袜 另类 | 国产精品日本不卡一区二区 | 国产精品99久久99久久久看片 | 国产一级高清 | 国产成人lu在线视频 | 毛色毛片| 成人欧美在线 | 国产上床视频 | 日韩a级| 韩国三级日本三级香港三级黄 | 91精品国产一区二区三区四区 | 国产精品二区页在线播放 | 国内精品久久久久久中文字幕 |