在 Illustrator 中反轉影像顏色的方式是選取你的作品,然後選擇 Edit > Edit Colors > Invert Colors,這會將每個 RGB 通道翻轉為其在所選向量物件上的互補值。當目標是由原生向量形狀所構成的填色、描邊或圖樣時,這個單一指令就是 Illustrator 的標準作法,而且因為 Illustrator 是在自己的物件模型上運作,而非觸碰像素緩衝區,所以幾乎是瞬間完成。不過同一個指令並不一定能觸及已置入的點陣影像,因為 Illustrator 的 Invert Colors 是針對其顏色物件執行,而非針對連結的 PNG、JPEG、GIF 或 WebP 檔案底下的像素。需要對已置入的照片、掃描線稿或透明 PNG 進行真正的像素級顏色翻轉的設計師,通常會先把點陣圖匯出,透過一個私密的瀏覽器工具進行反轉,然後再把產生的 PNG 重新連結或重新置入到 Illustrator 文件中。瀏覽器的步驟多了兩次點擊,但能保留透明度、讓操作可復原,而且絕不會將檔案傳送到外部伺服器。

how to invert image colors in illustrator
在 Illustrator 中反轉影像顏色:點陣與向量

「Invert Image Colors」實際上改變了什麼

在通道層級上,顏色反轉會將每個紅、綠、藍位元組替換為其互補值:輸出紅色等於 255 減去輸入紅色,輸出綠色等於 255 減去輸入綠色,輸出藍色等於 255 減去輸入藍色。Alpha 通道原封不動地複製,因此透明區域保持透明。這會產生可預期的互換:純黑 (0, 0, 0) 變成純白 (255, 255, 255),純白變成純黑,而三種加色原色則旋轉為其互補的二次色:紅色變青色、綠色變洋紅色、藍色變黃色。因為這個規則純粹是對已解碼位元組的算術運算,套用兩次會精確地還原原本的通道值,這也是設計師在處理高對比模型和無障礙預覽時信賴它的原因之一。

Illustrator 針對向量作品的內建路徑

對於原生向量形狀、文字、漸層和圖樣填色,Illustrator 有一條不需要額外工具的直接路徑。使用 Selection 工具 (V) 或 Direct Selection 工具 (A) 選取作品,然後開啟 Edit > Edit Colors > Invert Colors。Illustrator 會逐一處理每個所選物件的顏色屬性並就地反轉,因此即使在擁有數百個路徑的複雜作品上,這個操作依然快速。尚未群組的物件必須個別選取,或者你可以在執行指令前用選取框拖曳整個工作區。Edit > Undo (Ctrl/Cmd+Z) 可以在結果不如預期時還原原本的顏色。Edit Colors 子選單也提供一個 Complement 選項,能產生相似但不完全相同的結果:Complement 是圍繞色環計算感知上的對比色,而 Invert 則翻轉原始位元組值,因此在掃視選單時兩者很容易混淆。

在 Illustrator 內反轉點陣影像

對於已置入的點陣影像,Illustrator 的向量 Invert 指令並不一定能觸及底下的像素緩衝區,特別是當影像仍是連結而非嵌入時。可靠的工作流程會將點陣圖視為獨立物件,在 Illustrator 之外進行反轉,然後把結果放回文件中。

  1. 使用 File > Place 置入影像,然後點擊或拖曳以將它放在工作區上。
  2. 使用 Selection 工具選取已置入的影像,並確認 Control 面板顯示影像尺寸加上 Link 標記。
  3. 按右鍵並選擇 Embed(如果你打算將反轉後的副本保留為內嵌),或保持連結狀態以便日後替換檔案。如果你還需要將點陣圖鏡像以取得對稱效果,請參考這份關於如何在 Illustrator 中翻轉影像的指南。
  4. 開啟 Transparency 面板,記下影像是否帶有 Alpha 通道,以便之後能以透明方式重新匯出。
  5. 選擇 File > Export > Export As,將格式設為 PNG,視需要啟用透明度,然後點擊 Export。
  6. 將匯出的 PNG 餵給下一節中介紹的 Invert Image Colors 工具。
  7. 回到 Illustrator,選擇 File > Place,選取反轉後的 PNG,然後點擊放在原本影像所在的位置。
  8. 如果新置入的影像大小不同,請使用 Object > Transform > Scale 來符合原本的尺寸,接著如果原本的影像在向量內容後方,請將反轉後的物件移至最下層。

這個流程多出兩個檔案對話框,但能保證真正的像素級反轉並保留 Alpha,而且原本的點陣圖在磁碟上原封不動,以備日後需要。

真正像素反轉的本地瀏覽器替代方案

