Facebook加入
LINE加入
2021/12/25
Photoshop製作清爽綠色風格網頁模板
這一次的教學是屬於PS教程領域中的設計教程的相關教學。
文章出處是來自PSDTemplate的PS教程類文章，寫教學的作者是站碼翻譯，感謝站碼翻譯提供設計教程的實作教學。
教學大綱:
本教程主要用Photoshop來設計一張綠色調風格網頁模板,網頁美工設計的朋友可以一起來觀賞學習,模板的製作的重點在於網站的板式搭配和顏色的搭配.
設計教程教學開始
本教程主要用Photoshop來設計一張綠色調風格網頁模板,網頁美工設計的朋友可以一起來觀賞學習,模板的製作的重點在於網站的板式搭配和顏色的搭配.下面讓我們一起來學習吧.
PS：翻譯作者要求，如需轉載，請勿打各站水印，希望尊重原創
先看看完整的網頁布局效果：
現在我們開始教程。
01。創建一個1020px X 1060px的文件。
02。下一步，我們將改變背景顏色。用油漆桶工具，填補背景層顏色：＃e3dec1
03。選擇矩形工具，繪製出以下尺寸形狀：1022X173和填充黑色（＃343434）
04。接下來，我選擇選擇一個如下的矢量圖片素材，類似的都行，並將透明度設置為23％。
05。現在，選擇矩形工具（U）和添加形狀（244 × 119），使用下面的顏色＃a3cb31。
06。下一步使用矩形工具，創建另一個形狀，尺寸：239X130，然後處理成下列圖層樣式：（投影和漸變效果，如下圖）
處理效果如下：
07。下一步將是增加該網站的logo。
看看下面的效果吧：
08。完成logo后，在右邊添加一些標語文字。
09。下面開始製作導航目錄，選擇矩形工具來創建一個形狀（1022X46），並添加下面層的樣式效果。
如下圖，將導航條和上方的頭部保持1~2px的間距（將導航條像下移動）。預覽：
10。下添加一個鼠標選中和當前頁面的效果。用橢圓工具（背景設置為白色），並制訂一個小的形狀。如下：
11。應用高斯模糊（濾鏡>模糊>高斯模糊）與15px半徑。
12。在這一步驟中將添加一些導航文本。
13。因為我們的導航欄看上去有點空，我們在右側再添加個搜索框。選擇矩形工具，添加一個尺寸：255 × 26的框，設置層樣式：(內投影)
看看下面的效果：
現在來裝飾導航。
14。選擇矩形工具，繪製出形狀（在導航欄）在下方：1022X32。顏色填充：＃c0de7a
15。現在添加一些其他素材。
16。如下圖中的圖型。
向上移動，如下圖，主要圖層擺放關係。
17。接下來，我會重複複製素材（層>複製層）。
下面效果：
18。步驟重複5-7次以上，下面全部覆蓋就可以了，然後把每個層的透明度設置為16％就差不多了~~
下面開始製作中間的宣傳部分
19。選擇矩形工具，並創建一個具有以下尺寸形狀：1022 x 178。使用這種顏色：＃80ad0a
20。在形狀中創建一個循環使用橢圓工具
21。選擇矩形工具，選擇如綠色背景高度。
22。按Ctrl + Alt +I（反向選擇），然後按下刪除。刪除多餘部分：
23。現在修飾一下這個部分吧，你需要在中間放一個向日葵，在兩邊添加一些矢量裝飾圖和一些文本
效果看看吧：
其他部分都好了~ 在做下面的主要內容部分。
24。選擇矩形工具，繪製出形狀。尺寸: 969×563
25。然後應用投影樣式：
26。下面添加一些文章，並添加一些裝飾。如下：
27。現在製作右邊的部分，選擇矩形工具，並創建一個矩形，尺寸：275×508，並應用圖層樣式：
所有需要做的是添加一些圖片和一些文字。現在主要領域就完成了。
28。下面製作底部，在頁腳需要添加一些版權信息，您可以添加一些矢量圖片裝飾。
看看下圖：
這樣本教程已經結束了。教程寫的有點簡單，希望大家喜歡。
–本文轉載自 http://www.missyuan.net 教學網 —
熱門推薦
留言回覆
