PSD в PNG: при отправке RGBA укажите альфа-края, назначение цветового профиля и что на самом деле означает «объединить видимые»
PNG подходит для значков, вырезок и наклеек, которым требуется чистая альфа-канал: в отличие от JPEG он позволяет избежать блочных повреждений на мягких краях, но полноцветные мастера могут получиться большими, а полупрозрачные пиксели по-прежнему выглядят по-разному в зависимости от правил композиции средства просмотра. Серверный формат PSD в PNG фактически «растрирует видимую композицию, а затем кодирует» — он не сохраняет живые типы или векторы, поэтому PSD остается основным, а PNG — передачей. Запишите, нужна ли вам полная альфа-версия, являются ли цели sRGB и используется ли искусство в темном интерфейсе; в противном случае дизайн, веб-сайт и допечатная подготовка будут спорить из-за одного и того же файла с тремя фонами. Стандартизируйте контроль качества как светлый мат + темный мат + настоящий фон CSS и хэши журналов, чтобы дебаты возвращались к доказательствам, а не к скриншотам.
Как использовать PSD в PNG онлайн: загрузите подписанный файл, дождитесь объединения видимых слоев, загрузите, затем проверьте прозрачные края как на светлых, так и на темных слоях, прежде чем создавать версии ресурса.
- Заморозьте состояние внешней видимости в Photoshop: скройте аннотации и скретч-слои, убедитесь, что белые пластины не блокируют области, которые должны оставаться прозрачными, подтвердите размер монтажной области и целевые значения @2x/@3x в брифе, загрузите и прочтите примечание к инструменту, видимое при слиянии, чтобы никто не ожидал многослойной семантики от PNG.
- Загрузите и проверьте альфа-канал, затем совместите PNG с белым, темной поверхностью и фоном живой страницы — увеличьте масштаб волос, теней и тонких штрихов для получения серых полос, цветных ореолов или неровностей; если это не помогло, исправьте подложку/обрезку в PSD и запустите повторно, а не ретушируйте PNG вслепую.
- Поставляется с версионным именем файла, цветовым пространством записи, политикой встраивания ICC, длинным краем и лицом, утверждающим; если его обслуживает CDN, URL-адреса отпечатков пальцев, чтобы «Я заменил актив», не конфликтовали с месячными кешами.
Часто задаваемые вопросы о формате PSD в PNG (альфа, видимость слияния и размер файла)
Края выглядят серыми на черном фоне, но нормально на белом — не работает ли преобразование или предварительное умножение альфа и контекст просмотра?
Полупрозрачные сглаженные пиксели взаимодействуют с цветом фона; если одна сторона предполагает прямую альфу, а другую предварительно умножить, вы получите классическую «темно-матово-серую бахрому». Проверьте реальный фон в Интернете или движке, задокументируйте предположения о композиции и настройте подложки или параметры экспорта в Photoshop — запрос «еще одного экспорта в PNG» без изменения математических вычислений редко помогает исправить ситуацию.
Photoshop «Экспортировать как» и результат онлайн-слияния немного отличаются — что нам следует проверить, прежде чем обвинять сервис?
Различия часто возникают из стеков видимости, групп обрезки, области корректировки или устаревших смарт-объектов, а не из кодировщика PNG. Локальное объединение видимого слоя со временным слоем и сравнение рентабельности инвестиций; если локальное слияние уже не соответствует параметру «Экспортировать как», исправьте PSD вместо эскалации конвейера.
PNG-герои огромны, а счета за CDN наносят ущерб — следует ли нам запретить PNG на всем сайте или когда PNG все еще будет подходящей сделкой?
Сохраняйте PNG там, где вам нужны плавные альфа-каналы или четкие вырезы; размер атаки путем ограничения длинного края, квантования до палитры, когда изображение одобрено, разделения фона фотографии на JPEG/WebP/AVIF и документирования того, какие регионы действительно требуют альфа-канала. Полный запрет создает больше взломов, чем экономит байты.
Мелкий шрифт и тонкие линии выглядят четкими в большом PNG, но нечеткими после масштабирования браузера — следует ли исправлять PSD или CSS?
Выровняйте по пиксельной сетке поставляемого размера, избегайте нечетных размеров и смещений на полпикселя, а также договоритесь о «рендеринге изображения» и путях целочисленного масштабирования — проверьте при масштабах 1x и 2x. Утолщение обводок только в PNG без исправления масштабирования макета обычно заменяет один артефакт другим.
Клиенты говорят, что PNG «не имеет слоев» и не может редактировать копию. Как нам определить ожидания перед передачей?
PNG — это растровая передача, а не редактируемый макет; если было обещано редактирование, отправьте PSD (или согласованный источник) вместе с файлами и пометьте их RASTER_FINAL и EDITABLE_MASTER. Уточните в письменном виде, что онлайн-переход PSD в PNG — это выравнивание, а не «экспорт исходников проекта».