如何用 Photoshop 替照片上的衣服「換布料」？

12-03

內個啥，我又來給正解
不只是換衣料，這是一個製作模板的教程，完成後就像紙娃娃系統一樣，可讓你三秒換一套裝。

內容包含三個重點：

拆解原圖片成有效模板
製作圖層應用模板 - 讓你3秒換一件衣料
把布料處理成可用的素材

這個教程，可以每小時替一張模特照片做好換衣料模板。
不喜歡看教程？沒問題，直接拉到最下方下載源文件替金先生換裝！
======================================================================

第0步、選取

首先還是得把衣服的範圍都選取出來

不論你用什麽工具選取，最後都要必須轉存成路徑，用這第一個路徑來開始下一個步驟。在有選取範圍的圖片上按路徑面板的這個選項：

那麽第一個原始路徑是長成這樣的：

(全部選取到)

獲得：路徑面板里有第一個路徑，選取好全部衣物。
重要：這一個原始路徑是出發點，無論如何這個路徑不能丟。
======================================================================

步驟一、拆解圖片(用路徑拆)

觀念：真心要把照片上人物的衣服換布料，就必要拆解圖片，你不拆解，結果就會像題主給出的大紅花衣那樣，平的不真實，可以在其上衣和褲子、口袋和衣服、雙腳交錯重疊的各個重疊的地方看到。越求真實結果，就越得拆得詳細。要更真實到天衣無縫，就得花功夫在接合縫上針對圖素處理(本例重點在教學製作模板)。

在心裡拆解完圖片後，用路徑落實拆解

用剛剛的第一個路徑，複製成8個路徑，再把這8個路徑重新編輯成8個區塊，這8個區塊是以衣服的遮蓋區塊來區分的，金先生的衣服區分如圖：

每一個路徑都是一個遮蓋區塊，例如前腳遮蓋後腳。

咦～怎麼做？
真抱歉，沒有一鍵指令，每一塊布的路徑都是從第一個路徑使用鋼筆重新描繪成獨立區的。

說明

路徑與路徑部份重疊，是為了要讓布料與布料遮蓋處可以補裝處理陰影。
口袋和衣領是整體上唯一沒有被遮蓋的，因為他們在最上方。
金先生的左腳是整體屬於最下一層。
在路徑上的排列已經是這張圖片拆解區塊的正確順序。

獲得：8個彼此重疊的路徑，圈疊成金先生這套衣服。
======================================================================

步驟二、製作模板 - 可以瞬間換掉布料的模板

A. 為金先生的套裝製作八個圖層
目標是把每一塊獨立的布都變成一個圖層，8塊布組成金先生的衣裳。

------------
但是這階段我們得先建立一個稍後用來做布的新文件，這個範例我開的是1600x1600px，填上隨便顏色當作第一張布，然後立刻直接儲存成fabric.psd。(注意，這兩個文件建議存放在同一個地方)

獲得：fabric.psd文件
------------

1. 置入布料文件到圖層

現在回到原工作文件，用文件&>置入鏈接文件功能把剛剛的fabric.psd置入成一個圖層。
然後把這個從fabric.psd置入進來的圖層，直接複製8個，現在你有9個圖層。

為什麽需要這麽多圖層？
為了要把剛剛步驟一的8個路徑一一轉換成圖層。

回到剛剛的路徑面板，把8個路徑的其中一個路徑轉換成選取範圍。

(把路徑變成選取範圍：點選該路徑，拖到箭頭處)

有了選取範圍，然後在剛剛的8個新圖層中隨意挑出一個，點擊圖層面板最下方的遮罩功能，剛剛的選取範圍就會變成該圖層的獨立遮罩。

上面以後的結果如下：

這個圖層現在有一個獨立的遮罩。

2. 重複動作

重複進行前面A1的步驟，把8個來自fabric的圖層都分別套上步驟一那8個路徑作成的遮罩。

然後你大概會有這樣的結果(或者顏色與我的不同)

對，我們需要暗面來促成立體感。

B. 從原圖提煉出暗面

使用我們在步驟一得到的第一個路徑轉換成選取範圍，全選金先生的衣服。

確認現在圖層位置在原始圖層上，並且已經全選了金先生的衣服。按Ctrl+C拷貝，黏貼成為新的圖層，再把這個圖層移至到所有圖層上方，這個圖層長相這樣：

