「圖片佔位符」在 Photoshop 工作流程中的意義
Photoshop 圖片佔位符是一個精確調整尺寸的矩形，用來取代尚未定稿的圖片。設計師會將佔位符放入線框稿、首圖區塊、社群卡片、應用程式畫面和產品模型中，如此一來就能在真實圖片拍攝、繪製或授權之前，先檢視、調整尺寸並核准版面配置。Photoshop 本身以廣泛的角度看待這個概念:任何形狀圖層、文字圖層、框架或純色矩形都能充當佔位符，讓版面在真實像素到達之前就能進行合成。
一個好的佔位符會默默完成三項工作。它會固定插槽的寬度和高度，讓字型、邊距和周圍元素能夠穩定地各就定位。它具備足夠的視覺對比，在螢幕上顯而易見，讓審閱者不會將其誤認為最終圖片。它也能承載標籤——無論是尺寸本身(例如 1200 × 630)，或是一個簡短的詞彙(例如 Hero、Product 或 Avatar)——讓任何瀏覽檔案的人都知道這個插槽最終會放置什麼內容。
Photoshop 使用者會在三種經典情境下使用佔位符。他們在圖像尚未準備好之前先排版網站或應用程式畫面、建立需要在主體後方放置純色矩形的產品模型，以及製作精確像素尺寸比照片本身更重要的截圖測試樣板。
原生 Photoshop 佔位符工作流程
Photoshop 本身就有製作佔位符的原生方法，即使你計畫之後搭配瀏覽器捷徑使用，這個方法仍然值得了解。
最直接的方式是使用 Frame 工具。從工具列中選取它，在畫布上拖曳出一個矩形，Photoshop 就會將該框架轉換成擁有自己影像儲存區的佔位符容器。任何拖曳到框架上的圖片都會符合插槽大小，可以重新定位，並且在 .psd 檔案中保持可編輯狀態。根據 Adobe 官方對 Frame 工具的說明，你也可以將既有的形狀和文字圖層轉換為框架，這在你已經使用平面形狀排版設計時非常實用。
完全停留在 Photoshop 內部有其權衡。佔位符只存在於你的文件內部，因此你無法與沒有相同 .psd 版本的團隊成員分享它，而且這個框架也不是一個可以貼到 Figma、Keynote 或 Slack 對話中的可攜式檔案。你也需要在每個步驟都準備一個可運作的 Photoshop 副本。對於非常早期的線框稿來說這沒問題，但只要你需要將佔位符移出 Photoshop，就遲早需要進行匯出步驟。
傳統的替代方法是將圖層填滿純色，使用矩形工具繪製你所需要的精確像素尺寸，進行點陣化，然後匯出為 PNG。這確實可行，但需要在選項列中仔細輸入像素值、手動選取顏色，並進行另存的對話框——處理一張圖片沒問題，但處理多張時就會變得重複繁瑣。
Photoshop 就緒佔位符的瀏覽器捷徑
當佔位符不需要在 Photoshop 文件中保持可編輯狀態時——例如當你在製作螢幕截圖模型、將佔位符放入平面匯出檔的首圖區塊，或擷取視覺回歸測試的樣板時——本地瀏覽器產生器比開啟 Photoshop 還要快。
佔位符圖片產生器會在你的瀏覽器中產生一個精確尺寸的 PNG 佔位符，顏色和標都由你選擇。它使用 fillRect 方法(記錄於 MDN 的 canvas fillRect 參考文件)將背景繪製到真正的 HTML canvas 上，然後透過 canvas.toBlob 將結果編碼為 PNG。由於這整個過程不需要網路請求，因此你未合併的模型、客戶草稿和測試樣板絕不會離開你的電腦。
原生 Photoshop 框架與下載的 PNG 之間最大的實際差異在於可編輯性。框架在 .psd 中保持即時可編輯狀態;PNG 則是平面矩形。對於大多數佔位符工作——線框稿、模型背景、社群預覽插槽、版面格線中的內容佔位符——平面化是一種優勢而非損失。佔位符的目的是被取代，因此它越早成為可攜式檔案，你需要往返 Photoshop 的次數就越少。
| 方法 | 輸出 | 在來源檔案中可編輯 | 可離線運作 | 自訂顏色 |
|---|---|---|---|---|
| Photoshop Frame 工具 | .psd 中的框架圖層 | 是 | 是(桌面應用程式) | 是 |
| Photoshop 圖層 + 匯出 PNG | PNG 檔案 | 否 | 是(桌面應用程式) | 是 |
| 佔位符圖片產生器 | PNG 檔案 | 否 | 是(瀏覽器本地) | 是 |
建立 Photoshop 就緒的佔位符 PNG
一旦你決定平面 PNG 是你的版面所需要的，實際的建立步驟很短，而且完全在本機瀏覽器中完成。
- 在瀏覽器中開啟佔位符圖片產生器。無需上傳、無需帳號，也不需要安裝外掛。
- 輸入你想要的精確寬度和精確高度，以整數像素為單位。每邊接受 1 到 10,000 px 的值，而總像素數(寬度乘以高度)必須保持在工具強制執行的 40 megapixel 畫布預算以下。
- 使用原生瀏器顏色控制項選擇背景顏色和文字顏色。兩種顏色都接受六位數十六進位值，例如 #e5e7eb 或 #111827。
- 選擇性地輸入最多 80 個 Unicode 字元的簡短標籤。如果你將標籤留空，經過驗證的寬度和高度(例如 1200 × 630)會自動繪製在圖片中央。
- 選擇建立佔位符。結果列會顯示精確尺寸、實際渲染的標籤，以及大約的檔案大小。
- 下載 PNG。檔案命名為 placeholder-WIDTHxHEIGHT.png，使用你輸入的精確尺寸，不會進行重新縮放。
進行快速的尺寸合理性檢查是值得的。1920 × 1080 的畫布計算結果為 1920 × 1080 = 2,073,600 像素，大約 2.07 megapixel，完全在 40 megapixel 預算範圍內。這為 6000 × 4000 (= 24 megapixel) 左右的高解析度模型留下了空間，而不會觸及上限。你在頁面上看到的預覽可能會經過視覺縮放以符合版面，但 PNG 始終保持你輸入的自然解析度。
| 輸入 | 允許範圍 | 備註 |
|---|---|---|
| 寬度 | 1 至 10,000 px | 僅限整數像素 |
| 高度 | 1 至 10,000 px | 僅限整數像素 |
| 總像素預算 | ≤ 40,000,000 px | 寬度 × 高度必須符合 |
| 標籤長度 | 0 至 80 個 Unicode 字元 | 已修剪;若仍溢位則使用省略號 |
| 字型大小 | 最小 12 px，最大 96 px | 隨較短的圖片尺寸縮放 |
| 顏色格式 | 六位數十六進位( #RRGGBB ) | 透過原生瀏覽器顏色選擇器選取 |
| 預設標籤 | 空白時自動設定 | 僅在尺寸驗證後計算 |
| 輸出檔名 | placeholder-WIDTHxHEIGHT.png | PNG，完整自然解析度 |
將佔位符放入你的 Photoshop 檔案
PNG 一旦存到磁碟上，將其匯入 Photoshop 所花費的時間幾乎與建立它一樣短。
在 Photoshop 中，開啟應該放置佔位符的文件，然後從你的資料夾將檔案拖曳到畫布上，或使用檔案 > 內嵌置入。PNG 會以其原生解析度到達，因此 1920 × 1080 的佔位符會保持 1920 × 1080，不會被默默地重新縮放。在新圖層上按右鍵並選擇轉換為智慧型物件，這樣你之後就可以將佔位符替換為真實的圖片，而無需重新排版檔案。如果你的佔位符需要微妙的陰影來模擬完成後的外觀，你可以直接在 Photoshop 中套用，或預先渲染一個帶有受控陰影的透明 PNG。
放置佔位符後一個有用的合理性檢查是讀取文件的影像大小，並確認圖層符合插槽。如果文件是為 2× 的 retina 輸出設定的，而你的佔位符是以 1× 大小匯出的，請在智慧型物件內部非破壞性地調整圖層大小，而不是重新產生佔位符，並保留原始 PNG 以供任何仍需要精確 1× 像素尺寸的螢幕截圖或樣板使用。
限制、格式選擇與何時切換工具
了解佔位符工具的極限，比猜測它能做什麼更有用。
佔位符圖片產生器刻意不會擷取遠端圖片、擷取素材照片、產生 AI 圖像、產生回應式 srcset 變體，或選擇平台推薦的尺寸。沒有標記為 Facebook 封面或 Instagram 方形 的預設——你必須自行輸入尺寸。這個選擇以便利性換取了明確性:你始終清楚自己獲得的確切矩形，而且 PNG 不會因為外部佔位符服務更新了其行為而改變。
輸出是 PNG 而非 JPEG，這表示文字和純色在沒有壓縮瑕疵的情況下保持清晰。對於平面佔位符來說，這是正確的權衡。如果你的最終目標是用於實際發佈的壓縮 JPEG，請接收 PNG 並將其通過單獨的瀏覽器內壓縮步驟，而不是讓佔位符工具為你猜測 JPEG 品質。
該工具也不會默默地提高對比、新增漸層或引入透明度。如果你選擇非常低對比的前景與近乎相符的背景——例如淺灰色背景上的白色文字——標籤可能會變得難以閱讀。選擇具有足夠對比的顏色，佔位符就能在任何縮放等級下保持清晰可讀。
對於專業攝影、品牌藝術作品、向量檔案，或需要在頁面層級提供有意義替代文字的無障礙組合，正確的做法是採用適當的設計工作流程，而不是使用佔位符。佔位符是鷹架;最終的藝術作品才是人們實際會看到的內容。
如需更深入的探討，請參閱如何在 Photoshop 中將圖片變成純色。
如需更深入的探討，請參閱如何在 Canva 中製作圖片佔位符。