當目標是對 PNG、JPEG、GIF 或 WebP(包括透明圖層與動畫來源)進行真正的像素翻轉時,單頁式的瀏覽器反轉器可以處理這個操作,而不需要把檔案傳送到任何地方。Invert Image Colors 工具會在你目前的分頁中讀取所選檔案的位元組、依已發布的格式規則驗證容器、透過瀏覽器本身的影像解碼器解碼第一幀、將 255 減去通道的規則套用到每個已解碼的 RGBA 位置,然後匯出一個全新的 PNG 讓你立即下載。

  1. 選擇一個 PNG、JPEG、GIF 或 WebP 檔案。工具會檢查位元組簽章(PNG 的簽章加上 IHDR 和 IEND、JPEG 的 SOI 接著一個標記和終端的 EOI、GIF 的 GIF87a 或 GIF89a 標頭加上足夠的邏輯螢幕結構和結尾區塊,或 WebP 精確的 RIFF 位元組計數加上 WEBP 標記與受限的 VP8、VP8L 或 VP8X 第一個區塊),如果容器格式錯誤或從不支援的格式重新命名,就會在進行任何像素處理前拒絕該檔案。
  2. 瀏覽器會解碼第一幀並確認解碼後的邊長,每邊最多 8,192 像素,以及總像素面積最多 24,000,000 像素。超過 15 MiB 的檔案會在一開始就被拒絕,而實際的 ArrayBuffer 長度會在讀取後再次檢查。如果檔案失敗,則不會顯示預覽,也不會提供半成品的輸出。
  3. 工具使用輸出紅色 = 255 − 輸入紅色、輸出綠色 = 255 − 輸入綠色、輸出藍色 = 255 − 輸入藍色反轉已解碼的第一幀,原封不動地複製 Alpha,然後以原始大小同時呈現來源與反轉後的預覽。
  4. 確認顯示的尺寸和輸出位元組大小。PNG 匯出上限為 32 MiB;空值結果或超過這個預算的任何內容都會被視為失敗,而非截斷的下載。瀏覽器透過標準的 HTMLCanvasElement.toBlob API 將 canvas 編碼成全新的 PNG,以便直接放回 Illustrator。
  5. 下載靜態 PNG。動畫 GIF 或動畫 WebP 輸入的後續幀、時間、調色盤和處理方式不會被保留,輸出會是單一的靜態 PNG。

因為從檔案讀取和容器偵測,到解碼、像素變更、預覽和 PNG 匯出的每一步,都在你目前的分頁中執行,所以影像從未離開瀏覽器。選擇另一個檔案會遞增作業世代、關閉先前的 ImageBitmap,並撤銷舊的 ObjectURL;卸載工具則會撤銷任何剩餘的 URL 並關閉 bitmap。

逐通道顏色對應參考

下表列出幾個代表性的輸入以及反轉器寫入的精確位元組。介於中間的值遵循相同的線性規則:每個輸出通道等於 255 減去輸入通道。在把結果放回 Illustrator 之前,可以用這個表快速做一次合理性檢查。

輸入顏色輸入 RGB輸出 RGB可見結果
黑色(0, 0, 0)(255, 255, 255)純白
白色(255, 255, 255)(0, 0, 0)純黑
紅色(255, 0, 0)(0, 255, 255)青色
綠色(0, 255, 0)(255, 0, 255)洋紅色
藍色(0, 0, 255)(255, 255, 0)黃色
中灰(128, 128, 128)(127, 127, 127)近中灰
50% 紅色(128, 0, 0)(127, 255, 255)淺青色

限制、元資料,以及反轉器不會做的事

了解邊界能幫助你避免執行失敗和檔案被悄悄更動。輸入會被檔案選擇器限制為 15 MiB,並在讀取後對實際的 ArrayBuffer 長度再次檢查。每條解碼後的邊長最多 8,192 像素,總像素面積最多 24,000,000 像素;超出這些限制一個位元組、一個像素或一條邊都會在任何 RGBA 處理開始前被拒絕。輸出 PNG 本身有 32 MiB 的上限,空值或超過大小的結果會被視為失敗,而非截斷的下載。

這個工具是位元組通道的視覺效果,並非色彩管理轉換,也非底片負片修復。它不會線性化 gamma、模擬感知互補色、移除橘色罩、平衡掃描底片、修正曝光,或執行色調分級。EXIF、GPS、ICC 設定檔、註解以及其他來源中繼資料都不會帶入輸出 PNG,因此當那些資訊很重要時,請保留原始檔案。動畫 GIF 和動畫 WebP 的輸入會變成單一的靜態 PNG:只會保留瀏覽器解碼的第一幀,後續幀、時間、迴圈、調色盤和處理方式都會被捨棄。PNG 輸出通常也比 JPEG、GIF 或 WebP 來源大,特別是針對照片或帶有雜訊的影像,這也是輸入與輸出位元組預算刻意分開的原因。

SVG、AVIF、HEIC、BMP、TIFF、PDF 及其他格式即使被重新命名為受支援的副檔名,也不在處理範圍內,因為結構偵測器會在任何解碼器執行前檢查實際的位元組容器。如果你需要先轉換格式,像 WebP Converter 或 JPG to PNG 轉換器這類搭配的工具可以先在本機處理那一個步驟,再回到這裡進行反轉。

如需更深入的了解,請參閱從影像取得顏色:在你的瀏覽器中取得精確的 HEX 與 RGB。