広い風景を撮影し、投稿画面を開いて、アプリはあなたに2 つの最高の山が切り取られた正方形を提供します または、チャートのスクリーンショットを撮り、フィードクロップがチャートを共有する価値を作った軸ラベルを削除します 絵は問題ありません フレームは間違った形です。
2 つの方法があります。フレームに合わせて写真をトリミングすることも、すでに適切な形状をしている背景に全体像を置くこともできます。 2 番目のアプローチはマットと呼ばれ、それがその方法です マットジェネレータ ビルド: 正方形、ポートレート、またはストーリー型のキャンバスの内部に、自分のフルイメージが配置され、ぼやけたコピー自体または単色の上に配置されます。このガイドでは、マットがクロップに勝つとき、ジオメトリがどのように機能するか、パディング、半径、影の設定がピクセル単位で何を行うか、各プラットフォームでどの出力サイズを選択するかを説明します。
tl;dr: マットとは、オフシェイプの写真が収まる背景なので、切り取られずに投稿できます。 16:9 の画像を1:1 に切り下げる代わりに、1080 x 1080 または1080 x 1350 フレームの中に画像全体を収め、残りのスペースを写真のぼやけたコピーまたは単色で埋めます。 Matte Generatorは、15 のプラットフォームプリセット、0 から25% のパディング、丸みを帯びた角、オプションのドロップシャドウ、PNG、JPEGまたはWebPエクスポートを使用して、HTMLキャンバス上でこのクライアント側を行い、無料でサインアップはなく、何もアップロードされません。
フォトマットとは何ですか?
写真のマットは、絵とそのフレームの端の間の境界です。この言葉は、カットされた窓のあるマットボードがプリントとガラスの間に位置し、画像がフレームの端まで走らないようにする写真フレーミングに由来しています。ソーシャルメディアでは、ボール紙なしでもアイデアは同じです。 "frame" はプラットフォームが望むアスペクト比であり、マットは絵が持たないスペースを埋めるものです。
マットの決定的な特性は、画像から何も削除されないことです。構成したすべてのピクセルは投稿に残ります。取引は、画像がタイル全体を満たさなくなるため、画面上で同じ写真の切り抜きよりも小さくなるということです。
マットを使用するか、画像をトリミングする必要がありますか?
被験者が真ん中に座り、エッジが偶発的であるときに切り取ります エッジがあなたが失うことができない情報を運ぶとき、マットを使用してください それが全体の決定であり、それはアップロード画面が何をするかを受け入れるのではなく、意図的に行う価値があります。
| 状況 | より良い選択 | なんでや |
|---|---|---|
| 一人の人物像、地味な背景 | 作物 | 被写体はタイルをより多く埋め、サムネイルサイズで読みやすくなります |
| 広い風景やパノラマ | マット | 幅は写真のポイントです |
| チャート、コード、または会話のスクリーンショット | マット | ラベルとエッジには情報が記載されています |
| オブジェクト全体を表示する必要がある製品ショット | マット | 製品に切り込むと目的が無効になります |
| 両端に人が写っている集合写真 | マット | 作物は誰かを取り除きます |
| ショットや質感の詳細 | 作物 | 保護する意味のあるエッジはありません |
| 非常に広いパノラマを人々にスワイプしてもらいたいと考えています | どちらでもない | 代わりにカルーセルに分割します |
結局のところ、作物が正しいと判断した場合は、 ソーシャルメディア 画像 クロッパー 同じプラットフォームプリセットで決定のその側を処理します。どちらのアプローチにも広すぎるパノラマの場合、 カルーセルスクロールジェネレータ スワイプ可能なパネルにスライスします。
マットはどのように正方形に画像をフィットしますか?
フィッティング ルールは CSS 呼び出しと同じです object-fit: contain、 で定義される CSS 画像モジュール レベル 3 仕様: フレーム内の幅と高さの両方を保持する最大の要因で画像をスケールしてから、中央にコード内の計算は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) を撮り、デフォルトの 6% パディングで Instagram スクエア プリセット 1080 x 1080 に置きます。
- パディングはフレームの 6%'s 短辺: すべてのエッジで 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% のパディングを含む 2 枚のソース写真に対して同じフィット感を示しています。
| プリセット | フレーム | 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 ストーリーまたは Reel (9:16) | 1080 x 1920 | 950 x 535 | 950 x 1690 |
| X 投稿画像 (16:9) | 1600 x 900 | 1408 x 792 | 446 x 792 |
2 つのことが際立っています。 landscape 写真の場合、正方形と 4:5 のポートレートは同一の画像サイズを与えます; ポートレート フレームはマットなサイズを追加するだけです。そのため、幅の広い写真の場合、正方形はより整然とした選択になります。背の高い携帯電話の写真の場合、4:5 のポートレートは正方形よりも約 28% 高い高さ (950 ピクセルに対して 1220) を画像に与えるため、縦長のショットのデフォルトではポートレートの方が適しています。
ツールの完全なプリセット リストには、Instagram (正方形、縦向き、横向き、ストーリー)、スレッド (正方形、縦向き)、Bluesky (フィード画像と正方形)、X (投稿画像と要約カード)、Facebook フィード、LinkedIn フィード、YouTube サムネイル、Pinterest 標準ピン、および Open Graph リンク プレビューが含まれます。プラットフォームは作物を変更し、アップロードを再エンコードするため、これらを保証ではなく "what fits today" として扱います。
マットはどのような背景を使用する必要がありますか?
このツールは 4 つの背景を提供します。画像のぼやけたコピー、選択した単色、白、または黒です。ぼやけたコピーはデフォルトであり、通常は写真に最適な選択です。なぜなら、フレームを画像で埋めるからです'色を選択する必要がなく、独自のパレットを使用します。
| 背景 | のようですね | に最適 | 注意してください |
|---|---|---|---|
| 画像のぼかしコピー | おなじみのInstagram "fill" 見る | 写真、旅行、食べ物、カラフルなものなら何でも | 忙しい画像は忙しい背景を生成します |
| ソリッドカラー | 画像の後ろにある平らなカード | ブランドアカウント、商品ショット、ロゴ | 写真と戦わない色を選択してください |
| ホワイト | 白い壁にギャラリープリント | 最小限のフィード、ライトモードのスクリーンショット | 影がないと光刃の写真は境界を失います |
| 黒 | シネマ レターボックス | ナイトショット、フィルムスチール、ダークUIスクリーンショット | 暗黒エッジの写真は影なしで境界を失います |
ぼやけた背景がどのように作られるか
ぼやけた背景は、一致する色での推測ではありません それはあなた自身の画像であり、フレーム全体を満たすためにトリミングされ、重くぼやけ、わずかに暗く、上に描かれた鋭い画像で、ぼやけはキャンバスを使用しています filter 財産、文書化されています MDN& #39; s CanvasRenderingContext2D.filter ページ、およびその半径はフレームとともにスケールします: 短い辺の 6% なので、1080 の正方形に 65 ピクセルです。
品質には 1 つの詳細が重要です。キャンバスの端近くのぼかしは、その外側から平均して透明なピクセルで表示され、境界線の周りに淡い縁が残ります。ツールは、背景をフレームより 12% 大きく描くことで (1080 の正方形に 130 ピクセルのオーバードロー)、そのぼかしには実際の画像データが端までサンプリングされることを回避します。その後、12% の黒いウォッシュが上部を通過し、被写体の鋭い読み取り値が被写体として維持されます。
パディング、コーナー半径、シャドウは何をしますか?
3 つの設定はすべて比例するため、1080 ピクセルでも 1600 ピクセルでも同じように見えます。
詰め物 0 から25% まで走り、frame& #39; sの短い側に対して測定される。 0 では、広い画像が両側の端に触れ、マットは上下の棒としてのみ示される: 純粋なレターボックス。 4% から8% の間で絵を大いに縮めることなく意図的な境界線として読む。 大きい値は背景が設計の一部である引用カード様式の投稿に合う。 1080 の正方形に、パディングの各パーセント点はimage& #39; sの利用できる幅から21.6 ピクセルを取除く。
コーナー半径 は 0 から 50% まで実行され、配置した画像に対して測定されます& #39; s 短い側, フレームではありません. 上の風景の例では、画像は 534.6 ピクセルの高さですので、デフォルトの 12% 半径は、約 64 ピクセル、各コーナーを丸めます.50% で短い側は完全な半円になり、丸薬の形を与えます。
ドロップシャドウ デフォルトでオンになっています。 frame' sの短い辺の3% のぼかしと1% の下向きのオフセットを持つ28% の黒い影で、1080 フレームでは32 ピクセルのぼかしと11 ピクセルのドロップを意味し、画像と同様の明るさの背景から分離します。 、これはまさに白または黒のマットが助けを必要とする場合です。
マットに写真を入れる方法、ステップバイステップ
- を開きます 無料のマットジェネレータ そしてファイルをドロップするか、クリックして閲覧するか、クリップボードから貼り付けることで画像を追加します。 「貼り付け」はスクリーンショットの最速ルートです。
- グループ化されたプリセットリストから出力サイズを選択します。 instagramの正方形から始めて、幅の広い写真と背の高い写真の場合はinstagramの肖像画を作成します。
- 背景を選択してください。 keep the blurred copy for photos; switch to a solid color and type a hex value for brand work.
- プレビューを見ながら、パディング、コーナー半径、シャドウのトグルを調整します。 preview canvas は実際の出力サイズでレンダリングされるため、表示されるファイルは取得されます。
- フォーマットを選択してダウンロードします。 ファイルは、とのオリジナルにちなんで名付けられました
-matteと付け加え、beach.jpgなるbeach-matte.png。
PNG、JPEG または WebP: どの形式をエクスポートする必要がありますか?
エクスポート PNG 結果に透明度やシャープなテキストがある場合、JPEG すべてのプラットフォームが受け入れる小さなファイルが必要な場合、および WebP 最小のファイルが必要な場合、および宛先がサポートしている場合、JPEG と WebP は 92% の品質でエンコードされます。
| フォーマット | 圧縮 | 透明性を保ちます | 通常の使用 |
|---|---|---|---|
| png | ロスレス | はいって | スクリーンショット、透明なマット上のロゴ、結果をアーカイブします |
| jpeg | 損失、品質 0.92 | いいえ、平らになって不透明になります | あらゆるプラットフォームに写真投稿 |
| ウェブP | 損失、品質 0.92 | はいって | WebPを受け入れるウェブサイトとプラットフォーム |
ほとんどのソーシャルプラットフォームは、とにかくアップロードしたものを再エンコードするため、エクスポートフォーマットは、フィードよりも自分のコピーよりも重要ではありません 結果をさらに編集する予定がある場合は、PNGを保持します アップロードする前にファイルを小さくする必要がある場合は、 画像圧縮ガイド 品質設定をさらに詳しく説明します。
透明なPNGを使用できますか?
はい、そしてそれはロゴやカットアウト製品のショットにうまく機能します 透明なPNGが単色の複合材料にきれいに配置されているので、マットはブランドの正方形にロゴを置くための迅速な方法になる 最初に背景を削除する必要がある場合は、 背景除去ガイド そのステップをカバーします。 pngまたはwebpとして結果をエクスポート ファイル内の透明性を維持します; JPEGはアルファチャネルを持っていないし、それをフラット化します。
マットは画質を低下させますか?
いいえ、ソースが描画されるスペースよりも大きい限り、出力プリセットは1080 ピクセル以上で、一般的な電話の写真は長辺が3000 から4000 ピクセルであるため、画像は縮小され、何も表示されないキャンバスは高品質のスムージングで描画します。
1 つの例外は小さなソースです。 600 x 400 の画像を6% のパディングで1080 の正方形に配置すると、950 x 634 までスケールアップする必要があり、約1.58 の係数であり、拡大が同じ理由で柔らかく見えるでしょうツールはファイルに一度もなかった詳細を追加できません。ソースが小さい場合は、パディングを減らすか、スケール係数が1 に近いままになるように小さなプリセットを選択します 画像のサイズ変更ガイド アップスケーリングがぼやける理由と、それが許容される場合について説明します。
よくある間違いとエラーメッセージ
いくつかの問題が頻繁に発生します。
- " そのファイルは画像ではありません。 " ツールは、デコードする前にファイルと #39; s が報告した MIME タイプをチェックします。 PDF または誤ってドラッグされたドキュメントは、このステップで拒否されます。
- " その画像は読み取れませんでした." ファイルは画像であると主張していますが、ブラウザはそれをデコードできませんでした これは破損したダウンロードで起こり、特定のブラウザがサポートしていないフォーマットで起こります。 dropzoneはPNG、JPEG、WebP、GIF、AVIFをリストします; iPhoneからのHEIC写真は通常、最初に変換する必要があります。
- マットはカラフルではなくグレーに見えます。 おそらく単色オプションを選択し、デフォルトのライトグレーのままにしたでしょう。背景をぼかしたコピーに戻します。
- 白いマットの中に白いイメージが消えます。 影をオンにするか、少しパッドを追加するか、ぼやけた背景に切り替えます。
- ポストはまだトリミングされます. エクスポートしたプリセットは、投稿した場所と一致しません。 1.91:1 は横向きの投稿としてのみ受け入れられるため、Instagram フィードの投稿としてアップロードされた 1200 x 630 Open Graph 画像はトリミングされます。
- ダウンロードが開始されません. ダウンロードは、1 日の使用制限にカウントされます。制限に達すると、ツールはファイルではなくメッセージを表示します。
何かアップロードされていますか?
いいえ 画像はローカルオブジェクトの URL で読み取られ、HTML 上で合成されます <canvas> ブラウザ タブの要素。キャンバスでファイルにエンコードされます toBlob で説明されている方法 WHATWG HTML キャンバス 指定。 image data はサーバーに、貯えられるか、または記録される送られていません。 page がロードされると、それは切断されるネットワークと働きます。 usage の追跡記録どのプリセット、背景およびフォーマットかだけあなたが使用しました。 、決してイメージ。
オンラインマットジェネレーターの代替品
ブラウザ ツールは、いくつかのルートのうちの 1 つです。
- プラットフォーム'独自のフィットオプション。 いくつかのアップロード画面, Instagram& #39; その中で, 無地のバーでフレームの内側に写真をフィットすることができます代わりにそれをトリミングします.それは迅速ですが, あなたは、背景を制御することはほとんどまたはまったくありません, パディングや影.
- Phone photo editors. 多くのギャラリーアプリや編集アプリには、 "fit" または " no crop" 背景がぼやけたモードがあります。これらは電話での 1 枚の写真にうまく機能し、結果はアプリによって異なります。
- デスクトップデザインソフトウェア. Photoshop、Affinity、または Figma は、正確なピクセル位置を含む完全な制御を提供します。時間がかかり、ソフトウェアをインストールする必要があります。
- コマンドライン. ImageMagick は、画像を固定サイズにパッドできます
-gravity center -extent 1080x1080、サーバー上のバッチジョブに合います。
クライアント側のアプローチの利点は、インストールやアカウントを必要とせず、どのオペレーティングシステムでも同じように動作し、デバイスを写真に保持することです 単一の投稿または通常最速のオプションである小さなバッチの場合 数百枚の画像の場合、スクリプトが勝ちます。
ザ・ ソーシャルメディアツールハブ を含む、関連するユーティリティを 1 か所にリストします フォトカードジェネレーター 見積書やニュースカードなど 画像 Watermarker 投稿前にロゴやクレジットを追加するため。
