Підготовка фотографій для web.

Сьогодні поговоримо про те, як я готую картинки для публікації в інтернеті

Сьогодні поговоримо про те, як я готую картинки для публікації в інтернеті.

Коли до мене надходять замовлення на обробку, то я віддаю фото в повному розмірі і не парюся над веб розміром - замовник все зробить сам, якщо йому потрібно. А якщо це замовлення на зйомку (а ми з Аліною буває беремо спільні замовлення), тоді готовий матеріал замовнику йде повнорозмірним і в розмірі для вебу. І бували випадки, коли замовник запитує, а чому Повнорозмірна більш каламутні? Питання тут трохи некоректний. Правильніше було б сказати, що це розмір для вебу різкіший. Так і повинно бути, розмір для інтернету повинен виглядати більш виграшно, тому що більшість клієнтів будуть дивитися ваші роботи саме в інтернеті і саме в невеликому розмірі. Не потрібно забувати, що переглядаючи повнорозмірне фото, ваш переглядач масштабує його під розмір екрану і робить він це з якихось своїх алгоритмах. І в 99% випадків повнорозмірне фото, масштабувати до розмірів екрану, буде виглядати більш мутно, ніж його збільшити до масштабу 1: 1. Звідси йде псевдо-розмитість, якої насправді немає. Це як з драбинками в фотошопі при різному масштабі ... але зараз не про це.

Для себе я визначив оптимальним розмір картинок для вебу наступний: 1200px по горизонталі і 900px по вертикалі.

Подивимося, як виглядає Повнорозмірна (масштабувати) і розмір для інтернету (1: 1) поруч.

(Фото клікабельно. Краще подивитися його в повному розмірі в новій вкладці. Так буде краще видно різницю)

Різниця добре видно на листі дерева, на волоссі, плаття, букеті.

У цього фото я просто змінив розмір і не Шарп зовсім. Розмір змінив Ctrl + Atl + I, виставив 900 px по вертикалі і готово.

Пробуючи кілька варіантів зменшення (в 1 раз або в кілька разів поетапно і т.д.), я прийшов до того, що краще ворог хорошого. І в 80% випадків, якщо картинка спочатку хороша, різка, то ніякого шарпа після однократного зменшення не потрібно зовсім. Картинка і так за рахунок зменшення стає візуально більш різкою, ніж Повнорозмірна. Цього вистачає з головою.

Але в останніх 20% я все ж додаю різкість вже на зменшену копію. Тут у мене 2 варіанти. Перший - шарплю всю картинку і потім ластиком приблизно на 50% стираю перешарпленние місця (зазвичай це кордону переходів яркостей, тобто контури об'єктів). І другий варіант, якщо картинка в цілому нормальна, але мені потрібно щось окремо підкреслити, то шарплю тільки необхідний ділянку.

Розглянемо ще одне фото. Спочатку воно досить різке (6630px по довгій стороні), при 100% видно всюди фактура. Але при зменшенні до 1200px по горизонталі деталі читаються не так соковито. Тому треба пошарпіть.

(Gif-ка кликабельна)

(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

І бували випадки, коли замовник запитує, а чому Повнорозмірна більш каламутні?

Дополнительная информация

rss
Карта