為什麼要切,簡單說
平台的單張限制、載入速度、瀏覽器能顯示的尺寸上限 — 就這三件事。詳細標準整理在決定圖片規格裡。這篇講的是下一步:切在哪裡。
好位置是不穿過任何東西的高度
標準只有一個:找一個高度,在那裡畫一條橫線,不會穿過任何區塊。
切在區塊正中會出兩種問題。一是內容本身:句子斷成兩半,或者商品照片橫跨兩張圖。二是更顯眼的 — 有些平台會在圖片之間加一道細縫或框線,那道縫正好穿過被切開的照片時,商品看起來就像裂了。
反過來切在區塊與區塊之間的空白處,無論切片是緊貼還是分開,接縫看起來都像本來就有的留白。
makeinfo 挑位置的步驟
選擇分割 PNG 後,是這樣計算的。
- 把所有區塊的上緣和下緣收集為候選點。
- 取從目前位置往下到最大高度為止的範圍。
- 只保留該範圍內不穿過任何區塊的候選點。
- 在剩下的裡選最靠下的。把每一張盡量填滿,切片數量才會少。
之所以用區塊邊緣當候選,是因為自由排版裡沒有「行」這個概念。不管區塊放在哪裡,它的上下邊界就是內容實際結束和開始的地方。
找不到位置就直接切
如果範圍內一個可用候選都沒有,就在最大高度處直接切,哪怕正好在區塊中間。不切的話,那一張會超過限制,根本傳不上去。
這種情況通常出在兩處。
- 某一個區塊比最大高度還大。多半是整張放進去的超長照片。要麼調高最大高度,要麼把照片拆成兩個區塊放。
- 區塊在縱向上互相重疊。上一個還沒結束下一個就開始了,那一整段裡就沒有空著的高度。把重疊稍微拉開一點就有位置了。
看編輯畫面的切割線就能提前知道會切在哪裡。如果線穿過了區塊,就往上面兩條上懷疑。這些線只用於確認,不會出現在匯出的圖片裡。
自己移動的話以你的為準
自動定的位置不滿意,可以自己拖動切割線。只要動過一次,之後自動計算就不再插手。人定好的位置又被計算推開,那動手就沒意義了。
有幾種情況自己定更好。
- 想跟內容的段落對齊時 — 在商品介紹/規格/配送說明這類話題轉換處切分,一張切片就是一個完整的段落,讀起來更順。
- 想讓第一張短一點時 — 第一張圖出得快,跳出率就低。可以單獨做一張只有主圖和商品名的短開頭。
- 需要湊張數時 — 平台限制可上傳圖片數量的情況。
自己定的時候標準也一樣:選一個不穿過區塊的高度。
最大高度設多少
預設是 2000。這個值是按編輯畫面算的,所以會乘上匯出倍率。用 2 倍匯出的話,實際切片最高是 4000px。
按這個順序來定。
- 確認要上傳平台的單張限制。高度限制和容量限制常常是分開的兩條。
- 把那個值除以匯出倍率。限制是 4000px、用 2 倍匯出的話,最大高度就是 2000。
- 留一點餘量。為了找切割位置可能會切得短一些,但不會變長;不過容量限制會隨內容變化,所以別卡得太滿。
切片太多的話,上傳麻煩,載入請求也變多。一般一頁在五到十張之間比較合適。
接縫還是明顯的情況
位置挑對了,有時還是看得出來。
| 症狀 | 原因與處理 |
|---|---|
| 交界處有一道細線 | 平台在圖片之間加了間隔。背景是純色的話幾乎看不出來,所以至少把切割位置附近做成純色背景會緩解。 |
| 各切片的背景色略有差異 | 背景鋪漸層時,切片的上下兩端會被看成不同的顏色。漸層放在區塊內部,切割區間的背景保持純色。 |
| 只有某一張特別糊 | 那一段放的照片原圖很可能就小。這是素材問題,不是切分的問題。 |
| 最後一張特別短 | 內容末尾多出來一點,就多了一張。移動切割線併進前一張,或者加一句收尾文案把它填滿。 |
匯出與上傳
分割 PNG 會產生多張,所以打包成一個 zip 下載。一張張下載會被瀏覽器擋住或每次都要確認,就算下載下來也會混在別的檔案裡。
檔名會帶編號,像 專案名_01、_02。要按這個順序上傳,內容才接得上。一次選取多個檔案上傳時,有些平台不會按檔名排序,所以上傳後用預覽確認一下順序。
切分後的檔案無法還原
分割 PNG 是用來上傳的。每一張只含整體的一部分,重新匯入也回不到原來的作業狀態。
能還原的是整張 PNG(照片多時會匯出成 zip)。文字、排版、照片、自己上傳的字體都裝在裡面,匯入後可以直接接著編輯。
價格或販售時間以後一定會改。上傳完分割 PNG 之後,請另外保存一份整張 PNG。光是守住這一點,下次修改就只要幾分鐘。