ps創建常見的網頁風格教程系列一
作者:maimai
最終效果圖

好了,讓我們開始吧。打開photoshop創建一個新文檔,尺寸是1020px X 1240px,背景顏色設置為#e6e9d4。
![[轉載]photoshop創建常見的網頁風格教程系列一 網頁效果圖教程](https://img.lvups.com/d/file/bigpic/2022/12/26/s0jz3qffgii.jpg)
用矩形工具,創建一個形狀,顏色 #bbc19c。我的形狀尺寸是 1020px X 327px
![[轉載]photoshop創建常見的網頁風格教程系列一](https://img.lvups.com/d/file/bigpic/2022/12/26/c4e32x30mwd.jpg)
好了,添加一個圖層蒙版(保證你的圖層是被選中狀態)。
![[轉載]photoshop創建常見的網頁風格教程系列一](https://img.lvups.com/d/file/bigpic/2022/12/26/1i2oc5era32.jpg)
然后確定你選擇中了蒙版。
![[轉載]photoshop創建常見的網頁風格教程系列一 網頁效果圖教程](https://img.lvups.com/d/file/bigpic/2022/12/26/dfrvzyizfiv.jpg)
選擇漸變工具,保持默認顏色(黑色為前景色,白色為背景色),你可以簡單的點擊工具欄上面的小圖標快速設置。
![[轉載]photoshop創建常見的網頁風格教程系列一](https://img.lvups.com/d/file/bigpic/2022/12/26/hevsrsefr3h.jpg)
按照下圖拖拽你的鼠標。
![[轉載]photoshop創建常見的網頁風格教程系列一 網頁效果圖教程](https://img.lvups.com/d/file/bigpic/2022/12/26/vbcox4z1a0o.jpg)
好了,我的效果是這個樣子的。
![[轉載]photoshop創建常見的網頁風格教程系列一 網頁效果圖教程](https://img.lvups.com/d/file/bigpic/2022/12/26/03ru2ig2gdd.jpg)
Step 1 – 創建logo和頭部導航
選擇矩形工具,在文件頂部畫出一個小的形狀。
![[轉載]photoshop創建常見的網頁風格教程系列一 網頁效果圖教程](https://img.lvups.com/d/file/bigpic/2022/12/26/xs40ctmuwq5.jpg)
設置圖層樣式如下:
![[轉載]photoshop創建常見的網頁風格教程系列一 網頁效果圖教程](https://img.lvups.com/d/file/bigpic/2022/12/26/x2d3g22stqg.jpg)
![[轉載]photoshop創建常見的網頁風格教程系列一 網頁效果圖教程](https://img.lvups.com/d/file/bigpic/2022/12/26/oqwrqqyrbij.jpg)
我的效果:
![[轉載]photoshop創建常見的網頁風格教程系列一 網頁效果圖教程](https://img.lvups.com/d/file/bigpic/2022/12/26/ksweld1kslq.jpg)
在右邊的部分,用文字工具,創建導航文字。我一般用的是字體“Helvetica” 。
![[轉載]photoshop創建常見的網頁風格教程系列一 網頁效果圖教程](https://img.lvups.com/d/file/bigpic/2022/12/26/bn5t3vncume.jpg)
接下來,用直線工具,創建一些導航上面的分割線。設置寬度為1px,在文字中間畫一些小的形狀。
![[轉載]photoshop創建常見的網頁風格教程系列一 網頁效果圖教程](https://img.lvups.com/d/file/bigpic/2022/12/26/015ub3pyq4z.jpg)
![[轉載]photoshop創建常見的網頁風格教程系列一 網頁效果圖教程](https://img.lvups.com/d/file/bigpic/2022/12/26/b51qduj3xeo.jpg)
然后按照下圖進行圖層樣式設置:
![[轉載]photoshop創建常見的網頁風格教程系列一 網頁效果圖教程](https://img.lvups.com/d/file/bigpic/2022/12/26/ktdbhlmqhqn.jpg)
![[轉載]photoshop創建常見的網頁風格教程系列一 網頁效果圖教程](https://img.lvups.com/d/file/bigpic/2022/12/26/fjlsdsua3la.jpg)
我的效果:
![[轉載]photoshop創建常見的網頁風格教程系列一](https://img.lvups.com/d/file/bigpic/2022/12/26/ozcurplivnw.jpg)
好了,接下來創建logo。用矩形工具,創建一個類似的矩形,填充顏色#9cc1a2
![[轉載]photoshop創建常見的網頁風格教程系列一 網頁效果圖教程](https://img.lvups.com/d/file/bigpic/2022/12/26/oqv5pv5subn.jpg)



























