給截圖墊個背景,是讓它顯得成型最快的辦法。截圖不再是一塊光禿禿的方框,而變成了擺在檯面上的一件東西——四周有邊距,四角收軟,還帶點立體感。這篇講三種背景(漸層、純色、透明)分別在什麼時候用,以及怎麼做到這些又不用把截圖交給伺服器。
一個背景為什麼能改變全域性

裸截圖沒有邊距,跟它落到的地方也毫無分隔。加個背景,你就有了留白——截圖四周那圈顏色——它立刻就顯得是有意為之。再把截圖的角收圓、背後墊一層淡陰影,它就從背景上浮起來,而不是平貼著。這幾樣是配合著用的:背景是底,留白是喘氣的空間,陰影是立體感。
漸層背景

那些新品釋出、更新日誌裡的截圖之所以顯貴,靠的就是一道柔和的雙色漸層。它把留白填成一層淡淡的顏色,把視線引向截圖,又不跟它搶戲。想讓圖帶點釋出會或頭圖那股勁兒、有點能量,就用漸層。
把截圖拖進畫布,挑一個預設漸層,調留白直到那圈顏色看著勻稱。預覽實時在變,匯出 PNG 之前你就能看清整張的搭配——截圖、圓角、陰影、背景。
純色背景
純色是更穩、更貼品牌的選擇。手上有個品牌色、想讓截圖乾乾淨淨地坐在裡頭時,一塊純色能把注意力全留在截圖上,顯得是有意為之而不是花哨。文件、正經的公告,或者一組需要彼此看著協調的圖,用它最穩。
透明背景
把背景設成透明,匯出的 PNG 就把留白那圈留空,而不填顏色。當你不打算在這兒把圖做完——而是要把這張帶圓角、帶陰影的截圖拿進 Figma、Keynote、縮圖或你自己的排版裡,擺到手頭已有的背景上時,要的就是它。留白、圓角、陰影都保留,消失的只是陰影背後的填色。它最靈活,因為它把最後那層底子交還給了你。
留白、圓角和陰影
不管你選哪種背景,三個控制元件決定最後的樣子:
- 留白決定截圖四周留多少顏色。留白多,截圖顯得更小、更講究;留白少,就貼得近、更密實。
- 截圖的圓角把硬邊收軟。小圓角顯精緻,別收太狠。
- 柔和陰影把截圖和背景分開。陰影要淡,夠立體又不顯笨重。
你還能把匯出鎖成固定畫幅——自動、16:9、4:3、1:1、3:4——留白會把畫框補滿來配合,匯出的圖不管發到哪兒都合適。
全程都在你自己機器上
拼圖是在你瀏覽器的畫布上完成的,截圖不會被上傳。這件事比聽起來要緊:一張截圖裡可能有一條私信、一張發票、一個後臺,或者位址列裡的一段 token。加個背景,不該等於把這些送去伺服器——而這裡確實沒有:不上傳、不註冊,頁面載入完之後離線也能用。
有句實話:它只加漸層、留白、陰影這套樣子,別的沒有。它不會給截圖套上瀏覽器或手機邊框那種 mockup,也不加箭頭和標註。要給單張截圖墊一個乾淨的背景,它乾的正好就是這件事。