在這個教程中，這個圖層是Layer 6。

提示：這是原圖複製出來的，我們不直接改變它，但用他提取出模板。

再次提醒這個Layer 6 圖層必須放在目前所有工作圖層之上。我們現在要從這個原始圖上提取最自然的暗面、深色面、被遮蔽的部份。但我們不學苦逼的方式。

1. 先把圖層模式改成Multiply(正片疊底)

然後你會有左方的結果。(謝謝 @Thean qiu 提點這是正片疊底)

非常重要！正片疊底，是PS最被泛用的圖層模式之一，她會令圖層中明度越高的顏色越透明，越接近黑的顏色越不透明，選用這個模式，正是因為我們前面提到要從原圖中提取暗面，提取的方式是拿她當基礎圖層，再用調整圖層來改變她對下方圖層的影響。

2. 把陰影模板作成灰階

為了讓任何顏色的衣料套上時不會受到原照片的顏色影響，需要把陰影模板作成灰階。

使用圖層面板下方新增調整圖層的色相/飽和度工具，並且把飽和度降到最低。

你發現整張圖片都成灰階了，原來少做了一個動作，我們需要讓上一個降低飽和度的操作隻影響到一個圖層。按住alt鍵，把滑鼠移動到調整圖層和原圖層的中間，這時候滑鼠會變成一個轉彎的符號

(左鍵點擊後，圖層會變成右邊那樣)

這表示那個調整圖層只會影響到layer 6。

3. 調整黑白對比

我們需要在原圖上把黑白對比儘可能自然的提煉出來，使用圖層面板下方新增調整圖層的亮度/對比，這裡得注意，不是每張來源圖片都一種調整法的，我在題主的這個範例上用了最大亮度和稍微提高的對比。

現在我們的結果應該是這樣：

到這裡基本的模板做好了，但看不出，是因為布料沒做，我們在前面應急做的布料fabric.psd只是一個顏色。

插曲 - 製作可用的布料

作為布料材質，單色不能表示出布料的紋路，現在我們提前先試試套第一張布料。

我用了下面這張圖複製成布料，在剛剛的fabric.psd上保存。

(最後步驟會說明如何製作可用的布料。)

是的，只要在fabric.psd上保存成這樣即可

回到原來的金先生文件看看，暫時有了比較像樣的結果：

4. 獨立控制中間調

我不滿意過暗的整體，我預備把中間調的灰階加亮，所以我在layout 6 上又加了一個調整圖層 - 曲線，調整如下：

5. 局部調整最最黑的範圍

我又為了想把最黑的範圍整體的降低，開了第四個調整圖層 - 色階。調整如下：

這樣的色階看起來自然多了。

不過問題出來了，明明是重疊的兩塊布，看起來花紋是接合的，這必須要處理。

6. 微調圖層
在第二步驟的A部份，我們把衣服拆成8個區塊，是為了要讓這套衣服換了布料後看起來自然、科學一點，但我們從上圖金先生的衣服上看到兩塊布重跌在一起時，那布紋竟然接上了，這太不科學了，裝逼的我，不滿意這種結果！

重點首先要解鎖這8個圖層與其專屬遮罩的連結關係，這個動作是為了保持圖層遮罩的位置不變那麽我們移動布料時就不會把整片袖子都帶走了。

滑鼠移到那8個圖層上有鎖鏈的地方，點擊鎖鏈就可以解鎖。

然後8個圖層的結果是下圖這樣(每個圖層與他的遮罩中間沒有鎖鏈圖標)：

這樣一來用移動工具移動圖層時不會移動到該圖層的遮罩。
(確認點擊了圖層上的布料，而不是其遮罩)

然後，隨意的把口袋、衣領、右手和左邊衣服用十字移動工具移動看看。結果：

每一片布重疊的地方都沒有連續性，更自然了。(跟上一位金先生比較看看)

使用十字工具移動不成功？
解鎖後注意下：
1）解鎖
2）點擊圖層上的"圖"，使工作作用在圖上，而不是作用在遮罩上

7. 為模板補陰影

說明：為了做出可以適應任何亮色或暗色布料的模板，我們在前面的步驟二B的1,2,4,5中為金先生的暗色西裝做了四個調整圖層，原圖金先生的西裝是暗色，這四個調整圖層是針對暗色處理的，處理後的結果是我們失去一部分較淡色的陰影，我們現在要把他們都補回來這是為了模板可以儘可能適用於所有布料，我們拆分數個調整圖層的原因，是在當使用不同面料的布時，可保持自由調整出自然的結果！

