若要保留各圖層在畫布上的位置,請單獨匯出該圖層,並使用整份文件或整個畫板作為匯出範圍。每個檔案都要使用相同的範圍和輸出尺寸,讓周圍的透明空間保留對齊位置。

本指南介紹目前適用於 Mac 的 Affinity 桌面應用程式,以及如何產生重新疊放時仍能對齊的個別檔案。Affinity 現行說明文件將專用的匯出工作區稱為 切片工作室(Slice Studio)。其中記載的差異很重要:從圖層建立的切片會匯出其來源圖層,而手繪切片則會匯出其矩形範圍內所有可見圖層。使用切片工作室匯出

為何個別匯出圖層時可能失去畫布對齊位置

Affinity 會自動依據圖層、群組或物件的範圍,調整由其建立的切片尺寸。這適合用來匯出精簡的素材,但匯出範圍不一定會包含原始畫布邊界。手繪切片則採用不同規則:矩形會定義匯出範圍,而該範圍內其他圖層的可見內容也會一併匯出。使用切片工作室匯出

實際操作時,選取內容與設定匯出邊界是兩個不同的決定。選取正確的圖層,決定了要交付哪些內容;保留文件或畫板邊界,則決定了內容所在的座標框架。

舉例來說,假設一份 1000 × 1000 像素的文件中有一個藍色正方形,其左上角位於 x = 120、y = 240。匯出整張畫布會保留正方形周圍的邊界;若匯出範圍緊貼正方形,這些空間就會消失。如果之後將兩個檔案都放在相同的左上角原點,正方形就會出現在不同位置。

讓每個匯出檔案尺寸相同,只完成了一半要求。每個檔案也必須使用相同的匯出原點和比例。將裁切過的匯出檔案放大至 1000 × 1000 像素,只會改變其比例,無法補回缺失的邊界。

使用整張畫布,一次匯出一個可見圖層

對於單頁文件,最直接且受支援的方式是搭配一般圖層可見度設定,使用 整份文件 匯出。Affinity 說明,隱藏的圖層不會匯出;其匯出對話方塊則提供文件、頁面、選取範圍和具名畫板等範圍選項。以下步驟結合了這些已記載的控制項。圖層面板、匯出對話方塊

準備文件和透明背景

變更圖層可見度前,先儲存工作中的文件。記下預定的寬度和高度,並決定每個交付項目包含哪個圖層或群組。例如,由一個圓形和搭配的中性色文字組成的群組,可以作為單一輸出,而不是分成兩個。

在 Mac 上,開啟 文件 > 設定 > 文件設定。若頁面需要透明背景,請啟用 透明背景。可透過設定對話方塊查看文件尺寸,無須變更數值。可用的設定項目會依文件是否包含頁面或畫板而有所不同。文件設定(僅限桌面版)

透明頁面設定不會移除你在圖稿後方繪製的實心矩形。準備每次匯出時,請一併隱藏該背景物件。PNG 和 SVG 支援透明度;如果分開的輸出檔需要相互疊放,且不能用不透明頁面遮住下方圖稿,這兩種格式都適用。從螢幕到印刷:如何交付適用於數位和印刷的標誌

顯示第一個交付項目並隱藏無關內容

如果找不到圖層面板,請開啟 視窗 > 一般 > 圖層。使用 切換可見度,只顯示預定輸出的內容,並隱藏無關圖層。Affinity 也說明,可在圖層上按住 Control 並按一下,從快顯選單選擇 隱藏其他項目。匯出前先檢查畫布顯示結果。圖層面板

請將重現預期外觀所需的內容一併保留。如果交付項目包含帶有巢狀內容的群組,就將該群組作為輸出單位。只包含其中一個元件的檔案,無法重現你刻意排除的其他元件所帶來的視覺效果。

匯出文件邊界,然後重複操作

  1. 選擇 檔案 > 匯出 > 匯出。
  2. 選擇適用的 PNG 預設集。
  3. 單頁畫布請將 範圍 設為 整份文件。若要匯出特定畫板,請選擇該畫板的名稱。
  4. 檢查預覽,確認輸出尺寸與預定的畫布尺寸相符。
  5. 選擇 詢問儲存位置,按一下 匯出,然後命名並儲存檔案。
  6. 回到圖層面板,隱藏已完成的交付項目並顯示下一個。使用相同的範圍和尺寸重複匯出。

選單路徑、範圍選項和儲存步驟均取自 Affinity 的匯出對話方塊說明文件。寬度和高度預設為影像的原始尺寸,但也可以變更,因此請檢查數值,不要假設先前使用的預設集尺寸正確。匯出設定

若文件包含多個畫板,明確選擇目標畫板可避免混淆。根據說明文件,整份文件 的行為可以為文件中的各個畫板分別產生影像檔;這不代表「只匯出所選圖層所在的畫板」。匯出設定

