想打造一個充滿家的溫暖感覺、讓訪客瀏覽時彷彿置身廚房餐桌旁的美食部落格嗎？本教學將手把手帶你使用 Photoshop 設計一款獨具居家風格的美食 Blog 網頁版面。設計靈感源自生活細節——底部鋪陳經典格仔桌布紋理，搭配簡潔明瞭的版面配置，瞬間營造出「回到媽媽廚房」的親切氛圍。

完成效果預覽

Step 1：建立畫布與基底紋理

首先新建一個 1200×1400 像素的文件，背景填入暖呼呼的 #fbe0b1 色。為了增加質感，執行「濾鏡 > 雜色 > 添加雜色」，參數設定如下圖，讓畫面彷彿帶著細微的紙張顆粒感。

Step 2：自製桌布格仔圖案

這是本設計的靈魂細節。新建 80×80 px 小文件，建立兩個圖層分別繪製橫向與縱向長條（顏色 #b52a51，不透明度 20% 與 30%），置入群組並將群組不透明度設為 30%。關閉背景圖層後，執行「編輯 > 定義圖案」，一組屬於你的專屬格仔紋理就誕生了。

Step 3：套用桌布圖案

回到主文件，新建圖層填滿白後將填充度歸零，開啟「圖層樣式 > 圖案疊加」，選取剛建立的格仔圖案。瞬間，整個畫面底部便鋪上了溫馨的桌布。

Step 4：頂部導航列設計

建立「top bar」群組。用矩形選區工具拉出 1200×15 px 條狀，填色 #a95858，加上投影（陰影色 #473e2f）增加立體感。接著畫兩條 1px 細線（色碼 #8b4747 與 #ca7373）疊在條狀上下緣，營造精緻的邊框質感。

Step 5：Logo 區塊

新建「logo」群組，放入一張美食圖片（如冰淇淋），命名為「ice cream icon」。使用文字工具輸入品牌名，字色 #8d1c39，並套用投影、浮雕、漸變等圖層樣式，讓 Logo 更具辨識度。

Step 6：社群媒體欄

右側建立「social」群組，用圓角矩形工具繪製 260×70 px 底圖（色 #a95858），加上描邊與圖層樣式，再排入社群圖示，視覺平衡又實用。

Step 7：主內容區背景

繪製 980×1080 px 圓角矩形（圓角 6 px），加上外發光效果，形成一張彷彿浮在桌布上的「白紙」，作為文章內容的承載區。

Step 8：主導航列

在內容背景下方建立導航列：938×70 px 圓角矩形，填色 #a95858，描邊 #9c5151，質感十足。

Step 9：導航文字

輸入選單文字，色 #ece2e4，加上投影（陰影色 #803a3a），確保在深色底圖上清晰可讀。

Step 10：搜尋列

200×26 px 直角矩形，底色 #f4f0e2，1px 描邊 #925050，置入提示文字「Type and hit enter to search」（色 #917a7a），細節見真章。

Step 11：產品展示輪播區

建立 300×300 px 圖片框（底色 #d6c8af，內陰影 + 描邊），複製並錯位排列，形成層疊感十足的展示牆。

Step 12：放入美食圖片（向量蒙版技巧）

將美食照片拖入，利用「向量蒙版」將圖片精準限制在相框內——Alt 鍵點擊圖層間縫隙，或右鍵選擇「建立剪貼蒙版」，乾淨俐落。

Step 13-15：左右切換按鈕

繪製 60×60 px 白圓，加外發光；合併圖層後切成半圓，再置入自定義箭頭形狀（色 #c4b08e），完成左右翻頁控制器。

Step 16-17：裝飾分隔帶

1px 線條（色 #d6cdbc）搭配漸變填充圖層（從 #a99470 到透明，不透明度 20%），再加上黑白黑漸變蒙版，形成若隱若現的優雅分隔線。

Step 18：部落格文章區塊

建立「blog」群組，內含「blog#1」子群組。繪製 200×200 px 正方形圖片框，準備放入文章縮圖……

（後續步驟同理延伸，完成文章列表、側邊欄、頁尾等區塊，最終得到一套連貫、溫馨、極具生活美學的美食部落格設計稿。）