我用了三個圖層穿插在那八塊布的圖層里，隨興地用黑色噴筆噴了幾下，看看前後差異：

(注意比較，很隨性噴的幾筆，這幾筆是必要的存在，要逼真就得更認真噴細節，別學我隨便噴噴)。

8. 替金先生把手帕補回

從原圖上直接取出，拷貝成一個圖層，放在八塊布圖層的最上方。(就是那樣做……。)

在原圖上選取手帕，拷貝、黏貼，移到上方。

現在金先生有手帕圖層了。

分析一下目前圖層

目前為止，我們已經完成金先生衣著的模板製作，交待一下目前的所有圖層：

小說明：模板製作到此已經基本上完成。

C. 三秒換布料的方法
除了當前這個psd以外，我們在步驟二A還做了一個fabric.psd(布料)，現在需要你打開fabric.psd文件，開新圖層，隨便畫上些甚什麽東西，保存，就會看到原文件上金先生的衣裝變了。如果你的計算機速度快，或許只需要一秒…
======================================================================

步驟三，製作布料

觀念： PS編輯里有個功能可以把圖像定義成可重複利用的圖案，把一個圖像定義成基礎圖案後再利用填色功能填滿該圖案，我們用這個兩個功能來製作布料。

在網上先找一些像這樣的布料素材，四面連續可無縫接合的。

(這是四張編排在一起的，不是一張，所以別直接拿來用阿)

範例：

在PS把一張四面連續的圖打開，確認沒有選取範圍的情況下，使用編輯&>定義圖案，為這塊布隨意起一個名字，保存。

開啟前面製作的fabric.psd文件(先確認下我們當時是開1600x1600px的文件)

開一個新圖層，編輯&>填充，出現面板：

1. 選擇"圖案"。
2. 選擇剛剛定義的那張布紋。
確認。

這時候PS會使用這個圖案把圖層連續填滿，像這樣：

這就是幫金先生的西服製作布料的方式，來源布料如果找不到四方連續的，那就得找一張完整且尺寸夠大的圖，要不，就得自己畫一張了。

- 完成 -
對答本題的說明
所有製作文件的時間都是花在做一個模板，真要簡單處理成一張結果當然不必分成這麼多區塊。
PS是後期，越好的來源越容易使用，題主給的圖還算不錯，明暗夠清楚，前天我就花一個小時做了模板，再用一個小時找了幾款纖維不一樣的布料，完成後先丟出六張不同布料成品圖(都包含在源文件里)，然後才開始照約定寫教程。看了我的源文件應該可以發現真沒花很多時間刻那模板，很多地方都是捉急帶過的。
-

問答 問：為什麼要這麼繁瑣，這樣那樣搞搞不就完成了嗎？
答：這是模板等級的應用，一個模板做完可以瞬間換布換料，上衣、褲子、袖子、領帶、口袋…都可以分別使用不同布料。
問：一些地方可以很簡單帶過，為什麼要細說，我都看糊塗了。
答：儘可能的讓初學者也能使用這教程做出東西羅。
問：我製作的布料文件明明用的是四方連續花紋，為什麼穿上後還是有明顯接邊？
答：您布料文件的尺寸相對於模特兒文件的尺寸可能過小了點，請參考此例下載文件中模特兒金先生與布料尺寸的相對比例。
問：為啥我下載後把布料文件fabric.psb改變了，金先生的衣裳沒有改變？
答：

1）首先確認為使用CC 2014以上版本。
2）下載後兩個文件得置放在同一個文件夾里，這時候改變布料文件才有效。
3）照前面步驟做了依然沒有效果？重新下載文件重來一次，文件大概被玩壞了(失去從屬關連關係)。
問：下載那文件為什麼是psb而不是psd？
答：是我儲存時選錯格式，開始時沒想到會分享源文件，又因為兩文件已經關聯起來我將錯就錯懶得改了。(psb與psd在使用上沒有差別，只是個強化版的psd。)

這個教程生出的兩個文件下載 PS_clothing_mockup.zip_免費高速下載

解壓縮後得出兩個文件：

mrjin.psd - 金先生在這兒
fabric.psb - 多款布料，每個圖層都是一個布料

這兩個文件必須放在同一個位置。

文件玩法

