在 Photoshop 中為圖片加上陰影是五個控制項的操作:水平位移、垂直位移、模糊半徑、不透明度百分比,以及陰影顏色,全部透過圖層樣式對話框設定。瀏覽器版的Add Shadow to Image工具重現了完全相同的五個控制項——介於 -500 到 500 之間的整數像素位移、介於 0 到 250 像素的模糊半徑、介於 0 到 100 百分比的不透明度,以及六位數十六進位顏色——套用於本機的 JPG、PNG 或 WebP,然後將結果匯出為完整解析度的透明 PNG。陰影是使用瀏覽器的 Canvas API 繪製的——具體來說是 MDN 文件中記載的 CanvasRenderingContext2D shadowBlur 與 drawImage 方法——而畫布刻意放大,以免模糊與方向位移在原始影像邊緣被裁切。解碼、繪製、預覽渲染、PNG 編碼以及檔案下載,全部都在當前的瀏覽器分頁中完成,而不是在遠端伺服器上,這讓工作流程在視覺上等同於 Photoshop 的圖層樣式,同時省去為了快速製作縮圖、貼圖或產品模型而啟動 Adobe Photoshop 的麻煩。
Photoshop 的陰影:標準圖層樣式路徑
Photoshop 將陰影 (drop shadow) 暴露為圖層樣式,而標準路徑在近期版本中都相同:開啟圖層,執行 Layer > Layer Style > Drop Shadow,然後在對話框中設定控制項。這五個輸入與瀏覽器工具所暴露的控制項完全對應,所以你在本節學到的任何內容都可以原樣轉移。
- 在 Photoshop 中開啟影像,並確認要投射陰影的圖層已在 Layers 面板中選取。如果你的影像已經平面化,請先雙擊 Background 圖層將其轉換為一般圖層。
- 開啟 Layer > Layer Style > Drop Shadow,或在圖層名稱以外的區域雙擊以開啟 Blending Options,然後勾選 Drop Shadow 這一列。
- 設定 Blend Mode(通常為 Multiply)、精確的陰影顏色、Opacity 百分比、Angle(用來同時控制水平與垂直位移——0° 表示正下方)、以像素為單位的 Distance、Spread 百分比,以及以像素為單位的 Size(扮演模糊半徑的角色)。
- 點擊 OK 套用圖層樣式。Photoshop 會根據下方的圖層渲染陰影,你可以直接在文件視窗中讀取可見的位移。
- 匯出結果:File > Export > Export As,選擇 PNG,讓落在原始矩形外的陰影像素保持透明。
這就是正統的 Photoshop 路徑。如果圖層位於透明背景之上,Photoshop 會讓原始矩形外的陰影像素保持透明,這與瀏覽器工具複製的行為相同。這條正統路徑的代價,是啟動應用程式、開啟檔案、套用圖層樣式、再匯出的額外負擔——而當你只需要陰影本身時,瀏覽器版的本機工具可以跳過這些步驟。
何時可以跳過 Photoshop 來製作陰影
對於模型圖、縮圖、社群圖卡、貼圖以及簡報素材來說,為了單一個陰影而打開 Photoshop 實在太重了。應用程式必須啟動、檔案必須解碼、圖層樣式必須在透明畫布上渲染,還必須將平面 PNG 寫入磁碟。瀏覽器版的本機工具去除了這些負擔:從磁碟選取檔案、填入五個控制項、然後在同一個工作階段中下載結果,完全不需要上傳。你會得到相同的水平位移、垂直位移、模糊、不透明度與顏色輸入,以及相同的透明 PNG 輸出,差別只在於 Photoshop 不在這個循環中。
Add Shadow to Image:本機的替代方案
Add Shadow to Image工具接受一個本機 JPG、PNG 或 WebP,大小上限為 25 MiB,驗證輸入後,接著編碼出一張透明 PNG,其尺寸由原始大小加上為模糊與位移保留的邊距計算而來。這五個控制項與 Photoshop 的陰影輸入一對一對應:水平位移、垂直位移、模糊、不透明度,以及顏色。由於畫布是使用瀏覽器的 Canvas API 渲染,而不是透過第三方影像服務,檔案的像素資料從不離開你的電腦,而且不需要帳號或登入。
如何在本機為影像加上陰影
- 從你的電腦選擇一個本機 JPG、PNG 或 WebP。該檔案必須可被瀏覽器解碼,且大小不得超過 25 MiB;過大、不受支援或無法解碼的檔案會以可見的錯誤訊息被拒絕。
- 輸入水平位移與垂直位移,為介於 -500 到 500 之間的整數像素。正的水平值會將陰影向右移,負的水平值會將其向左移;正的垂直值會在下載的影像中將其向下移,負的垂直值會將其向上移。
- 輸入模糊半徑,為介於 0 到 250 之間的整數像素。這是套用於陰影邊緣的羽化量;0 會產生硬邊的位移複本。
- 輸入不透明度,為介於 0 到 100 之間的整數百分比。這控制了陰影像素在畫布上呈現的實心程度。
- 輸入陰影顏色,為精確的六位數十六進位值,例如#000000表示純黑,或#1a1a1a表示接近黑色的色調。
- 選擇 Add shadow。瀏覽器會將畫布擴張,以容納模糊加上方向位移,先以陰影狀態繪製來源一次,接著在沒有陰影的狀態下再繪製一次,然後將結果編碼為 PNG。
- 確認預覽下方所顯示的擴張後寬度、擴張後高度以及編碼後的檔案大小。如果來源或任何控制項變更,先前的結果會失效,其暫存的下載 URL 也會被撤銷。
- 下載 PNG。檔名是從來源衍生而來——例如,名為portrait.png的檔案會下載為portrait-shadow.png。
陰影控制項的範圍及其意義
每個控制項都有固定的數值範圍,超出範圍的輸入會在畫布配置之前通過驗證失敗。瀏覽器端的限制符合常見螢幕解析度下 Canvas 陰影渲染可實際接受的範圍,並讓擴張後的畫布維持在網站有界畫布預算之內。
| Control | Input type | Accepted range | What it does |
|---|---|---|---|
| Horizontal offset | Whole pixels | -500 to 500 | Positive moves the shadow right, negative moves it left. |
| Vertical offset | Whole pixels | -500 to 500 | Positive moves the shadow down in the downloaded image, negative moves it up. |
| Blur radius | Whole pixels | 0 to 250 | Feathers the shadow edge; 0 produces a hard-edged offset copy. |
| Opacity | Whole percent | 0 to 100 | How solid the shadow pixels render against the canvas. |
| Shadow color | Six-digit hex | #000000 to #FFFFFF | Tint applied to every shadow pixel before alpha is multiplied by opacity. |
這五個輸入都是整數或六位數十六進位,這讓結果可以重現:針對同一個來源重新輸入相同的五個值,總是會產生相同的擴張後尺寸與相同的陰影位置。預覽可能會縮放以符合頁面,但下載的 PNG 會保留由來源與陰影設定計算出的自然輸出解析度。
擴張後畫布大小的計算方式
輸出畫布刻意做得比來源大,以避免陰影在原始矩形邊緣被無聲地裁切。計算方式很明確:畫布的每邊保留兩倍模糊值,並把絕對方向位移加到陰影移動的那一邊。來源與其陰影之外的半透明像素會在 PNG 中保持透明,這正是匯出採用 PNG(而不是 JPG)的原因——超出原始矩形的陰影必須落在透明像素上,而 JPG 沒有 alpha 通道。
從工具的已記載行為所擷取的計算範例:一個 40 乘 20 的來源,搭配 8 像素的向右位移、4 像素的向上位移,以及 6 像素的模糊。
- 左邊距:2 × 模糊 = 12 像素。
- 右邊距:2 × 模糊 + 向右位移 = 12 + 8 = 20 像素。
- 上邊距:2 × 模糊 + 絕對向上位移 = 12 + 4 = 16 像素。
- 下邊距:2 × 模糊 = 12 像素。
代入尺寸公式:輸出寬度 = 12 + 40 + 20 = 72 像素,輸出高度 = 16 + 20 + 12 = 48 像素。原本的 40 乘 20 影像會依照方向控制項決定的位移,放置在這個較大的 72 乘 48 區域內,讓一般陰影不會在原本的影像邊緣被無聲地裁切。
瀏覽器陰影何時是正確的選擇
這個工具是為直接的光柵陰影所設計,輸入僅限於上述五個控制項。當你需要為產品模型圖、社群圖卡、App Store 截圖、貼圖、簡報縮圖或 UI 素材製作平面陰影,而該陰影屬於裝飾性質而非物理模擬時,它都能乾淨地對應。由於畫布已擴張以容納模糊加上位移,結果可以安全地放到彩色或攝影背景上,而不會在影像邊緣被裁切。
它明確不是設計用來逐位元比對 CSS 的 box-shadow 或 filter: drop-shadow 宣告。Canvas 的 shadowBlur 是瀏覽器的渲染效果,而不是印刷前製的測量值,因此精確的羽化像素在不同瀏覽器引擎之間可能略有差異。這個工具不會偵測主體、不會分離前景與背景、不會移除背景、不會模擬透視地板陰影,也不會重建攝影棚燈光。如果你的交付物需要上述任何一項,Photoshop 的圖層樣式或 3D 渲染器仍然才是正確的工具。至於其他情況——圍繞一張平面影像的快速裝飾性位移與模糊——本機瀏覽器路徑能以五個整數輸入和一張透明 PNG 下載,產生相同的視覺結果。
本機處理且無上傳
每個步驟都在當前的瀏覽器分頁中完成。來源檔案從本機磁碟讀取、由瀏覽器解碼、以你指定的陰影狀態繪製到 CanvasRenderingContext2D 上、再以無陰影狀態繪製第二次以保持可見的來源像素清晰,然後使用瀏覽器的 canvas toBlob 方法編碼回 PNG。像素從不離開這台機器:沒有上傳步驟、沒有遠端影像服務、沒有登入,也沒有該檔案的暫時性雲端儲存。無效的輸入類型、空檔案、解碼後過大的影像、不可能的輸出尺寸、解碼錯誤、缺少 Canvas 支援,以及 PNG 編碼失敗,每一項都會產生可見的錯誤,而不是損壞的下載。更換來源或任何控制項會讓先前的結果失效,並撤銷暫存的下載 URL,所以在重新渲染之後,無法再下載到舊的影像。
如需更深入的瞭解,請參閱Watermark Multiple Images Locally: One Image at a Time。
如需更深入的瞭解,請參閱How to Split GIF Into Frames in Photoshop。