圖片佔位圖是一張平面、標好尺寸的 PNG，用來在最終完稿尚未就緒時，填滿版面、模擬稿或原型裡的空位。在 Adobe Illustrator 裡，佔位圖標示照片、主視覺或產品圖最終會放的位置，讓設計師與客戶能檢視構圖、對齊與間距，而不必先鎖定最終素材。產生這張佔位 PNG 最快的方式，是使用 Placeholder Image Generator，它完全在瀏覽器裡繪製並編碼檔案。你輸入精確的像素寬度與高度、挑選背景與標籤顏色、可選擇性輸入短標籤，然後下載名為 placeholder-WIDTHxHEIGHT.png 的 PNG。每個像素都在本機繪製 — 專案名稱、草稿文案或產生的圖像都不會送到伺服器 — 因此原型保持私密，即使離線也能繼續工作。因為畫布繪製、文字與 PNG 編碼都在你的裝置上完成，你可以在同一工作階段為許多 Illustrator 畫板反覆調整佔位尺寸，完全不必開啟 Illustrator。對要交付線框套件、或為客戶審查準備模擬稿的設計師來說，這套瀏覽器端流程省去了繞經 Export for Screens 的來回，也避開佔位 .ai 檔帶來的版本控制雜訊。
做佔位圖時為何跳過 Illustrator？
Adobe Illustrator 是完成最終完稿的正確工具，但要產出一張平面、標好尺寸的 PNG，它未必是最快路徑。若干實務理由會把佔位步驟推到獨立的瀏覽器工具：
- 檔案負擔。 只為匯出一張 PNG 而開一份新的 .ai 文件，會增加版本控制雜訊、畫板設定，以及你為一個帶標籤的簡單色塊根本不需要的儲存對話框。
- 精準速度。 原生顏色選擇器與可精確到單一像素的畫布工具，產出帶標籤的 PNG，比折騰畫板預設集與 Export for Screens 面板更快。
- 隱私。 在瀏覽器裡為客戶工作做模擬稿，代表帶有佔位尺寸的草稿檔絕不會上傳到第三方圖片主機或分享連結服務。
- 離線可靠度。 頁面載入後，即使 Illustrator 或網路在工作中途斷線，產生器仍能繼續產出佔位圖。
- 確定性。 此工具用你提供的精確顏色把背景塗滿整張畫布，再把標籤畫在上面，不會暗中加強對比、加入漸層，或引入透明度。
對要處理數十個畫板、或交付線框套件的設計師來說，專用的 PNG 佔位圖產生器 能去掉在 Illustrator 與外部服務之間來回跳轉的摩擦，同時仍給你精確的像素控制。
三個步驟做出佔位 PNG
在任何現代瀏覽器開啟 Placeholder Image Generator，並依下列三個步驟產出可直接置入 Illustrator 畫板的 PNG。
- 輸入與畫板佔位欄位相符的整數像素寬度與高度。此工具每邊接受 1 到 10,000 的值，且總像素數必須維持在 40-megapixel 畫布預算內，好讓瀏覽器畫布保持順暢且安全。
- 用原生顏色選擇器挑選六位數十六進位背景色與對比文字色，然後可選擇性輸入短標籤（最多 80 個 Unicode 字元）。標籤留空時，工具會顯示通過驗證的尺寸，例如 1200 × 630，置中於畫布。
- 選擇 Create placeholder。結果列會回報精確尺寸、繪出的標籤，以及大約的檔案大小。點選 download 以儲存 placeholder-WIDTHxHEIGHT.png，再用 File > Place 放到你的 Illustrator 文件裡。
你在頁面上看到的預覽會縮放以配合版面，但 PNG 仍保持你輸入的精確寬度與高度。顯示尺寸與原始解析度分開，代表你可以在縮圖尺度做健全性檢查，並相信 Illustrator 收到的檔案就是真正的像素尺寸。每當你變更寬度、高度、顏色或標籤，先前可下載的 object URL 會被取代並撤銷，因此你儲存的檔案一律對得上你最後確認的輸入。
Illustrator 專案常見的佔位尺寸
填補 Illustrator 模擬稿的設計師，往往會用到同一小撮佔位尺寸。下表列出符合常見版面欄位的尺寸；此工具只會精確建立你輸入的像素，因此請把這些值當起點，而不是寫死在工具裡的建議。
| Illustrator 版面中的用途 | 典型佔位尺寸 | 備註 |
|---|---|---|
| 網站模擬稿的主視覺橫幅 | 1920 × 1080 | 寬矩形填滿滿版出血的主視覺欄位 |
| 社群預覽卡 | 1200 × 630 | 分享預覽的標準長寬比 |
| 方形卡片縮圖 | 600 × 600 | 產品或功能磚用的精巧方形 |
| 行動螢幕模擬稿 | 390 × 844 | 高矩形對應手機形狀的欄位 |
| 雜誌跨頁主視覺 | 2480 × 1748 | 印刷模擬稿用的高解析度佔位圖 |
| 電子郵件頁首圖 | 600 × 200 | 電子報版面用的細長橫幅 |
若你在做需要額外解析度的印刷品或主視覺模擬稿，產生前請先把數字套進畫布預算。例如，4000 × 3000 的佔位圖計算為 4,000 × 3,000 = 12,000,000 像素，也就是 12 megapixels，遠低於 40-megapixel 上限。6000 × 6000 的方形是 36 megapixels，也放得下；而 7000 × 6000 達 42 megapixels 則會在開始繪製前被拒絕，好讓瀏覽器畫布保持安全。
保持可讀的顏色與標籤選擇
佔位 PNG 需要清晰的標籤，好讓審查者知道自己在看哪個欄位。產生器先把背景塗滿整張畫布，再依 MDN 繪製文字指南 的標準做法，用瀏覽器的系統無襯線字型把標籤畫在上面。字級隨較短的圖像邊縮放，上限 96 像素、下限 12 像素，因此 200 像素高的橫幅與 4000 像素的主視覺都能得到可讀文字，不必手動微調。
使用與設計 token 相符的六位數十六進位值。常見中性色如 #e5e7eb，搭配深灰標籤如 #111827，能讓佔位區塊在視覺上安靜，同時在簡報螢幕上仍可讀。產生器不會默默加強對比、加入漸層或引入透明度，因此對設計 token 是確定性的：相同輸入一律產出相同像素。這也代表你必須自行挑選對審查者對比足夠的前景與背景組合；選淺底深字，或深底淺字。
若自訂標籤比可用寬度長，工具會用刪節號裁切，而不是讓文字溢出畫布，因此你的佔位圖絕不會滲進相鄰的畫板元素。標籤請保持精短 — 像 “Hero A” 或 “Product 03” 這樣的欄位識別名稱，在每種畫布高度都能清楚閱讀。
何時用佔位 PNG、何時用 Illustrator 形狀
佔位 PNG 並非每個 Illustrator 欄位的正確答案。在下列情況使用 Placeholder Image Generator：
- 該欄位確實是矩形，且平面色就足以傳達 “圖片放這裡。”
- 你希望佔位圖帶著真實檔案一起交付，讓下游工具（PDF 匯出、原型檢視器、截圖測試）不必依賴 Illustrator 就能取用。
- 你需要已知尺寸與平面背景，以便做視覺迴歸測試。
在下列情況改用填了佔位灰色的 Illustrator 矩形：
- 最終圖像會是向量而非點陣，而且你希望佔位圖能直接換進剪裁遮色片，不必重新匯入。
- 模擬稿需要可編輯的圓角半徑、漸層或疊加，以呼應品牌系統。
- 你們在單一 .ai 檔內協作，並希望每項素材都放在同一畫板上。
把這兩種做法都放在工具箱裡，就能為每個模擬稿選較輕量的方案，而不必強迫每個佔位都走 Illustrator。
把 PNG 放到你的 Illustrator 文件裡
下載 placeholder-WIDTHxHEIGHT.png 後，切到 Illustrator，用 File > Place，或直接把檔案拖到畫板上，把佔位圖放到最終圖像會在的位置。因為 PNG 保持你輸入的精確像素尺寸，置入的圖形會佔用正確空間，不會出現縮放意外。為了讓佔位圖在 Illustrator 裡整齊，請把它放在名為 Placeholders 的獨立圖層、把圖層不透明度降到約 50 percent，並鎖定該圖層，以免你在建立周圍完稿時佔位圖意外移位。
對重複工作來說，Placeholder Image Generator 夠快，真實圖像一到，你就能以最終素材的精確尺寸重建佔位圖，因此 Illustrator 文件不必圍繞猜測去改尺寸。這對截圖測試夾具特別有用，已知尺寸與平面背景比裝飾性的圖庫圖更有價值。把背景塗滿整張畫布的平面色填色是一次畫上的，如 MDN fillRect 參考。
最終圖像一到，把新檔拖到 Illustrator 裡的佔位圖上，出現提示時選 Replace，該欄位就會更新成真正完稿，而不會打擾其餘版面。若佔位圖在進入 Illustrator 前需要裁切或加邊框，這篇 在 Illustrator 裁切圖像指南 的瀏覽器工作流程會逐步說明如何完成，不必重開桌面應用程式。