:::

用線上圖片編輯工具去背:PIXLR EDITOR使用教學 / Removing Image’s Background By Online Photo Editor: PIXLR EDITOR

image

在準備授課教材時,我常常需要對圖片做些加工。最常用的功能就是「去背」,好讓我把圖片跟教材文字整合在一起。但是每次開啟像是PhotoShop或Photo Impact這種龐大的工具都要等很久,而且也才只是簡單地做個去背而已,未免也是殺雞焉用牛刀。

還好現在來到了雲端時代,「去背」這種簡單的圖片處理功能,我們可以使用小巧但卻十分好用的線上圖片編輯工具「PIXLR EDITOR」就能完成。


待處理圖片 / An Image With Colored Background

3_150

今天我們要處理的照片是來自於免費線上圖庫freepik的圖片。

必須說明的是,這張圖片其實原始格式是Illustrator的ai向量圖片格式。如果是這種向量圖片,我們也可以簡單用InkScape來處理這張背景。不過今天我們不是要談向量圖片,這次我是拿它的JPEG格式點陣圖片來作為去背教學的範例圖片。


STEP1. 打開PIXLR EDITOR / Open PIXLR EDITOR

2016-06-01_165242

PIXLR EDITOR是一個免安裝的線上工具,請使用網頁瀏覽器打開上面的網址即可。不過,PIXLR EDITOR是基於Flash來運作,所以請確保你的瀏覽器可以開啟Flash。如果你使用了類似Flash Block的套件遮蔽網頁的Flash的話,請記得把PIXLR EDITOR加入白名單。

STEP 2. 開啟圖片 / Open Image

image

請選擇「從電腦上打開圖片」,打開上面那張範例圖片。

image

正式進入圖片編輯畫面,有沒有跟PhotoShop很像呢?

STEP 3. 新增透明背景圖層 / Add A Transparent Background Layer

雖然別人用PIXLR EDITOR的教學都可以直接使用刪除就獲得透明的背景,但我的電腦刪除時就只會取得白色的背景。所以在此我用的是跟別人不同的方法。

image

參考上圖,在「圖層」選單中按下右下角的「新圖層」。

image

參考上圖,(A) 在原本「背景」圖層右邊的鎖上點擊滑鼠左鍵兩下,解除圖層鎖定,「背景」變成了「圖層 0」。

image

(B) 將「圖層 0」按滑鼠左鍵拖曳到「圖層 1」的上方。

image

變成「圖層 0」在上面,「圖層 1」在下面。這樣我們就準備好透明背景了。

STEP 4. 移除指定顏色的背景 / Remove Colored Background

image

確保你現在點選的是要處理的圖層「圖層 0」。

image

因為圖片背景顏色都是藍色,所以我們移除藍色就能夠達到去背的效果。移除指定顏色的工具是「魔術工具」,這功能就如同許多繪圖工具的「魔術棒」一樣。

以下操作請參考上圖的標示:

  • (A) 在左邊的「工具」裡面選擇「魔術工具」。
  • (B) 選擇容差數值。數值越大,待會移除越多類似顏色的範圍。數值越小,甚至到0的話,待會只會移除指定顏色的範圍。建議設定20左右即可。
  • (C) 勾選「連續」:如果勾選的話,待會會移除的只有選取範圍鄰近的顏色。如果取消勾選的話,會移除圖片中所有出現指定顏色的範圍。建議勾選連續。

image

接著在圖片的藍色背景上按下滑鼠左鍵,選取藍色背景範圍。

image

圖片中藍色範圍的邊緣出現黑白虛線,表示藍色範圍被選取起來了。

image

接著要刪除背景。可以按上方選項列中的「編輯」 > 「清除」。或是直接按鍵盤的「Del」鍵,就可以將選取範圍刪掉。

image

現在圖片背景被刪除掉了,白灰格子表示透明。

STEP 5. 移除標誌 / Remove Logo

image

有些人可能會注意到下面還有freepik.com標誌。有些人可能會覺得必須要拿掉這個標誌才能更進一步使用這張圖片。

