ps創建常見的網頁風格教程系列一
2022-12-26 11:37:18
來源/作者: /
己有:25人學習過
![[轉載]photoshop創建常見的網頁風格教程系列一 網頁效果圖教程](https://img.lvups.com/d/file/bigpic/2022/12/26/k4fzlph3fvw.jpg)
點擊圖層>圖層蒙版>隱藏所有(保證你選擇的圖層是圖片圖層)。
![[轉載]photoshop創建常見的網頁風格教程系列一 網頁效果圖教程](https://img.lvups.com/d/file/bigpic/2022/12/26/2zenbvygjl2.jpg)
選擇漸變工具,確定是默認顏色設置(前景白色,背景黑色),按照下圖的標記拖拽你的漸變。
![[轉載]photoshop創建常見的網頁風格教程系列一 網頁效果圖教程](https://img.lvups.com/d/file/bigpic/2022/12/26/ad0zqmg3cef.jpg)
我的效果:
![[轉載]photoshop創建常見的網頁風格教程系列一 網頁效果圖教程](https://img.lvups.com/d/file/bigpic/2022/12/26/mq0rfiz2t51.jpg)
好了,添加一些陰影。我用的是橢圓工具,在頭部下面創建一個細長的形狀。
![[轉載]photoshop創建常見的網頁風格教程系列一 網頁效果圖教程](https://img.lvups.com/d/file/bigpic/2022/12/26/rfyeqh5iy44.jpg)
保持這個形狀被選定,我把這個圖層命名為陰影。點擊濾鏡>模糊>高斯模糊。
![[轉載]photoshop創建常見的網頁風格教程系列一 網頁效果圖教程](https://img.lvups.com/d/file/bigpic/2022/12/26/21toeusc15l.jpg)
5.5半徑
![[轉載]photoshop創建常見的網頁風格教程系列一 網頁效果圖教程](https://img.lvups.com/d/file/bigpic/2022/12/26/4jsez5n0ok0.jpg)
好了,我們頭部基本上也完成了。
![[轉載]photoshop創建常見的網頁風格教程系列一 網頁效果圖教程](https://img.lvups.com/d/file/bigpic/2022/12/26/vx4mcirrelk.jpg)
Step 4 – 創建主要內容部分
按照下圖,添加一些文字。采用的是三欄布局。
![[轉載]photoshop創建常見的網頁風格教程系列一 網頁效果圖教程](https://img.lvups.com/d/file/bigpic/2022/12/26/r4grhgbbzrd.jpg)
選擇矩形工具,創建一個形狀。這就是我們的主要內容區域。我的尺寸是935px X 504px。
![[轉載]photoshop創建常見的網頁風格教程系列一 網頁效果圖教程](https://img.lvups.com/d/file/bigpic/2022/12/26/qbxornbtjbc.jpg)
設置圖層樣式如下:
![[轉載]photoshop創建常見的網頁風格教程系列一 網頁效果圖教程](https://img.lvups.com/d/file/bigpic/2022/12/26/e20se0xznjy.jpg)
![[轉載]photoshop創建常見的網頁風格教程系列一 網頁效果圖教程](https://img.lvups.com/d/file/bigpic/2022/12/26/v5c0y0b0ofj.jpg)
我的效果
![[轉載]photoshop創建常見的網頁風格教程系列一 網頁效果圖教程](https://img.lvups.com/d/file/bigpic/2022/12/26/zabwemrdxdp.jpg)
然后在上面和下面添加一些陰影,用橢圓工具和高斯模糊就可以完成了。添加一些分割線。
現在的效果:
![[轉載]photoshop創建常見的網頁風格教程系列一 網頁效果圖教程](https://img.lvups.com/d/file/bigpic/2022/12/26/ua4gnkofk3b.jpg)
好了,添加更多的矢量圖標和文字。這是現在的效果。
![[轉載]photoshop創建常見的網頁風格教程系列一 網頁效果圖教程](https://img.lvups.com/d/file/bigpic/2022/12/26/vssmo14fdy2.jpg)
好了,主要內容部分也完成了
Step 5 – 創建底部內容
底部內容就很容易完成了。放上logo和一些文字就可以了。
最終的效果圖




