用PS打開兩個文件後，在fabric.psb的圖層上檢視別的布料，按圖層上的眼睛選擇一個想要的布料，儲存文件，然後金先生那個文件上的衣料就變了。
兩個文件是在步驟二A1的時候關聯起來的，任何時候你儲存fabric.psb，金先生的衣裳就改變。
每換一個布料，都可以用Layer 6上方的四個調整圖層來使布料的質感更貼近，不過我猜90%以上的布料素材是不必調整的，只需要點擊圖層眼睛決定是用上全部四層，還是只用到其中三層。
文件里圖層最上方多了三個在教程裡面沒提到的圖層，那是用來強化亮面的，上到下分為三個等級。L：輕量級，M：一般級，H：強化級。可以試試，這是一個亮面調整，使用的判斷建立在你對布料的觀感上，學一些素描課程體悟會比較深入。
四個調整圖層 + 三個針對亮面的分級圖層，可以滿足照片上金先生衣裳90%以上的布料素材。但對於金箔、銀箔、多數皮革類、塑膠面料的特殊衣料多半不適用，但你可以在Layer 6的上方建立其他調整圖層來玩玩。PS就是這樣玩的，對基礎美術的認識越深入能把結果玩得越好。

想看真正正統PS技術應用？

試試關注我，特別愛答PS高階應用，雖然絕大部分PS問題都問不對點，但問得好的問題我會盡量發揮。

哇感覺最高票的答案步驟好多。。我這邊給一個優化的解決方案、但它相對來說局限性也更大，對圖片的要求更大
這是我的原圖

花布的素材直接用了最高票的同學貼的素材

第一步對花布素材進行處理

打開花布素材適當裁剪（工具欄－裁剪）

接下來用到了製作3D無縫貼圖的一個技巧，使圖片最後被拼接起來的時候看不到明顯的縫隙
Filter &> Other &> Offset 調整適當的位移量（濾鏡 &> 其他 &> 位移）

這是調整完之後的貼圖，可以看到明顯的接縫，貌似圖片本來也有這麼兩條黃線

使用污點修復工具，Alt選擇一塊好的區域，然後塗抹在需要覆蓋的線段上（工具欄 &> 污點修復工具）

對於調整完的貼圖將它定義成圖案在Edit &> Define Pattern中（編輯 &> 定義圖案）

取一個厲害的名字

第二步選擇區域

打開原圖

通過 Select &> Color Range來選擇我們需要的區域（選擇 &> 色彩範圍）

用吸管選擇紅色的戰袍，調整Fuzziness和Range到合適的值，能看清楚明部暗部（（多選中了一些其他區域，之後會做修正（容差範圍）

第三步填充圖案

新建一個Layer 在Edit &> Fill里填充我們剛剛製作好的圖案（編輯 &> 填充）

還可以在Option &> Script裡面調整圖案的大小比例混合模式（選項 &> 腳本）

填充完是這樣的我們還要進行一些修正和調整，使整體圖像的色相飽和度看起來和諧，填充完可以用橡皮擦去剛才不小心多填充的區域

第四步調整

在Image &> Adjustments &> Hue/Saturation裡面調整色相飽和度（圖像 &> 調整 &> 色相飽和度）

選擇紅色並降低飽和度（（如果想替換的衣服不是紅色的，在這裡就可以把它的飽和度減到最小，即黑白的

完成咯

先上成品圖，下午發小白級教程。

——更新教程——

咳咳，不要再私信我怎麼把她衣服換成透明的了！關鍵是換成透明的也沒用呀，要是能這麼玩兒，還要種子幹嘛！

為了共建和諧社會，我決定拿奧觀海同志來做教程，這個妹子，你們下去自己玩吧。

註：我是先做好PSD文件再回過頭說明整個製作過程的，所以大家只要明白我每一步的文字說明就好，不要被圖片里的後續步驟給嚇到，我沒點亮小眼睛的步驟都不用管。每三步我放一張清晰大圖。

鏈接：http://pan.baidu.com/s/1pLSrjqr 密碼：uytb

這是觀海大花布的PSD文件，可以先下載下來，對比著看教程，效果會更好。

首先你需要觀海同志一枚，花布兩塊兒。

一、養成好習慣，上來先複製一層背景；

