萬盛學電腦網

您现在的位置: 萬盛學電腦網 >> 軟體知識 >  >> 影像處理 >> Photoshop 教學 >> Photoshop 入門教學

Photoshop 幾步打造米黑色網頁風格設計

這篇教學將示範如何利用撕紙紋理、漸變疊加與圖層樣式,快速設計出一款質感十足的米黑色網頁介面,適合作品集或企業官網首頁。

最終效果預覽

所需素材

  • 撕裂紙板紋理
  • 網站 Logo

步驟 1:建立自訂紋理填充

新建 20 × 900 像素文件,全選(Ctrl+A)填充 #F6F3EA。用矩形選框工具在右側建立細長選區,填充 #EFEBE1,然後執行 編輯 > 定義圖案 存為自訂填充模式。

步驟 2:套用紋理背景

新建 960 × 900 像素文件,新建圖層「背景」填滿任意顏色,開啟圖層樣式「圖案疊加」,選擇剛建立的自訂圖案。

步驟 3:放置頂部紙板素材

貼上撕裂紙板素材,置於畫面頂部。

步驟 4:紙板去色處理

執行 影像 > 調整 > 去色,將紙板轉為灰階。

步驟 5:漸變疊加營造立體感

對紙板圖層套用「漸變疊加」(深淺灰交替),將不透明度降至 90%,讓紙板紋理若隱若現。

步驟 6:複製製作底部頁腳

複製頂部紙板圖層,執行 編輯 > 變換 > 垂直翻轉 移至底部,再用「縮放」減少高度使其顯得扁平,形成頁腳區塊。

步驟 7:頂部高光點綴

在頂部紙板上方新建圖層,用白色透明徑向漸變點擊幾下,製造微妙亮光。

步驟 8:調整高光不透明度

將高光圖層不透明度降至 15%,為 Logo 區域增添微妙突出感。

步驟 9:疊加強化高光(可選)

若效果不足,可在同一位置重複步驟 7-8 疊加多層高光。

步驟 10:放置 Logo 並設定樣式

拖入準備好的 Logo,設定混合模式、投影、內陰影、漸變疊加(注意:內陰影混合模式設為「正常」、白色)。

步驟 11:添加選單文字

輸入選單文字並對齊排版。

步驟 12:製作選單分隔線

輸入句號(.),執行 編輯 > 變換 > 旋轉 90° 變為直線,複製並置於各選單項目之間。

步驟 13:頁腳版權資訊

在頁腳添加版權聲明等文字。

步驟 14:放置網站縮略圖

將網站縮略圖貼至中心右側,Ctrl+T 調整大小,添加「描邊」效果。

步驟 15:添加說明文字

縮略圖左側添加說明文字,字色選深色以利對比。

步驟 16:繪製 CTA 按鈕

用圓角矩形形狀工具繪製按鈕,套用內陰影、漸變疊加、描邊樣式。

完成成果

文:破洛洛

copyright © 萬盛學電腦網 all rights reserved