這篇文章是我參考 YouTube 上某大神的 Photoshop 影片，並親自操作拆解後的完整中文解說，教你用 Photoshop 進階製作出商品展示圖。從橢圓形背景、陰影製作、內光暈特效、去背到漸層處理，適合電商經營者與設計進階者練習！
Youtube 影片標題:
[How to make shoes web banner design | Photoshop Tutorial]
[How to make shoes web banner design | Photoshop Tutorial]
Youtube 原創作者 up主:
影片網址:https://www.youtube.com/watch?v=ATouRwIFpXQ
------------------------------------------------------------------------------------------------------
一開始建立一個新檔案，開啟適用於製作網頁大小的 1920x1080像素工作區域的白色畫布檔案，接著我們需要一些參考線幫助我們在後續排版時能夠注意到不要太靠近畫布邊緣的四周(指字體排版時不要超出參考線)，為了設立參考線，我們點選上方面板的「檢視/新增參考線配置」， 在裡面設定成邊界勾選起來，邊界上下左右的皆設為50像素，確定後便關掉了功能設置的面板。開始製作Banner我們可以先填入我們所希望的底色，我們現在點選圖層裡目前唯一的圖層，即白畫布圖層，我們點選了以後 ，點擊該附近的工具「建立新填色或調整圖層」長這樣，示意 - (圖1) ，點擊裡面的「漸層」，跳出功能面板後，我們可以看到是為了設置漸層並進行填色，首先面板上角度(A) : 將其調整成0°， 可以見其面板上圖示改變，示意 - (圖2) (這可使漸層為水平漸層方向)，然後接著點進面板上的功能「漸層」， 會跳出漸層編輯器，下面有可視化的漸層軸，像是長這樣示意 - (圖3)，下方的這兩個方形即可調整色彩的顏色，上方兩個方形則為控制及調整顏色的不透明度值，在「漸層編輯器」裡面做完動作後，按下確定，會返回剛剛前一頁的面板， 即''漸層填色''，且能調整漸層角度的頁面，在此時我們也能透過游標滑鼠箭頭去拉動我們PS作圖的畫紙，透過左右的水平拉動可以稍微改變漸層色整個在畫面上的位置。
接著我們使用左側面板工具裡的「橢圓工具」，在畫布上按一下滑鼠左鍵，會出現建立橢圓參數面板，在此時打上1408 x 1408像素，立即生成一圓形，在PS裡的右側面板中的「內容」裡，我們可透過調整外觀參數功能改成想要的圓形外觀，像此時可將''筆畫''該項調成像是長這樣: 示意 - (圖4)，即關閉筆畫外框，在另一該項''填色''可點入利用檢測器選到我們想要的顏色。
接著把橢圓移到畫布上我們想要的位置，為了使橢圓增添一些效果，我們可以在PS右下的圖層工具列附近找到「增加圖層樣式」，點擊效果「內光暈」套用後會跳出功能參數面板，可以看到面板的左側我們已有勾選了「內光暈」，現在將參數中的''混合模式''切換到下拉「加亮顏色」(Color Dodge)，不透明度:35%，成份的欄位裡技術 : 較柔，來源: 邊緣，填塞: 5%，尺寸: 100像素。再接著把參數左側面板上的「陰影」勾選起來，右邊參數中的''混合模式''切換成「色彩增值」(Multiply)，不透明度: 27%，角度: 180度，間距: 15像素，展開: 0，尺寸35像素，按確定後關閉了面板。
於影片中▶ 2分13秒： 左右側圖層面板上對著我們的橢圓形所在的該圖層上，立即滑鼠右鍵選功能「轉換為智慧型物件」，然後把此智慧型物件所在圖層多複製一層出來， 此時我們已有兩個橢圓形物件圖層了，(複製一層是多一個保障， 因為接著我們要在橢圓圖層上刷出漸層透明感)，將一圖層眼睛關閉，只留一個圖層可視即可，對該看得見的橢圓形使用「增加圖層遮色片」，接著用左側工具裡的「漸層工具」， 在遮色片功能內在橢圓圖形上面拉前景色為黑色的刷淡橢圓原先的色彩，變成下半部有種消失的漸層感，使色塊有了延伸的感覺。
▶ 2分13秒：把鞋子圖片置入PS中，因為鞋子圖的底色目前有白底，我們須做去背， 對該圖層右鍵「點陣化圖層」選取，接著我們在附近的面板上有一個「內容」點入我們可以設定調整參數內容，我們看見了有一欄位「快速動作」下有''移除背景''按鈕，點下後便去除掉背景，只剩下鞋子產品了。
▶ 3分21秒：這時將鞋子圖層再複製一圖層出來，並對該圖層點擊: 示意 - (圖5) ，內有「色階」點下後，去內容面板內透過拉動灰、白、黑三軸使鞋子產品照，鞋底陰影更寫實逼真。在畫面中多個橢圓色塊同樣按照第一個橢圓的製作方法，使之漸層過渡到透明的感覺。
▶ 5分02秒：為了製作出產品鞋子後面的陰影，來襯托，因此我們想辦法用快速選取工具或套索工具框選出完整的鞋子輪廓使之呈選取狀態有著閃爍的虛線線段，接著新增一新圖層(空白的)在此圖層上仍有鞋子輪廓的選取狀態虛線，立即點擊: 示意 - (圖6)裡的「純色」功能，跳出面板可選取想要的顏色，填色完成後，得到一個內部填入了黑色的鞋子形狀，它置於原先鞋子產品照的後面 (即產品鞋照圖層在上，之後的陰影在下)，要使黑鞋子成為霧感的陰影景深→Fliter濾鏡(PS面板上方) / blur模糊 / Gaussian blur高斯模糊，若跳出需轉換為智慧型物件的按鈕 請按下，效果參數調至23.5像素，我們還能調整圖層整個的透明度，使陰影符合我們自己想要的感覺。
▶ 5分33秒：排版時想製作顯眼的圖形 內有排版字樣，可用橢圓工具+鍵盤Shift+滑鼠左鍵拉動拉出正圓形，在內容面板中調整效果參數設定→「外觀」 欄下有「填色」可點入填色，甚至可填漸層色彩，''筆畫'': 示意 - (圖7) 既可選擇外框筆畫的顏色，包括粗細(透過拉動軸來設定粗細多少像素) 在6分51秒，置入一去背好的ICON元件圖片，到PS軟體的右下工具欄找到 ''fx''(增加圖層樣式)裡的「Color overlay顏色覆蓋」， 在參數設定功能中看到''混合模式:正常'' 旁邊可以選取設定覆蓋的顏色。接下來持續排版字樣。
▶ 8分20秒：若要製作出形狀: 示意 - (圖8) 的線條或矩形填色塊，須點擊''圓角矩形工具''然後在空白處滑鼠左鍵一下，出現能自行打上參數產生矩形，半徑，及圓角的弧度也可自行打參數調整，此處設定 WxH: 150像素 x 50像素，半徑25像素。字都排完後，即完成。
實際按教程學習，快速復刻後範例成果:
筆記
謝謝看到這裡。
*二次拆分解析來自-C_seven
本篇摘要: Youtube原影片設計步驟全程拆解。用中文分析Youtube大神在教程裡，如何進階從頭到尾做出一張商品展示頁！使用PS的幾何形工具也能做出顯眼的展示橫幅。
