1 заметка с тегом

сэмплирование

Пересчет графики

Перед публикацией картинка должна быть подготовлена надлежащим образом. Размер публикуемого изображения не столь важен. Стоит обратить внимание на микроконтраст, тональность, размер и формат. Предлагаемые по умолчанию настройки в графических редакторах чаще всего не подойдут.

Мелкие картинки (до 300 px по широкой стороне)

Попытка ретуши изображения в предполагаемом финальном размере является грубой ошибкой. Нужно работать в масштабе 200–300%. Если размер публикуемой картинки предполагается 200 px, то исходник должен быть не меньше 400 px. Часто и этого недостаточно, особенно при ручной ретуши.

Для примера я взял изображение с исходным размером 1920 px по ширине. Мне нужно получить вкусную и не тяжелую картинку для публикации на сайте. Сперва я попробовал уменьшить размер с включенным сэмплингом Bicubic Sharpen:

Пишут, что он хорош при уменьшении картинки. Это не так. Вот результат:

Картинка потеряла контраст в деталях

Далее попробуем уменьшить через Bicubic Smoother, а после применим эффект Smart Sharpen:

Стало лучше, но появился неприятный звенящий эффект. Я всегда использую следующие настройки для шарпа:

После чего применяю команду Fade ⌘+⇧+F.

Разумнее было бы откатиться на несколько шагов назад и вместо Bicubic Smoother применить Bicubic (smooth gradients). Он правильнее сэмплирует переходы в светотени. Затем применить фильтр Sharpen, Fade.

Контраст по-прежнему еще нуждается в доработке. Я применяю кривую и по темным участкам прохожусь кисточкой Sharpen:

Теперь картинка стала насыщенной и сохранились детали. Уровень резкости — дело вкуса.

Предлагаю сравнить все три изображения в одной сплошной линии:

Осталось правильно сохранить для публикации в вебе. Изображение должно быть в профиле sRGB. Заходим в Save for web, выставляем качество на 60%, убираем всю метадату, ставим Use Document Profile и смотрим на размер — 40 кб. Можно сделать меньше, понизив до 50%. Так как изображение изначально шумное по содержанию, то jpg-сжатие, повышенное на 10%, не сильно ему повредит, а размер файла упадет до 30 кб.

60%
50%

Сэмплирование границ

Вернемся к важности работы с исходником в 200%.
Чтобы показать разницу, один и тот же текст я положил на уменьшенную и исходную картинки. Второй вариант уменьшил и пересэмплировал описанным выше методом:

Границы текста не смешались должным образом с фотографией
После правильного смешения соседствующих пикселей, текст «принадлежит» картинке, так как прошел ту же обработку, что и фотография. Границы стали четче.

Вблизи разница видна лучше:

Одну и ту же картинку со звездой и текстом я сохранил двумя разными способами:

  1. Исходник размером 200 px по ширине:
  1. Вторую картинку я сохранил с размером в 600 px, пересэмплировав с Bicubic Sharper до 200 px через Image Resize:
  • Затем локально прошелся кисточкой Sharpen по краям звезды:

Даже в случае, когда я не применял локальный шарп, картинка стала лучше: границы цветов правильно пересэмплировались и края шрифта выглядят четче.

Вывод

Графика должна смотреться однородно, особенно после ручной ретуши. Детали изображения должны иметь тот же уровень шарпа (блюра или шума), даже если они изначально не принадлежали картинке. Помогает пересчет картинки (sampling) и работа в увеличенном, а не финальном размере.

Ссылки по теме:
работа с изображениями в «Техногрете» (методы уменьшения размера картинки без потери качества)
подробное объяснение методов персчета изображения (pdf)

2014   photoshop   картинки   сэмплирование   техническое