Facebook加入
LINE加入
2021/12/25
教學主題: Photoshop製作清爽綠色風格網頁模板
大家好!! 小編今天來和大家分享關於 Photoshop教程中的設計教程教學
今天的這個教學主題是: Photoshop製作清爽綠色風格網頁模板
這教學的重點為這幾點 [ 教程,網站,綠色,製作,添加,工具,選擇,一些,一個,形狀, ]
希望你可以從這幾點中領悟到修圖的精華
本文重點
本教程主要用Photoshop來設計一張綠色調風格網頁模板,網頁美工設計的朋友可以一起來觀賞學習,模板的製作的重點在於網站的板式搭配和顏色的搭配.
本教程主要用Photoshop來設計一張綠色調風格網頁模板,網頁美工設計的朋友可以一起來觀賞學習,模板的製作的重點在於網站的板式搭配和顏色的搭配.下面讓我們一起來學習吧.
PS：翻譯作者要求，如需轉載，請勿打各站水印，希望尊重原創
先看看完整的網頁布局效果：
貼心提醒: 你可能知道按Tab鍵可以隱藏工具箱和浮動面板，同樣按Shift+Tab鍵 可以只隱藏浮
動面板( 而保留工具條可見 )。
現在我們開始教程。
01。創建一個1020px X 1060px的文件。
貼心提醒: 你可能知道按Tab鍵可以隱藏工具箱和浮動面板，同樣按Shift+Tab鍵 可以只隱藏浮
動面板( 而保留工具條可見 )。
02。下一步，我們將改變背景顏色。用油漆桶工具，填補背景層顏色：＃e3dec1
03。選擇矩形工具，繪製出以下尺寸形狀：1022X173和填充黑色（＃343434）
04。接下來，我選擇選擇一個如下的矢量圖片素材，類似的都行，並將透明度設置為23％。
貼心提醒: 按住Shift鍵點擊浮動面板的標題欄( 最上方的藍條 )可以使其吸附 到最近的屏幕
邊緣。
05。現在，選擇矩形工具（U）和添加形狀（244 × 119），使用下面的顏色＃a3cb31。
貼心提醒: 雙擊浮動面板的上的每一欄( 就是有標題的那個 )可以使其最小化。 通過浮動面板
上的最小化按鈕可以在緊湊模式( 只有最少的選項和內容可 視 )和正常模式( 顯示面
板上所有的選項和內容 )之間切換。
06。下一步使用矩形工具，創建另一個形狀，尺寸：239X130，然後處理成下列圖層樣式：（投影和漸變效果，如下圖）
貼心提醒: 可以通過按回車鍵( 或雙擊工具箱上的工具按鈕 )來打開當前工具的 選項面板。不
然的話只能通過菜單上的 Window／Show Options 命令來來 打開。
貼心提醒: 利用比例縮放區( 在Photoshop窗體或導航器面板的左下角 )來快速 選擇一個準確
的顯示比例，當輸入一個值後按Shift+Enter可以使光標仍 保持在比例縮放區。
處理效果如下：
貼心提醒: 在Photoshop中所有的對話框中的取消( Cancel )按鈕都可以通過按 住Alt鍵變為復
位( Reset )按鈕。這使你可以輕易回覆到初始值而毋須取 消重來。
07。下一步將是增加該網站的logo。
貼心提醒: 按住Shift點擊顏色面板下的顏色條可以改變其所顯示的色譜類型。 或者，也可以
在顏色條上單擊鼠標右鍵，從彈出的顏色條選項菜單中選取 其它色彩模式。
看看下面的效果吧：
貼心提醒: 要使用畫筆工具畫出直線，首先在圖片上點擊，然後移動鼠標到另一 點上按住
Shift再次點擊圖片，Photoshop就會使用當前的繪圖工具在兩點 間畫一條直線。
08。完成logo后，在右邊添加一些標語文字。
貼心提醒: 縮放工具的快捷鍵為「Z」，此外Ctrl＋空格鍵為放大工具，Alt＋空 格鍵為縮小
工具。
09。下面開始製作導航目錄，選擇矩形工具來創建一個形狀（1022X46），並添加下面層的樣式效果。
貼心提醒: 用吸管工具選取顏色的時候按住Alt鍵即可定義當前背景色。
如下圖，將導航條和上方的頭部保持1~2px的間距（將導航條像下移動）。預覽：
貼心提醒: 按Ctrl+Alt+Z和Ctrl+Shift+Z組合鍵分別為在歷史記錄中向後和向前 ( 或者可以
使用歷史面板中的菜單來使用這些命令 )。結合還原 ( Edit／Undo )命令使
用這些熱鍵可以自由地在歷史記錄和當前狀態中切 換。
10。下添加一個鼠標選中和當前頁面的效果。用橢圓工具（背景設置為白色），並制訂一個小的形狀。如下：
貼心提醒: 使用選框工具( Marquee Tools )的時候，按住Shift鍵可以劃出 正方形和正圓
的選區；按住Alt鍵將從起始點為中心勾劃選區。
11。應用高斯模糊（濾鏡>模糊>高斯模糊）與15px半徑。
貼心提醒: 勾畫選區的時候按住空格鍵可以移動正在勾畫的選區。
12。在這一步驟中將添加一些導航文本。
貼心提醒: 按Shift+「+」鍵( 向前 )和Shift+「－」鍵( 向後 )可在各種層的 合成模式上切
換。我們還可以按Alt+Shift+「某一字符」快速切換合成模式。
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.com/viewthread.php?tid=427738
看完小編分享的教學之後 是不是對設計教程中的Photoshop教程教學更熟悉了呢?
希望我們所介紹的 Photoshop製作清爽綠色風格網頁模板 這教學會喜歡
文章標題: 靈感很重要- Photoshop製作清爽綠色風格網頁模板–轉載請註明來源處
本教學分類為設計教程中的 Photoshop教程相關教學
文章相關關鍵字為: 教程,網站,綠色,製作,添加,工具,選擇,一些,一個,形狀,
本文永久連結 :Photoshop製作清爽綠色風格網頁模板
本文轉載自 :VIA
熱門推薦
留言回覆
