Подготовка фотографий для web.
Сегодня поговорим о том, как я подготавливаю картинки для публикации в интернете.
UPD: начиная с Photoshop CC2018 отдельно не шарплю после уменьшения размера. Фотошоп теперь сам хорошо уменьшает и чуть шарпит. А размеры под веб делаю 1600 по длинной стороне.
Когда ко мне поступают заказы на обработку, то я отдаю фото в полном размере и не парюсь над веб размером — заказчик всё сделает сам, если ему нужно. А если это заказ на съёмку (а мы с Алиной бывает берём совместные заказы), тогда готовый материал заказчику уходит полноразмерным и в размере для веба. И бывали случаи, когда заказчик спрашивает, а почему полноразмеры более мутные? Вопрос тут немного некорректный. Правильнее было бы сказать, что это размер для веба более резкий. Так и должно быть, размер для веба должен смотреться выигрышнее, т.к. большинство клиентов будут смотреть ваши работы именно в интернете и именно в небольшом размере. Не нужно забывать, что просматривая полноразмерное фото, ваш просмотрщик масштабирует его под размер экрана и делает он это по каким-то своим алгоритмам. И в 99% случаев полноразмерное фото, масштабированное до размеров экрана, будет выглядеть более мутно, нежели его увеличить до масштаба 1:1. Отсюда идёт псевдо-размытость, которой на самом деле нет. Это как с лесенками в фотошопе при разном масштабе… но сейчас не об этом.
Для себя я определил оптимальным размер картинок для веба следующий: 1200px по горизонтали и 900px по вертикали.
Посмотрим, как выглядит полноразмер (масштабированный) и размер для веба (1:1) рядом.
(Фото кликабельно. Лучше посмотреть его в полном размере в новой вкладке. Так будет лучше видна разница)
Разница хорошо видна на листьях дерева, на волосах, платье, букете.
У этого фото я просто изменил размер и не шарпил совсем. Размер изменил Ctrl+Atl+I, выставил 900 px по вертикали и готово.
Пробуя несколько вариантов уменьшения (в 1 раз или в несколько раз поэтапно и т.д.), я пришёл к тому, что лучшее враг хорошего. И в 80% случаев, если картинка изначально хорошая, резкая, то никакого шарпа после однократного уменьшения не требуется совсем. Картинка и так за счёт уменьшения становится визуально более резкой, чем полноразмер. Этого хватает с головой.
Но в оставшихся 20% я всё же добавляю резкость уже на уменьшенную копию. Тут у меня 2 варианта. Первый — шарплю всю картинку и потом ластиком примерно на 50% стираю перешарпленные места (обычно это границы переходов яркостей, т.е. контуры объектов). И второй вариант, если картинка в целом нормальная, но мне нужно что-то отдельно подчеркнуть, то шарплю только требуемый участок.
Рассмотрим ещё одно фото. Изначально оно достаточно резкое (6630px по длинной стороне), при 100% видна везде фактура. Но при уменьшении до 1200px по горизонтали детали читаются не так сочно. Поэтому надо пошарпить.
(Gif-ка кликабельна)
Я не заморачиваюсь с настройками резкости для веб-размера, а делаю дубликат слоя (после изменения размера) и применяю к нему самую простую резкость Filter/Sharpen/Sharpen (Фильтр/Резкость/Резкость). А дальше смотрю на результат. Если кажется, что резкости много, то уменьшаю прозрачность слоя. Если кажется, что только в определённых местах слишком резко (в основном контуры), то протираю ластиком именно в тех местах. Если всё сразу хорошо, то сохраняю. В данной гифке у меня копия слоя на 100% и в паре мест протёр ластиком, где показалось, что контуры слишком резкие.
(Кстати, это фото салона Тигуана, который обрабатывал я. Есть еще несколько фото машины полностью, но напишу в блог об этом чуть позже).
Стоит заметить, что я говорю именно о добавлении резкости для картинок в веб-размере, а не полноразмерных. Для полноразмерных я использую несколько способов добавления резкости. Это Sharpen (Резкость), Unsharp mask (Контурная резкость), Smart sharpen (Умная резкость) и изредка High pass (Цветовой контраст). Для разных случаев разный, но в большинстве случаев просто по настроению. Не считаю, что стоит уж очень сильно заморачиваться по этому поводу.
И, конечно же, не забывайте, чтобы цветовой профиль фотографий был sRgb. Иначе могут возникнуть проблемы с отображением цвета.
Всем мир!
Группа вк: vk.com/sergretouch
Биханс: www.behance.net/sergretouch
Инстаграм: http://instagram.com/sergey_brezhnev
Ютуб: http://www.youtube.com/user/sergbrezhnev
Facebook: https://www.facebook.com/sergey.brezhnev.7