Вы снимаете широкий пейзаж, открываете экран поста, и приложение предлагает вам квадрат с двумя лучшими горами отрезанными Или вы делаете скриншот диаграммы, и кормовая культура удаляет метки оси, которые сделали диаграмму достойной обмена Изображение в порядке. рамка неправильной формы.
Выход два Вы можете обрезать картинку, чтобы подогнать рамку, или вы можете поместить всю картинку на фон, который уже имеет правильную форму Второй подход называется матовым, и это то, что Матовый Генератор сборки: квадратный, портрет или холст в форме истории с вашим полным изображением, помещенным внутри него, на размытой копии самого себя или сплошной цвет. в этом руководстве объясняется, когда матовый бьет урожай, как работает геометрия, что настройки набивки, радиуса и тени делают в пикселях и какой размер вывода выбрать для каждой платформы.
TL;DR: Матовый - это фон, на котором сидит фотография не в форме, поэтому ее можно публиковать без обрезки. Вместо того, чтобы разрезать изображение 16:9 до 1:1, вы помещаете все изображение в рамку 1080 x 1080 или 1080 x 1350 и заполняете оставшееся пространство размытой копией фотографии или сплошным цветом. Матовый генератор выполняет эту клиентскую сторону на холсте HTML с 15 предустановками платформы, заполнением от 0 до 25%, закругленными углами, дополнительной тенью и PNG, JPEG или WebP-экспортом. Это бесплатно, без регистрации и ничего не загружается.
Что такое фотоматовый?
Фотоматограф - это граница между изображением и краем его рамки. слово происходит от обрамления изображения, где доска мата с вырезанным окном находится между отпечатком и стеклом, чтобы изображение не доходило до края рамки. в социальных сетях идея та же, без картона: "frame" - это соотношение сторон, которое хочет платформа, а матовый - это все, что заполняет пространство, которого нет на вашем изображении.
Определяющее свойство мата - ничего не удаляется из изображения Каждый пиксель, который вы сочинили, выживает в пост. торговля заключается в том, что изображение больше не заполняет всю плитку, поэтому оно меньше на экране, чем обрезка той же фотографии была бы.
Стоит ли использовать матовый цвет или обрезать изображение?
Обрезать, когда объект сидит посередине, а края случайны. используйте матовый, когда края несут информацию, которую вы не можете потерять. это все решение, и его стоит принять специально, а не принимать все, что делает экран загрузки.
| положение | Лучший выбор | почему |
|---|---|---|
| Портрет одного человека, простой фон | Культура | Субъект заполняет больше плитки и лучше читает миниатюры |
| Широкий пейзаж или панорама | Матовый | Ширина - это точка фотографии |
| Скриншот диаграммы, кода или разговора | Матовый | Метки и края несут информацию |
| Снимок продукта, на котором должен быть показан весь объект | Матовый | Разрезание продукта противоречит цели |
| Групповое фото с людьми на обоих концах | Матовый | Урожай кого-то удаляет |
| Детальный снимок или текстура | Культура | Нет значимого преимущества, которое можно было бы защитить |
| Очень широкая панорама, через которую люди хотят пройти | Ни | Вместо этого разделите его на карусель |
Если вы все-таки решите, что урожай правильный, то Обманщик изображений в социальных сетях обрабатывает эту сторону решения с помощью тех же предустановок платформы. Для панорамы, которая слишком широка для любого подхода, Генератор прокрутки карусели разрезает его на протираемые панели.
Как матовый вписывает изображение в квадрат?
Правило подгонки - это то же самое, что и CSS object-fit: contain, определенный в Модуль CSS Immod 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% рамки и #39;s более короткая сторона: 1080 x 0,06 = 64,8 пикселей на каждом краю.
- Пространство, оставшееся для изображения, составляет 1080 - (2 х 64,8) = квадрат 950,4 пикселя.
- Шкала соответствия меньше 950,4/1920 = 0,495 и 950,4/1080 = 0,880, то есть 0,495.
- Изображение нарисовано при 1920 х 0,495 = 950,4 ширины и 1080 х 0,495 = 534,6 высоты.
- Он центрирован вертикально: (950,4-534,6) /2 = 207,9, плюс набивка 64,8, ставит его верхний край на 272,7 пикселя.
Инструмент сообщает об этом в предварительном просмотре как & quot;размещено в 950 x 535 внутри рамки 1080 x 1080 & quot;. вы можете проверить любой другой случай таким же образом.
Какой размер вывода следует выбрать?
Выберите размер размещения, в котором вы публикуете, и помните, что для широкого изображения более высокая рамка не делает изображение больше Ширина - это то, что ограничивает его. Таблица ниже работает так же подходит для двух исходных фотографий, с 6% заполнения, через общие предустановки.
| Пресет | Рамка | пейзаж 1920 х 1080 года нарисован в | Портрет телефона 1080 х 1920 года нарисован по адресу |
|---|---|---|---|
| Пост площади Инстаграм | 1080 х 1080 | 950 х 535 | 535 х 950 |
| Портретный пост в Instagram (4:5) | 1080 х 1350 | 950 х 535 | 686 х 1220 |
| История Instagram или Reel (9:16) | 1080 х 1920 | 950 х 535 | 950 х 1690 |
| X изображение сообщения (16:9) | 1600 х 900 | 1408 х 792 | 446 х 792 |
Выделяются две вещи Для пейзажной фотографии квадрат и портрет 4:5 дают одинаковый размер изображения; рамка портрета только добавляет больше матового Так что для широких картинок квадрат - более аккуратный выбор Для высокой фотографии телефона портрет 4:5 дает изображению примерно на 28% больше высоты, чем квадрат (1220 против 950 пикселей), поэтому портрет лучше по умолчанию для вертикальных снимков.
Полный предустановленный список в инструменте охватывает Instagram (квадрат, портрет, пейзаж, сюжет), Threads (квадрат, портрет), Bluesky (изображение ленты и квадрат), X (изображение публикации и сводная карта), ленту Facebook, ленту LinkedIn, миниатюру YouTube, стандартный контакт Pinterest и предварительный просмотр ссылки Open Graph. Платформы меняют свои посевы и повторно кодируют загрузки, поэтому рассматривайте их как " что подходит сегодня иquot; а не как гарантию.
Какой фон следует использовать в матовом цвете?
Инструмент предлагает четыре фона: размытая копия изображения, сплошной цвет, который вы выбираете, белый или черный. размытая копия является по умолчанию и обычно лучшим выбором для фотографий, потому что она заполняет кадр с изображением и #39;s собственной палитрой без необходимости выбирать цвет.
| предыстор | похоже | лучше для | остерегаться |
|---|---|---|---|
| Размытая копия изображения | Знакомый Instagram & quot;fill& quot; смотреть | Фотографии, путешествия, еда, что угодно красочное | Занятые изображения создают оживленный фон |
| Сплошной цвет | Плоская карта за изображением | Счета бренда, снимки продукта, логотипы | Выберите цвет, который не борется с фотографией |
| Белый | Галерея печати на белой стене | Минимальные ленты, скриншоты в световом режиме | Светлые фотографии теряют свою границу без тени |
| Черный | Кинотеатр почтовый ящик | Ночные кадры, кадры из фильмов, темные скриншоты пользовательского интерфейса | Фотографии с темными краями теряют свою границу без тени |
Как делается размытый фон
Размытый фон - это не догадка в подходящем цвете. это ваше собственное изображение, обрезанное так, чтобы заполнить весь кадр, сильно размытое и слегка затемненное, с нарисованным сверху резким изображением. размытие использует холст filter имущество, задокументированное MDN's Страница CanvasRenderingContext2D.filter, и его радиус масштабируется с рамкой: 6% более короткой стороны, то есть 65 пикселей на квадрате 1080.
Одна деталь имеет значение для качества. размытие вблизи края холста в среднем в прозрачных пикселях снаружи его, что оставляет бледный ободок вокруг границы. инструмент позволяет избежать этого, рисуя фон на 12% больше, чем рамка на каждой стороне (130 пикселей перерисовки на квадрате 1080), поэтому размытие имеет реальные данные изображения для выборки вплоть до края. 12% черный размытие затем идет через верх, что удерживает резкий субъект читать как субъект.
Что делают набивка, радиус угла и тень?
Все три настройки пропорциональны, поэтому они выглядят так же при 1080 пикселях, как и при 1600.
набивка работает от 0 до 25% и измеряется против рамки's более короткая сторона.В 0, широкое изображение касается обоих боковых краев и матовый показывает только как полосы сверху и снизу: чистый почтовый ящик. между 4% и 8% читается как преднамеренная граница без сокращения изображения сильно. большие значения подходят для цитаты-карты стиль посты, где фон является частью дизайна. на 1080 квадрат, каждый процентный пункт заполнения удаляет 21,6 пикселей от изображения и #39;s доступная ширина.
Радиус угла работает от 0 до 50% и измеряется против размещенного изображения & #39;s более короткая сторона, а не кадр. с пейзажным примером выше, изображение имеет высоту 534,6 пикселей, поэтому радиус по умолчанию 12% огибает каждый угол примерно на 64 пикселя. на 50% короткие стороны становятся полными полукругами, давая форму таблетки.
Бросить тень находится на по умолчанию. это 28% черная тень с размытием 3% кадра и #39;s более короткая сторона и смещение вниз 1%, что на кадре 1080 означает 32-пиксельное размытие и 11-пиксельное падение. Он отделяет изображение от фона аналогичной яркости, что является именно тем случаем, когда белым или черным матам нужна помощь.
Как поставить фотографию на матовый, шаг за шагом
- откройте генератор свободного мата и добавьте свое изображение, отбросив файл, щелкнув, чтобы просмотреть, или вставив из буфера обмена.Вставить - самый быстрый маршрут для скриншотов.
- Выберите выходной размер из сгруппированного предустановленного списка Начните с квадрата Instagram для широких фотографий и портрета Instagram для высоких.
- Выберите фон. сохраните размытую копию для фотографий; переключитесь на сплошной цвет и введите шестнадцатеричное значение для работы бренда.
- Настройте заполнение, радиус угла и тень переключаются во время просмотра предварительного просмотра. холст предварительного просмотра отображается в реальном размере вывода, поэтому вы видите файл, который вы получите.
- Выберите формат и скачать. файл назван в честь вашего оригинала с
-matteдобавлено, такbeach.jpgстановитьсяbeach-matte.png, йо-
PNG, JPEG или WebP: какой формат следует экспортировать?
Экспортируйте PNG, когда результат имеет прозрачность или четкий текст, JPEG, когда вам нужен небольшой файл, который принимает каждая платформа, и WebP, когда вам нужен самый маленький файл и пункт назначения поддерживает его. JPEG и WebP кодируются с качеством 92%.
| формат | Сжатие | Сохраняет прозрачность | Типичное использование |
|---|---|---|---|
| png | без потерь | да | Скриншоты, логотипы на прозрачном мате, архивирование результата |
| неправильный | Потерян, качество 0,92 | Нет, плоские или непрозрачные | Фотопосты на любой платформе |
| webp | Потерян, качество 0,92 | да | Веб-сайты и платформы, принимающие WebP |
Большинство социальных платформ в любом случае повторно кодируют то, что вы загружаете, поэтому формат экспорта имеет меньшее значение для ленты, чем для вашей собственной копии. Если вы планируете редактировать результат дальше, сохраните PNG. Если перед загрузкой файл должен быть меньше, Руководство по сжатию изображений более подробно просматривает настройки качества.
Можете ли вы использовать прозрачный PNG?
Да, и это хорошо работает для логотипов и вырезать выстрелы продукта. прозрачный PNG, помещенный на сплошной цвет композиты чисто, так что матовый становится быстрым способом поставить логотип на фирменный квадрат Если вам нужно удалить фон сначала, то руководство по удалению фона охватывает этот шаг. Экспортируйте результат как PNG или WebP, чтобы сохранить прозрачность файла; У JPEG нет альфа-канала, и он сгладит его.
Матовый цвет снижает качество изображения?
Нет, пока источник больше пространства, в которое он втягивается, Пресеты вывода составляют 1080 пикселей или шире, а типичная фотография телефона составляет от 3000 до 4000 пикселей на его длинной стороне, поэтому изображение уменьшается, что не теряет ничего видимого. холст рисует его с высококачественным сглаживанием.
Единственным исключением является небольшой источник, Если вы поместите изображение 600 x 400 в квадрат 1080 с заполнением 6%, его необходимо масштабировать до 950 x 634, коэффициент около 1,58, и он будет выглядеть мягким по той же причине, по которой любое увеличение делает. Инструмент не может добавить детали, которых никогда не было в файле. Если ваш источник небольшой, уменьшите заполнение или выберите меньший предустановку, чтобы масштабный коэффициент оставался близким к 1.The руководство по изменению размера изображения объясняет, почему масштабирование размывается и когда это приемлемо.
Распространенные ошибки и сообщения об ошибках
Несколько проблем возникают достаточно часто, чтобы их назвать.
- "Этот файл не является image." Инструмент проверяет файл 's, сообщенный тип MIME перед декодированием. PDF или документ, затянутый по ошибке, отклоняется на этом этапе.
- "Это изображение невозможно прочитать." Файл утверждает, что является изображением, но браузер не смог его декодировать. это происходит с поврежденными загрузками и с форматами, которые не поддерживает конкретный браузер. В зоне падения перечислены PNG, JPEG, WebP, GIF и AVIF; Фотографии HEIC с iPhone обычно сначала необходимо преобразовать.
- Матовый выглядит серым, а не красочным. Вы, вероятно, выбрали опцию сплошного цвета и оставили светло-серый по умолчанию Переключить фон обратно на размытую копию.
- Белое изображение исчезает в белом матовом. Включите тень, добавьте немного набивки или переключитесь на размытый фон.
- Пост все равно обрезается. Пресет, который вы экспортировали, не соответствует тому, где вы его опубликовали. Изображение 1200 x 630 Open Graph, загруженное в виде сообщения в ленте Instagram, будет обрезано, потому что 1.91:1 принимается только как сообщение о пейзаже.
- Загрузка не начинается. Загрузки засчитываются в ежедневный лимит использования. когда лимит достигнут, инструмент показывает сообщение, а не файл.
Что-нибудь загружено?
Нет. Изображение читается с помощью URL-адреса локального объекта, составленного на HTML <canvas> элемент на вкладке браузера и закодирован в файл с холстом toBlob способ, описанный в Спецификация холста WHATWG HTML. Никакие данные изображения не отправляются на сервер, не сохраняются и не регистрируются. После загрузки страницы она продолжает работать с отключенной сетью. записи отслеживания использования только в том предустановленном, фоновом и формате, которые вы использовали, а не в изображении.
Альтернативы онлайн-генератору матов
Инструмент браузера - это один из нескольких маршрутов.
- Платформа и #39;s собственный вариант посадки. Некоторые экраны загрузки, Instagram's среди них, могут поместить фотографию внутри рамки с простыми полосами вместо того, чтобы обрезать ее. Это быстро, но вы получаете мало или вообще не получаете контроля над фоном, набивкой или тенью.
- Фоторедакторы телефонов. Многие приложения галереи и приложения редактирования имеют & quot;fit& quot; или & quot;no crop& quot; режим с размытым фоном Они хорошо работают для одиночных фотографий на телефоне, а результаты различаются в зависимости от приложения.
- Программное обеспечение для проектирования настольных компьютеров. Фотошоп, Affinity или Figma дают полный контроль, включая точные положения пикселей. они занимают больше времени и требуют установки программного обеспечения.
- Командная строка. ImageMagick может дополнить изображение до фиксированного размера
-gravity center -extent 1080x1080, что подходит для пакетных заданий на сервере.
Преимущества клиентского подхода заключаются в том, что он не нуждается в установке или учетной записи, работает одинаково в любой операционной системе и сохраняет фотографию на вашем устройстве. для одного поста или небольшой партии, которая обычно является самым быстрым вариантом. для сотен изображений побеждает сценарий.
выше центр инструментов социальных сетей перечисляет соответствующие утилиты в одном месте, включая Генератор фотокарточек для цитат и информационных карточек и Изображение Водяной маркер для добавления логотипа или кредита перед публикацией.
