你拍攝廣闊的風景,打開後屏幕,應用程式會給你一個方塊,上面有兩座最好的山被切斷。或者你截取圖表的螢幕截圖,飼料作物會刪除使圖表值得共享的軸標籤。圖片很好。框架形狀錯誤。
有兩種出路。您可以裁剪圖片以適應框架,也可以將整個圖片放在已經具有正確形狀的背景上。第二種方法稱為啞光,就是這樣 霧面產生器 建構:方形、肖像或故事形狀的畫布,將您的完整圖像放置在其中,放置在自身的模糊副本或純色上。本指南解釋了霧面何時擊敗裁剪、幾何形狀如何運作、填充、半徑和陰影設定在像素中的作用,以及為每個平台選擇哪個輸出大小。
TL;DR: 遮罩是異形照片所在的背景,因此無需裁剪即可發布。您可以將整個影像放入 1080 x 1080 或 1080 x 1350 幀中,而不是將 16:9 的影像削減為 1:1,並用模糊的照片副本或純色填充剩餘空間。 Matte Generator 在 HTML 畫布上執行此客戶端操作,具有 15 個平台預設、從 0 到 25% 的填充、圓角、可選的陰影以及 PNG、JPEG 或 WebP 匯出。它是免費的,沒有註冊,也沒有上傳任何內容。
什麼是遮光照片?
照片遮罩是圖片與其框架邊緣之間的邊界。這個詞來自相框,其中帶有切割窗口的墊板位於印刷品和玻璃之間,因此圖像不會延伸到相框邊緣。在社群媒體上,想法是一樣的,沒有紙板:"框架"是平台想要的縱橫比,而遮罩是任何填滿圖片所不填滿的空間。
遮罩的定義屬性是影像中沒有任何內容被刪除。您組成的每個像素都會保留在貼文中。交易是影像不再填滿整個圖塊,因此它在螢幕上比同一張照片的裁剪要小。
您應該使用遮罩還是裁剪影像?
當主體位於中間且邊緣是偶然時裁剪。當邊緣攜帶無法遺失的資訊時,請使用遮罩。這就是整個決定,值得故意做出,而不是接受上傳螢幕所做的任何事情。
| 情況 | 更好的選擇 | 為什麼 |
|---|---|---|
| 一個人的肖像,樸素的背景 | 農作物 | 主題填寫了更多的圖塊,並且在縮圖大小下閱讀得更好 |
| 廣闊的風景或全景 | 霧面 | 寬度是照片的點 |
| 圖表、程式碼或對話的螢幕截圖 | 霧面 | 標籤和邊緣帶有該資訊 |
| 必須顯示整個物件的產品鏡頭 | 霧面 | 切入產品違背了目的 |
| 兩端與人合影 | 霧面 | 農作物會帶走某人 |
| 細節鏡頭或紋理 | 農作物 | 沒有有意義的邊緣需要保護 |
| 您希望人們瀏覽的非常寬闊的全景 | 兩者都不是 | 而是將其分成旋轉木馬 |
如果你認為農作物終究是正確的,那麼 社群媒體圖片裁剪器 使用相同的平台預設處理決策的這一面。對於任何一種方法都太寬的全景, 旋轉木馬滾動產生器 將其切成可滑動的面板。
遮罩如何將影像放入正方形中?
擬合規則與 CSS 呼叫的規則相同 object-fit: contain,定義於 CSS 影像模組等級 3 規格:按最大係數縮放影像,使其寬度和高度保持在畫面內,然後居中。在程式碼中,計算是三行:
const scale = Math.min(frame.width / image.width, frame.height / image.height)
const width = image.width * scale
const height = image.height * scale
無論哪個尺寸首先擊中框架邊緣,都決定比例。寬圖像接觸左右邊緣,並在上方和下方留下條形。高圖像接觸頂部和底部,並在側面留下條形。霧面產生器首先應用填充,縮小框架,然後將其放入剩餘的內容中。
一個實數的工作範例
拍一張 1920 x 1080 風景照片 (16:9),然後將其放在 Instagram 方形預設 1080 x 1080 上,預設為 6% 填充。
- 填充是幀的 6%'較短的一側:每條邊 1080 x 0.06 = 64.8 像素。
- 影像剩餘空間為 1080 - (2 x 64.8) = 950.4 像素平方。
- 擬合比例較小,分別為 950.4 /1920 = 0.495 和 950.4 /1080 = 0.880,即 0.495。
- 影像的繪製寬度為 1920 x 0.495 = 950.4,高度為 1080 x 0.495 = 534.6。
- 它垂直居中:(950.4 - 534.6) /2 = 207.9,加上 64.8 填充,其頂部邊緣為 272.7 像素。
該工具在預覽下將其報告為 "放置在 1080 x 1080 幀內 950 x 535 處;。您可以以相同的方式檢查任何其他情況。
您應該選擇哪種輸出大小?
選擇您要發布的位置的大小,並記住,對於寬圖像,較高的框架不會使圖像變大。寬度就是限制它的。下表對兩張來源照片的擬合相同,在常見預設中填充了 6%。
| 預設 | 框架 | 1920 x 1080 風景畫於 | 1080 x 1920 電話肖像繪製於 |
|---|---|---|---|
| Instagram 廣場貼文 | 1080 x 1080 | 950 x 535 | 535 x 950 |
| Instagram 肖像貼文 (4:5) | 1080 x 1350 | 950 x 535 | 686 x 1220 |
| Instagram 故事或捲軸 (9:16) | 1080 x 1920 | 950 x 535 | 950 x 1690 |
| X 貼文圖片 (16:9) | 1600 x 900 | 1408 x 792 | 446 x 792 |
有兩件事很突出。對於風景照片,正方形和 4:5 肖像給出相同的圖像尺寸;肖像框架只會增加更多的霧面。因此,對於寬圖片,正方形是更整潔的選擇。對於高大的手機照片,4:5 肖像使圖像的高度比正方形高約 28%(1220 對 950 像素),這就是為什麼肖像是垂直拍攝更好的預設值。
工具中的完整預設清單涵蓋Instagram(正方形、肖像、風景、故事)、Threads(正方形、肖像)、Bluesky(提要圖像和正方形)、X(後圖像和摘要卡)、Facebook 提要、LinkedIn 提要、YouTube縮圖、Pinterest 標準引腳和Open Graph 連結預覽。平台更改其作物並重新編碼上傳,因此將其視為 "適合今天的內容"而不是保證。
霧面應該使用什麼背景?
該工具提供四種背景:影像的模糊副本、您選擇的純色、白色或黑色。模糊副本是預設的,通常是照片的最佳選擇,因為它在畫面中填入圖片'自己的調色板,而無需選擇顏色。
| 背景 | 看起來像 | 最好 | 小心 |
|---|---|---|---|
| 圖像的模糊副本 | 熟悉的 Instagram "填充&引用;看 | 照片、旅行、食物,任何色彩繽紛的東西 | 忙碌的圖像產生忙碌的背景 |
| 純色 | 圖像後面的平面卡 | 品牌帳戶、產品照片、標誌 | 選擇不與照片相抗爭的顏色 |
| 白色的 | 白牆上的畫廊印刷品 | 最少的提要,光模式下的螢幕截圖 | 光邊照片失去了邊界,沒有陰影 |
| 黑色的 | 電影院信箱 | 夜間鏡頭、底片劇照、深色 UI 截圖 | 黑邊照片失去了邊界,沒有陰影 |
模糊的背景是如何形成的
模糊的背景並不是對匹配顏色的猜測。這是你自己的圖像,被裁剪以填充整個框架,嚴重模糊並稍微變暗,清晰的圖像繪製在頂部。模糊使用畫布 filter 財產,記錄在案 MDN's CanvasRenderingContext2D。filter 頁面,其半徑隨框架縮放:較短邊的 6%,因此 1080 平方上有 65 個像素。
一個細節對品質很重要。畫布邊緣附近的模糊平均為外部的透明像素,從而在邊框周圍留下淺色邊緣。該工具透過將背景繪製得比每側的框架大 12%(1080 格上透繪 130 像素)來避免這種情況,因此模糊具有真實的圖像數據,可以採樣到邊緣。然後,12% 的黑色水洗會覆蓋頂部,從而保持清晰的主題閱讀作為主題。
填充、角半徑和陰影有什麼作用?
所有三種設定都是成比例的,因此它們在 1080 像素時看起來與在 1600 像素時相同。
填充 運行範圍為 0 到 25%,並根據框架和#39 進行測量;較短的一側。在 0 處,寬圖像接觸兩側邊緣,啞光僅顯示為上方和下方的條形:純信箱。 4% 到 8% 之間讀作故意邊框,而不會使圖片大幅縮小。較大的值適合報價卡風格的帖子,其中背景是設計的一部分。在 1080 平方中,每個百分點的填充都會從影像中刪除 21.6 個像素'可用寬度。
角半徑 從 0 到 50% 運行,並根據放置的圖像進行測量'較短的一側,而不是框架。以上面的橫向範例,影像高 534.6 像素,因此預設的 12% 半徑使每個角落四捨五入約 64 像素。 50% 時,短邊變成全半圓形,形成藥丸形狀。
掉落陰影 預設情況下處於開啟狀態。它是一個 28% 的黑色陰影,模糊了幀的 3%'較短的一側和向下偏移 1%,這在 1080 幀上意味著 32 像素模糊和 11 像素下降。它將影像與相似亮度的背景分開,這正是白色或黑色遮罩需要幫助的情況。
如何將照片逐步放在遮罩上
- 打開 免費霧面產生器 並透過丟棄檔案、點擊瀏覽或從剪貼簿貼上來新增影像。貼上是螢幕截圖最快的路線。
- 從分組的預設清單中選擇輸出大小。從 Instagram 方形開始拍攝寬幅照片,從 Instagram 肖像開始拍攝高幅照片。
- 選擇背景。保留模糊的照片副本;切換到純色並輸入十六進位值以進行品牌工作。
- 觀看預覽時調整填充、角落半徑和陰影切換。預覽畫布以實際輸出大小渲染,因此您看到的是您將獲得的檔案。
- 選擇格式並下載。該文件以您的原件命名
-matte補充道,所以beach.jpg成為beach-matte.png.
PNG、JPEG 或 WebP:您應該匯出哪種格式?
當結果具有透明或清晰的文字時匯出 PNG,當您想要每個平台都接受的小檔案時匯出 JPEG,當您想要最小的檔案並且目標支援它時匯出 WebP。 JPEG 和 WebP 的編碼品質為 92%。
| 格式 | 壓縮 | 保持透明度 | 典型用途 |
|---|---|---|---|
| 巴布亞紐幾內亞 | 無損 | 是的 | 螢幕截圖、透明遮罩上的徽標,將結果存檔 |
| JPEG | 有損,品質0.92 | 不,變平至不透明 | 照片發佈在任何平台上 |
| 網路P | 有損,品質0.92 | 是的 | 接受 WebP 的網站和平台 |
無論如何,大多數社交平台都會重新編碼您上傳的內容,因此匯出格式對於提要的重要性比對於您自己的副本更重要。如果您打算進一步編輯結果,請保留 PNG。如果上傳前文件需要更小,則 影像壓縮指南 更深入地瀏覽品質設定。
你能使用透明的 PNG 嗎?
是的,它非常適合徽標和剪紙產品鏡頭。透明 PNG 乾淨地放置在純色複合材料上,因此啞光成為在品牌方塊上放置徽標的快速方法。如果您需要先刪除背景,則 背景去除指南 涵蓋該步驟。將結果匯出為 PNG 或 WebP 以保持文件的透明度; JPEG 沒有 alpha 通道,會將其扁平化。
遮罩會降低影像品質嗎?
不,只要來源大於其繪製的空間。輸出預設為1080像素或更寬,典型的手機照片長邊為3000至4000像素,因此影像縮小,不會失去任何可見內容。畫布以高品質的平滑繪製它。
一個例外是一個小來源。如果您將 600 x 400 影像放入 1080 平方且填充率為 6% 的方塊中,則必須將其縮放至 950 x 634,大約是 1.58 倍,並且由於任何放大都會出現的原因,它會看起來很軟。該工具無法添加文件中從未包含的細節。如果您的來源較小,請減少填充或選擇較小的預設,以便比例因子保持在接近 1 的位置 圖像調整大小指南 解釋了為什麼升級會變得模糊以及何時可以接受。
常見錯誤和錯誤訊息
有些問題經常出現,足以說明問題。
- &引用;該文件不是圖像。&引用; 該工具在解碼之前檢查檔案's 報告的 MIME 類型。在此步驟中,錯誤拖入的 PDF 或文件將被拒絕。
- &引用;該圖像無法讀取。&引用; 該文件聲稱是圖像,但瀏覽器無法解碼它。這種情況發生在下載損壞以及特定瀏覽器不支援的格式的情況下。 dropzone 列出了 PNG、JPEG、WebP、GIF 和 AVIF; iPhone 上的 HEIC 照片通常需要先轉換。
- 霧面看起來是灰色的而不是彩色的。 您可能選擇了純色選項並保留預設的淺灰色。將背景切換回模糊副本。
- 白色影像消失為白色霧面。 打開陰影,添加一點填充,或切換到模糊的背景。
- 帖子仍然被裁剪。 您匯出的預設與您發布的位置不符。作為 Instagram 提要貼文上傳的 1200 x 630 Open Graph 影像將被裁剪,因為 1.91:1 僅被接受為橫向貼文。
- 下載不會開始。 下載量計入每日使用限制。當達到限制時,工具會顯示訊息而不是檔案。
有什麼上傳的嗎?
否。 使用本機物件 URL 讀取影像,並在 HTML 上合成 <canvas> 瀏覽器標籤中的元素,並使用畫布編碼到檔案 toBlob 中描述的方法 WHATWG HTML 畫布規格. 沒有影像資料被傳送到伺服器、儲存或記錄。頁面載入後,它會繼續工作,網路會斷開。僅使用追蹤記錄您使用的預設、背景和格式,而不是圖像。
線上霧面產生器的替代方案
瀏覽器工具是多種路線之一。
- 平台'自己的適合選項。 一些上傳螢幕,Instagram'其中,可以用普通條將照片放入畫面內,而不是裁剪它。它很快,但你很少或根本無法控制背景、填充或陰影。
- 電話照片編輯器。 許多圖庫應用程式和編輯應用程式都有一個 "fit"或 "無裁剪和報價;背景模糊的模式。它們非常適合手機上的單張照片,結果因應用程式而異。
- 桌面設計軟體。 Photoshop、Affinity 或 Figma 提供完全控制,包括精確的像素位置。它們需要更長的時間並且需要安裝軟體。
- 命令列。 ImageMagick 可以將影像填充到固定大小
-gravity center -extent 1080x1080,這適合伺服器上的批次作業。
客戶端方法的優點是它不需要安裝或帳戶,在任何作業系統上都可以使用,並將照片保留在您的裝置上。對於單一貼文或小批量通常是最快的選項。對於數百張圖像,腳本獲勝。
的 社群媒體工具中心 將相關實用程式列在一處,包括 照片卡產生器 對於報價和新聞卡以及 圖像浮水印 用於在發布之前添加徽標或信用。