切片工作室可以批次匯出整張畫布的圖層嗎?

切片工作室可以匯出多個由圖層建立的切片,也可以設定多種格式和尺寸。不過,說明文件並未記載一個能為每個圖層建立獨立整張畫布匯出的單一指令。自動建立的圖層切片會以來源項目的範圍為起點。請將批次選取和保留畫布邊界視為兩項不同的需求。使用切片工作室匯出

匯出方式 說明文件所載的內容邊界 對此任務的意義
從圖層建立的切片 僅包含其來源圖層;初始尺寸依據項目範圍調整 僅靠自動建立切片,無法確保保留整張畫布的邊界。
使用切片工具繪製的切片 包含矩形內的所有可見圖層 若要使用整張畫布的矩形,必須變更可見度才能分別匯出各交付項目。
隱藏無關圖層後匯出整份文件 文件匯出範圍和可見內容 能以簡單、可重複的方式匯出彼此對齊的個別檔案。

上述切片差異記載於使用切片工作室匯出;一般隱藏圖層的行為則記載於圖層面板。

需要重複使用匯出區域時,使用固定的手繪切片

如果所有輸出都要使用大型構圖中的特定矩形區域,手繪切片就很實用。Affinity 說明,可透過切片工作室的 變形 面板,精確設定使用切片工具建立的切片尺寸和位置。先定義一個共用矩形,再於每次匯出前變更一般圖層的可見度,分別隔離各項輸出。匯出切片

若要分別手動命名各輸出,請關閉 連續匯出,並在每次變更可見度後手動匯出。變更文件內容或切片設定時,連續匯出會重新匯出已勾選的切片;如果要保留連續變更可見度後產生的多個不同交付項目,這種方式並不適用。匯出切片

Affinity 也說明,可以調整由圖層建立的切片尺寸,再使用 還原為自動尺寸 重設。此操作會讓切片恢復原始尺寸,並非用來對齊整張畫布的指令。不要假設存在名為「保留畫布位置」或「以畫布尺寸匯出所有圖層」的控制項。切片工具

PNG 和 SVG 哪些設定很重要?

使用 PNG 時,請保留完整匯出範圍、透明度和預定的像素尺寸。不同圖層的寬度或高度不要變更。如果你打算縮放所有輸出,請讓每個檔案都套用相同比例,確保座標框架彼此相容。Affinity 說明了點陣圖匯出的寬度、高度和長寬比控制項。匯出設定

使用切片時,縮放比例還需要額外檢查。Affinity 說明文件記載的文件 DPI 與切片倍率關係表示,1x 不一定等於文件的像素尺寸。其範例顯示,一份 64 × 64 像素、144 DPI 的文件,在 1x 時會匯出為 32 × 32 像素,在 2x 時則會匯出為 64 × 64 像素。使用切片時,請檢查實際輸出尺寸。使用切片工作室匯出

使用 SVG 時,請採用相同的可見度與完整範圍程序。Affinity 說明,啟用檢視框資料後,SVG 檢視框會與匯出範圍相符。因此,如果一開始選擇緊貼內容的選取範圍,啟用檢視框輸出也無法補回文件邊界。匯出邊界必須保持為整份文件或具名畫板。匯出設定

SVG 的外觀另有一項限制:部分設計屬性需要點陣化。Affinity 的 點陣化 設定可以將不受支援的屬性點陣化;選擇 無 則會省略格式不支援的元素。因此,保留畫布位置並不代表每個匯出的元素都會維持可編輯的向量圖稿。匯出設定

繼續匯出其餘圖層前,先檢查對齊情況

先用兩個簡單的輸出確認流程,再重複操作整份文件。以下是建議的診斷方式,使用的是合成圖稿,並非宣稱的測試結果。

  1. 在來源文件中放置兩個位置明顯不同的中性形狀。
  2. 使用相同的整張畫布邊界和輸出尺寸,分別匯出各形狀。
  3. 開啟各匯出檔案,確認其整體尺寸。
  4. 將兩個檔案放入尺寸相符的目標畫布,在相同的左上角原點和大小下放置,且不要裁掉透明邊界。
  5. 比較兩個形狀的相對位置是否與來源構圖相符。

如果檔案尺寸不同,請先檢查匯出範圍和尺寸設定。如果尺寸相同但圖稿位置偏移,請確認其中一個輸出是否使用了不同的切片原點,或接收應用程式是否裁切或置中處理內容。如果出現多餘圖稿,請檢查可見度設定,以及是否使用了會包含可見重疊圖層的手繪切片。

兩個檔案的檢查成功後,對其餘交付項目重複使用相同的邊界、尺寸和可見度設定。匯出和放置時都要保留周圍的空白空間:這些共用的畫布範圍,能讓個別匯出的圖層重現原本的版面配置。

來源