設計範本 | Bannerify Docs

範本是一份帶有命名圖層的設計。你只要在編輯器中製作一次，之後每個請求只需傳送範本 ID 和新的值，Bannerify 就會回傳填入這些值的圖片或 PDF。

整體流程

設計畫布並新增圖層。可以新增哪些內容，請見圖層類型。
為每個會被請求變更的圖層命名。請求如何使用這些名稱，請見 Modifications。
儲存範本，然後把它的 ID 和你的值傳送給 API。請求範例請見生成圖片和生成 PDF。

建立範本

在儀表板中開啟 Templates 頁面，點選 New template。
選擇 Blank template 會得到空白畫布；也可以點選 Start from a template 下方的卡片，把圖庫中的範本複製到你的專案。Browse the gallery 會顯示其餘的範本。

New template 對話方塊，有 Blank template、Import from Figma 和圖庫範本 — New template 對話方塊。

編輯器會開啟你的新範本。

認識編輯器

範本編輯器，左側是 Layers 面板，中間是畫布，右側是畫布設定 — 開啟 1080 × 1080 商品宣傳圖的編輯器。

區域	內容
左上	點選範本名稱會開啟你的範本清單。鉛筆圖示（Rename template）可重新命名這個範本，Undo 和 Redo 可復原和重做你的變更
上方中央	Insert、Frame、Text 和 Shapes 可以新增圖層
右上	Documentation 會開啟這份文件，Preview 會繪製畫布，Save 會儲存你的變更
左側面板	Layers 分頁列出所有圖層，Media 分頁存放你的圖片
右側面板	Design 分頁顯示所選圖層的設定。沒有選取圖層時，則顯示畫布設定

設定畫布大小與背景

點選畫布上的空白處，就會開啟畫布設定。

畫布設定，有 Preset 卡片、Size 欄位和 Background 顏色 — 畫布設定：預設尺寸、大小和背景。

在 Preset 中選擇大小。你可以選擇 Social、Print、Video 或 Ads 底下的卡片，也可以使用卡片下方的 Square（1080 × 1080 像素）和 Portrait（1080 × 1920）按鈕。
如果預設尺寸很接近但不完全符合，請在 Size 中修改寬度和高度。
把 Background 設為純色、漸層或圖片。

畫布大小就是輸出的大小。圖片會有這麼多像素，PDF 頁面則有這麼多點，所以 A4 PDF 的畫布是 595 × 842。請求無法變更畫布。

新增圖層

使用工具列中的 Frame 和 Text，或是開啟 Insert 或 Shapes 來新增其他圖層類型。選取圖層後，用 Design 面板設定它的位置和外觀。文字圖層使用 Google Fonts。所有類型，以及請求可以變更的欄位，請見圖層類型。

Insert 選單，有 Stack、Grid、Image、Icon、QR Code、Barcode、Chart、Table、Key Value、Signature 和 Alert — Insert 選單列出其他圖層類型。

編輯器中選取了 headline 文字圖層，Design 面板顯示位置、大小和字體排印 — 選取的文字圖層和它的 Design 面板。

為圖層命名

請求是靠名稱找到圖層的，所以請為每個會被請求變更的圖層命名。

在 Layers 清單中連按兩下該圖層。你也可以在圖層上按右鍵，選擇 Rename。
輸入名稱，然後按 Enter。

新圖層會以其類型作為名稱，例如 Text，同一類型的第二個圖層會加上編號，例如 Text 1。請選擇在程式碼中好讀的名稱，例如 headline 或 price。比對時必須完全相符，所以 Price 和 price 是兩個不同的名稱，而兩個同名的圖層會得到相同的值。規則請見 Modifications。

新增圖片

開啟 Media 分頁。

編輯器的 Media 分頁，有 Upload、Browse library 和圖片格狀清單 — Media 分頁存放你專案中的圖片。

點選 Upload，從電腦新增圖片檔案。每個檔案都會成為畫布上的圖片圖層，單一檔案最大 5 MB。
點選 Browse library 可搜尋圖庫圖片。選取一張圖片，然後點選 Add to Template。

請使用 PNG、JPEG、WebP 或 SVG 檔案，因為這些是 Bannerify 能繪製的類型。圖片圖層也可以指向一個網址。選項請見圖片。

預覽你的變更

點選頂端列的 Preview，或按 Ctrl+P（Mac 上為 Cmd+P）。Preview template 面板會繪製目前畫布的樣子，包含你尚未儲存的變更。它使用與 API 相同的繪製引擎，不會計入你的用量額度，並且一律顯示 PNG。標題旁的標章會顯示圖片是 Rendering、Ready、Unsynced 還是 Render failed。

面板會列出範本的圖層。選取某個圖層，就能試試看不同的值。

Preview template 面板，左側是圖層清單，右側是繪製出的圖片 — 選取圖層來試試看不同的值，再比較繪製結果。

圖層	可以試的項目
文字	Text content 和 Text color
圖片	Image URL
QR 碼	QR code content
條碼	Barcode value
任何圖層	顯示或隱藏

其他圖層類型只會顯示 Visibility only，所以表格、圖表和 Key Value 圖層請在請求中測試。你在面板中輸入的值只用於測試，不會變更範本。Reset 和 Reset all 可以恢復原本的值。

面板會針對兩種命名問題發出警告：

Layer name required 表示某個圖層沒有名稱，所以請求無法變更它。
Shared layer name 表示有多個圖層使用相同的名稱，所以請求會對每一個圖層套用相同的值。

Download 會儲存預覽圖片，Copy 會複製它。

儲存範本

在你變更任何內容之前，Save 是停用的。點選它即可儲存範本。API 請求使用的是已儲存的版本，所以在透過 API 測試變更之前，請先儲存。如果你帶著未儲存的變更離開編輯器，會跳出對話方塊要求你確認。

複製範本 ID

在 Templates 頁面，開啟範本卡片上的選單。

Copy Template ID 會複製請求以 templateId 傳送的 ID。
View generations 會開啟這個範本的 Generations 頁面，顯示每次生成的時間、格式、大小和 modification。

後續步驟

圖層類型說明每種圖層及其欄位。
常見用途的範例會製作六個範本，以及它們的請求。
生成圖片和生成 PDF涵蓋 API 的用法。