萬盛學電腦網

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

Photoshop 繪製小木屋圖標:從剪影到材質細節完整教學

成品預覽

一枚擁有木質紋理、磚瓦屋頂、磚石煙囪、木柱走廊、陽台花盆等豐富細節的等距/透視小木屋圖標,適合遊戲 UI、旅遊 App、品牌插圖。

核心流程:8 步構建

步驟 1:剪影定型(耐心活)

新建組「Cabin_Silhouette」。鋼筆工具勾勒屋體、屋頂、煙囪、陽台整體外輪廓,轉選區填充基礎色(牆身 #8B5A2B、屋頂 #6B3A1A、煙囪 #7A4A2E)。鎖定透明像素,防止溢色。

步驟 2:屋檐與屋頂細節

  • 屋檐:鋼筆勾勒下垂板條,添加「斜面與浮雕」(內部浮雕、大小 3px)製造厚度感。
  • 屋頂磚瓦:單瓦智慧物件 → 陣列鋪設 → 透視變形適配坡度 → 群組添加「投影」落在牆面。

步驟 3:煙囪磚紋與投影

  • 煙囪圖層添加「圖案疊加」:磚紋圖案,模式「柔光」,不透明度 30%,縮放 50%。
  • 「投影」:距離 4px、大小 6px、不透明度 35%,角度對應主光源(左上)。

步驟 4:磚瓦系統化鋪設(同步驟 2)

步驟 5:窗戶與閣樓

  • 窗戶:矩形 + 圖層樣式(內陰影窗框、描邊窗框、色彩疊加玻璃藍 #4A90D9 30% 不透明度)。
  • 閣樓:縮小版屋頂結構,簡化瓦片數量。

步驟 6:走廊頂棚與木板

  • 頂棚:長條形狀 + 木紋圖案疊加(模式「疊加」,縮放 40%)。
  • 木板:橫向矩形陣列,每板添加細微「斜面與浮雕」(大小 1px)表現板縫。

步驟 7:木質柱子

  • 圓角矩形拉伸 → 木紋圖案疊加(模式「疊加」,不透明度 40%) → 斜面與浮雕(內部浮雕、大小 4px、柔化 1px)製造圓柱體積感。
  • 頂部/底部添加金屬托架細節(小矩形 + 金屬樣式)。

步驟 8:陽台細節與裝飾

  • 欄杆:矩形陣列 + 金屬樣式。
  • 地板:木板紋理延伸。
  • 裝飾:花盆(橢圓 + 土色 + 綠植筆刷點綴)、藤蔓(路徑描邊筆刷)。

最終整合與匯出

  1. 全局光影:頂層調整組「Lighting」——曲線提亮左上受光面、壓暗右下背光面;色彩平衡統一冷暖。
  2. 大氣感:新建圖層「Atmosphere」,模式「柔光」,大柔邊筆刷 5% 流量掃淡環境霧。
  3. 匯出:PNG-32 多尺寸(48/64/128/256/512/1024 px),命名 `cabin_icon@2x.png` 等。

結語

小木屋圖標的豐富度來自「模組化細節」:瓦片、木板、磚紋、柱子各自為獨立智慧物件/圖層組,通過圖層樣式非破壞賦予材質。掌握此模組化思維,替換材質圖案、調整色相即可快速衍生石屋、冰屋、樹屋等系列圖標。

copyright © 萬盛學電腦網 all rights reserved