本教程翻譯自國外優質教程，完整演示一款移動 APP 應用官網的深色風格設計流程。畫布 1200×1150 px，從頂部 Header 漸變背景、圓角導航欄、懸停狀態按鈕、搜尋框圖層樣式，到 Hero 區 HTC 平板素材配合放大鏡剪貼蒙版展示細節，再到內容區漸變分隔線、功能列表排版、底部 Footer 導航與版權區，每個模塊都通過「圖層樣式」（投影、內陰影、漸變疊加、描邊）堆疊出精致的質感層次。教程提供素材打包下載，適合中高階設計師學習商業級網頁視覺規範、圖層管理習慣與非破壞性編輯技巧。雖教程末尾略有截斷，但核心模塊已涵蓋完整設計邏輯。

翻譯：教程盒子(https://www.psdmi.com)

最終效果

教程所需素材

HTC Pad PSD File By Esintitasarim

Loupe: Screenshot Magnifyier By Premium Pixels

教程盒子打包下載地址：https://urlxf.qq.com/?JRbqE37

第一步

新建(Ctrl + N)一個 1200 x 1150 px，背景為:#FFFFFF的文檔。使用“矩形選擇工具”(M)畫一個 1200 x 220px的矩形框，然後填充顏色(此顏色不做固定要求)。

接下來，我們把剛剛創建的圖層命名為“header”。使用“圓角矩形工具”(U)並設置半徑為20px。

畫一個950 x 60px 的圓角矩形

命名圓角矩形圖層“Navigation“。重新選擇圓角矩形工具(U)然後在“Navigation“右上方再次拖出一個圓角矩形作為搜索框。把該層命名為 “Search”。

第二步

選擇 “Header” 圖層 按照如下設置添加”圖層樣式“

投影設置：不透明度：34%;角度：90度;距離：5px; 大小：5px;

漸變疊加

在“Header”圖層上方建立一個發光圖層並命名為“Header Glow”. 選擇 “Header”圖層並執行命令 “圖層 >載入選區”選擇 “漸變工具” (G) “鏡像漸變”. 如圖所示。

然後把剛剛設置的圖層透明度降低為“15%”

導航制作

選擇 “Navigation”然後添加下面的圖層樣式使用以下設置。

在內部導航欄中使用文字工具(T)添加一些文本鏈接

在每一個導航項之間,創建兩個像素的線條 一條黑、一條白。如下圖所示

然後把剛剛的線條的混合模式設置為“疊加”。

接下來,我們將創建一個懸停狀態的導航項(即選中狀態)。選擇縮放工具(Z)然後縮放到一個導航,畫一條白色#ffffff的線條。如下圖所示

設置該線條的圖層樣式，如下圖所示。

設置完成後的效果如下圖所示。

選擇搜索圖層按照下圖所示的設置為其添加圖層樣式。

樣式設置完後，利用“自定義形狀工具”(U)添加一個搜索圖標，並在左邊用文本工具(T)輸入“Search...”.

完成頭部，接下來我們將添加網站名稱及標語。

創建一個新圖層，利用選框工具(M)

一旦選擇了填充(G)選定區域與任何隨機顏色,然後添加一個漸變疊加使用以下設置。

 

背景創建完成後，我們將在左側添加文本信息，右側添加圖像。

需要的圖像教程盒子已經打包上傳。

復制下載到的素材：htc_pad_2_by_esintitasarim-d325zed.jpg Ctrl+T 變形工具調整大小。

 

打開下載到的素材放大鏡拖動到HTC PAD2的底部

再次打開HTC素材置於放大鏡圖層的下層，設置為剪切蒙板.然後移動(V)HTC較大版本圖層直到如下圖所示。

創建底部導航

新建一個圖層，如下圖所示(藍色區域)

在剛剛添加的圖層中，設置漸變疊加。使用下圖參數進行設置。

 

 

 

利用文本工具添加導航名稱，並用頭部導航所使用的線條設置為該導航添加設置。最終效果如下圖。

最後上面的子標題添加一個指向上的小箭頭。還可以使用多邊形套索工具(L)創建。

 

創建內容區域

選擇矩形選框工具(M),然後選擇在最後一點的白色區域,如下所示。

設置前景色為# cecece和背景色設置為# ffffff,選擇漸變填充工具(G)然後拖動一個線性漸變的 頂部選擇向下幾個像素。

選擇矩形選框工具,在頂部創建兩個1像素線條,就跟頭部導航的一樣。創建完成後設置透明度為50%

在剩下的空間我們開始建立內容,如下圖所示。

建立底部

For the footer simply select the “Rectangular Marquee Tool” (M), drag a selection