如何做出前景透明背景白色的圖片


由於最近幫人做了一些 Joomla 的網站, 遇到一些特殊的圖案問題, 因此記錄分享製作過程, 因為 Photoshop 不是我強項, 如果朋友們有更好的方法歡迎回饋。

基本上這是個前景透明的圖檔, 當切換成不同網站顏色時, 它會自動對應顏色。第一圖案是滑鼠未靠近時的顏色, 靠近時會呈現紅色系(因為該網站是紅色)。

PS-1 PS-2

將原網站圖片下載後看到它是 100 x 100 的底色白色, 前景透明的圖片。
PS-3

1. 開始仿製, 由於是測試, 測試, 測試 (因為很重要所以說三次), 所以從網站上下載了別人比較合適我做說明的圖檔。用尺規量圓形直徑是 175 px , 所以先用橢圓選舉畫面工具設定 175 x 175 像素, 抓個圖放到新文件裡。

http://cn.depositphotos.com/62651407/stock-illustration-web-icon-set-spices-condiments.html

PS-4

2.複製, 貼上, 呈現下面結果

PS-5

PS-6

3.使用魔術棒工具把圖檔有顏色的部分選取起來

PS-7

4.再以反向選取的方式得到白色的部分(其實都可以, 只是方便而已)

PS-8

5.按下刪除鈕(Del), 基本上已經圖案呈現透明了, 唯一要處理的是有顏色的圈圈及外圍透明的部分通通要變成白色。

PS-9

6.再用魔術棒工具選一次所有有顏色的部分及大圈圈外的透明部分。

PS-10

7. 使用影像–>調整–>黑白, 把所有顏色調到100%, 也就是全白

PS-11

PS-12-1

8.由於圖案偏小, 所以使用編輯–>變形–>縮放, 水平及垂直圖案放大130%

PS-13

9.圖案有點不正中, 所以再用移動工具稍微左右上下調整一下。

PS-14

10.由於圖案是175 x 175, 因此用影像–>影像尺寸進行調整成我們需要的100 x 100。/再用檔案–>轉存–>快速轉存成 PNG, 存檔後上傳到網站上取代原圖看效果。

PS-15

11. 完成。

PS-16