這邊必須要說明的是,freepik雖然免費提供這些精美的圖片供人下載,可是卻也要求使用圖片的時候務必註明來源來自freepik。即使移除掉圖片中的標誌,我們還是要記得用其他方式註明這張圖片的來源,不然就變成單純的盜取圖片囉。

那麼以下就介紹如何移除掉這一塊標誌。

image

在選單列的「編輯」中選擇「取消全選」。

image

這時候黑白虛線消失了,表示現在不在選取中。我們就可以重新選取範圍。

image

在工具裡面選擇「選框工具」。

image

用滑鼠左鍵拖曳的方式,選取freepik標誌。

image

然後清除選取範圍。

image

現在我們得到一個只有書本的去背圖片了。

大部分教學都只教到這裡,可是這張圖片上下左右有很大的多餘背景,要如何去除掉呢?讓我們繼續看下一步怎麼操作。

STEP 6. 裁掉多餘的範圍 / Trim Image

image

在工具裡面選擇「魔術工具」。

image

在透明的背景上按左鍵選取。

2016-06-01_175420

最後會將透明背景選取起來。

image

在選單列的「編輯」中使用「反選」。

image

這時候黑白虛線的範圍只會選擇書本而已。

image

在選單列的「編輯」中使用「拷貝」,複製這個選取範圍。

image

在選單列的「文件」中使用「新圖片」。

image

在「新圖片」對話視窗中勾選「從剪貼板創建圖像」跟勾選「透明」,然後按下「確定」。

請注意,如果你在前面的「拷貝」之間還複製其他資料的話,那「新圖片」對話視窗就不會出現「從剪貼板創建圖像」的選項。請回到前一步拷貝選取的圖片吧。

image

只有書本的去背圖片就完成了。

STEP 7. 儲存圖片 / Save Image

image

在選單列的「文件」中使用「保存」。

image

格式請選擇「PNG (透明,全品質圖像)」,這樣才能保存有去背的圖片。預設的JPEG還是會有白色的背景喔。

image

這樣就可以下載編輯完的去背圖片了。

未命名

上面這張就是完成圖囉。


結語 / Conclusion

這個技巧非常地實用。即使電腦等級不高、無法順利運作像是PhotoShop這種大程式,也可以使用PIXLR EDITOR這種輕巧的工具完成修圖喔。

如果想要學習PIXLR EDITOR以及同樣是免費的線上編輯工具PIXLR EXPRESS跟PIXLR O-MATIC,可以參考PcSetting Blog的教學:「Pixlr 線上圖片編輯、去背、剪裁與特效製作等的免費服務教學」。


20220819 嘗試重新上傳。

總共8 則留言 ( 我要發問 , 隱藏留言 顯示留言 )

  1. 布丁 你好:
    我想問一下為甚麼製作好的圖片,
    在保存圖像時,畫面就一直停留在「工作中,請稍後...」
    而沒有辦法順利的下載編輯完成的圖片?!

    回覆刪除
    回覆
    1. 你好,

      瀏覽器的問題嗎?清除快取看看?
      還是彈跳視窗被瀏覽器擋住了?

      刪除
    2. 好像都不是欸...
      瀏覽器是用Google Chrome

      刪除
    3. 有了!!
      可以下載了
      謝謝布丁

      刪除
    4. 這樣就是瀏覽器快取的問題。
      這可能是瀏覽器開太久了,裡面存太多東西了,造成系統有問題。
      用無痕模式或是全部關閉瀏覽器再重開大致上就可以恢復。

      刪除
  2. 請問用選取去取不要的logo後,按下del發現選取的範圍是黑白相間的格子,要如何改掉預設的黑白相間的格子呢?

    回覆刪除
    回覆
    1. 你好,

      請先確定你選擇的Layers是有圖的那一個,而不是透明圖層。

      請使用Pixlr E來執行本篇文章的操作。
      https://pixlr.com/e/#editor
      我試著操作一下,整個流程並沒有什麼不同。
      可以參考一下我的錄影:https://youtu.be/Zf-1lpx5Kcc

      刪除