二、複製兩層大花布，並分別調整圖層模式為「疊加」和「柔光」，柔光圖層適當調整透明度，根據圖片靈活選擇，沒有統一標準，以花布顏色稍稍飽和為佳，因為後面還要調的，具體到這個圖片，我調的是55%；

三、建立自然飽和度調整圖層，降低剛剛稍稍過飽和的花布顏色，同樣的，並沒有統一的數值標準，根據圖片而異，自己看著舒服就行，具體到這個文件，我調的是-15；

前三步結束後，大致是這個效果：

四、（這一步可有可無）建立曲線調整圖層，稍稍改變下明暗關係。純粹是我個人強迫症，總覺得有哪兒不舒服；

五、由於我們給觀海同志穿的是藍色花布，所以給他加一個濃度為15%的照片濾鏡，讓藍色看起來舒服一點；

六、建一個「組」，把剛剛那一堆步驟都裝進去，因為這都屬於對外套的處理，統一放在一個「組」里，後面處理起來方便一些，不要在意我後面那個叉叉，那只是暫時停掉我早就做好的蒙版而已，下一步就沒有了；

前六步結束後，大致是這個效果：

七、給組加一個蒙版，仔細的把外套擦拭出來；

八、黑色素過重，添加一個可選顏色調整圖層；

九、進一步處理，添加色彩平衡調整圖層；

前九步結束後，大致是這個效果：

十、扯兩塊紅色大花布，覆蓋觀海同志的領子和袖口，並調整圖層模式為「正片疊底」；

十一、用蒙版擦出，一定注意觀海同志的兩個袖子呀，這是重點，馬虎不得；

十二、建立「組2」，把這兩個部分塞進去；

前十二步結束後，大致是這個效果：

十三、蓋印所以可見圖層，使用camera濾鏡，微調高光和陰影，微調藍色的色相，微調粉紅色的飽和度，微調粉紅色的亮度，主要是讓觀海同志的藍色外套以及外套上的桃花更自然，調完之後用蒙版擦出；

十四、關於領帶，細心的小夥伴已經發現我講漏了，沒錯，它本來是這樣的；

十五、選擇「顏色替換工具」，刷上亮閃閃的紅色即可；

十六、全劇終。

——2016.05.04深夜更新——

答應了評論區今天更新，雖然忙成狗，零點前還是要更的，說到就要做到！

如果衣料顏色過深怎麼辦？提供兩種方法，所用素材如下：

一、如圖，布料顏色失真；

二、加強自然飽和度；

三、拉曲線；

四、OK；

五、第二種方法，以左圖為例，如圖，失真嚴重；

六、Ctrl+Shift+U取色；

七、加蒙版擦出來就好，只不過這種方法效果不及第一種好。

圖片截取自How To Cheat in Photoshop系列圖書
How to Cheat in Photoshop CC
中文版Photoshop CS5技法精粹 (豆瓣)類似的教程百度可以找到很多，我就不帖過來了……
photoshop 換衣服

我來交作業 多圖預警
我是看第一@Bard Tn的答案的接下來上圖多圖

原圖

怎麼做的呢就是看首票的答案，你認真看答案一定會的！！！首先金先生的右手那邊有瑕疵，還有光影什麼東西，細節我這個弄不來。
接下來是我遇到的問題及解決方法首先是那個路徑摳完然後複製八個，分成八部分。這八個路徑和第一個一模一樣對吧。首票答主說的很重要。所以，胳膊啊，我得刪好幾個描點，一直刪，一直刪。。。刪掉胳膊，停止，重新描。接下來袖口，又得刪，點點點。後來，其實選擇刪除描點的那個工具，然後框好多個，按delete就好了
還有這八個部分不用很精準，可重疊。還有，我們弄完後，答主Bard Tn從填充的變到畫布，我做這個圖就是把他分享的fabric置入進來啊！不然一跳到那我就傻眼了。最後就是我下了Bard Tn分享的。發現三秒變不了衣服。感謝他給我詳細解答！！！真的很感謝，畢竟也不熟。我晚上十一二點發給他的。他六點多就給回答了。六點多。。離題了
我發現他的還是變不了，但是我知道怎麼變那個兩個放在同一文件夾就不說了。
隨便選一個，右擊編輯內容，
接下來就會跳出fabric這個文件，選一個保存 OK！
感謝知友，我會好好學習！

正好看到類似的教程，順手做個勤勞的搬運工。

【東北大花終極教程】據說城裡人現在都這麼玩-UI中國