AFX.RU

Понадобилось тут знакомой обработать фотки из Испании, да что-то плохо получалось. И артефакты лезли и размер совсем большой получался. В общем я для пробы одно фото обработал, в итоге получилось и качеством получше и размером на 50кб меньше. Увидев файл меньшего размера при лучшем качестве получил вопрос "Что ты с ним делал?". Вот теперь и пишу что делал, может еще кому пригодится.

На самом деле все предельно просто, когда фотография обрабатывается на сайт, то требования к ней куда ниже, чем к полиграфии. Это для обложки глянцевых журналов надо "гламурить" фото, вылизывая и ретушируя каждую мелочь. Для сайта все в разы проще. Итак, открываем фотошоп (в моем случае CS5 под x64), первое вылезшее сообщение про несоответствие цветового профиля игнорируем, принимая значение по умолчанию (использовать встроенный профиль).

{module Баннер2}

Должен заметить, что исходные фотографии были сразу не очень высокого качества. При сохранении изображений в формате JPG всегда бывают потери в качестве и "артефакты", это объясняется тем. что формат как бы "архивирует" изображение, сильно уменьшая его размер (сравните с аналогичным в формате BMP, например), но при этом упрощая его структуру. Как результат - чем меньше размер, тем больше всяких артфактов вылазит на фото. С учетом изначального сжатия в камере (у многих по умолчанию стоят настройки на "нормальное" качество картинки, далеко не все владельцы фотокамер переключают его на "высокое"). мы с самого начала имеем дело с тем или иным количеством дефектов изображения. Не хотите их - снимайте в RAW, нынешний размер флешек это позволяет. Только вот найти такой режим в типичной мыльнице будет проблематично. Вот пример фрагмента оригинального фото без какой либо обработки - хорошо видны светлые линии ореолов по краю вертикальных (ну почти вертикальных) линий портовых кранов на фоне более светлого неба. В таких условиях контрового освещения они вылезают особенно часто.

То есть у нас изначально не очень хороший экземпляр для последующей обработки, наша задача сделать его приемлемого качества для просмотра на экране и, пусть вас это не удивляет, но вот именно с этими линиями мы бороться не будем.

Не стоит удивляться! Если бы мы обрабатывали файл с фотографией для полиграфии, или для фотопечати формата 15х20см, тогда эти линии представляли бы проблему - на фотографии они были бы сильно заметны и резали бы глаз. Но наша цель сделать изображения пригодное для интернета, то есть весьма и весьма малого размера. Исходное фото у нас 3648х2736 пикселов, что при разрешении 300 точек на дюйм (это примерно 116 линий на сантиметр) позволяет напечатать фотографию размерами 30х23см с хорошей детализацией мелких деталей (не факт что они там будут, мелкие объективы большей части бюджетных фотоаппаратов сами "жрут" детали). Но фишка в том, что мониторы, что у настольных компьютеров, ноутбуков, не говоря уж о планшетах и мобильниках, не в состоянии выдать такую детализацию картинки. Размер пиксела даже на самом дорогом мониторе больше чем 1\10мм, по этому для инета обычно принимается качество картинки не в 300 пикселов, а всего 72-96 на дюйм (примерно 35 линий на сантиметр), что примерно соотвествует среднему размеру пиксела в 0.27мм. И это очень хорошая цифра, берем какой нибудь недорогой монитор, например Benq GW2760HS, и смотрим техническое описание - у него размер зерна 0.311мм. Так что для нужд интернета разрешения 72 dpi (точек на дюйм) более чем достаточно. Выкладывать изображения более высокого качества просто смысла нет - размер будет больше, а разницы на мониторе никто не увидит. Хотя, конечно, если вы выкладываете фото с тем чтобы с них потом печатали фотографии на бумаге - тогда да, смысл есть.

Таким образом, обрабатывая фотографию "для сайта" мы ее очень сильно уменьшаем, а в процессе уменьшения всякие мелкие детали, как например светлая полоска шириной в пару пикселов вдоль темной, просто теряются. Подумайте сами - сколько у вас там разрешение на мониторе стоит? Допустим под 2000 по длинной стороне. И как вам, будет удобно разглядывать в полном размере фотографию у которой по длинной стороне почти в два раза больше - 3648px? Любите скроллить влево-вправо? Я вот, лично, нет. А каково владельцам планшетов? А если кто-то с мобильника в инете? Конечно можно уменьшить отображаемую картинку, но качать то ваш бедный посетитель сайта все равно будет большого формата, а далеко не у всех тарифы с безлимитным интернетом. По этому, чтобы не разорять понапрасну посетителей сайта, наша задача подогнать размеры изображения под их потребности. Лично я обычно делаю изображения 800 пикселов по длинной стороне (так полная версия фото в вертикальной ориентации комфортно влазит в мой 22" монитор), но я старый пень, я еще архиватором LHA пользовался, потому что она пару процентов лучше ужимал чем ARJ :) По этому мы будем делать 1200 по длинной стороне, тем более что фотка все равно горизонтально ориентирована.

Уменьшаем разрешение и размер фотографии 

Итак, наш первый шаг - уменьшить фото. Идем в Изображения, Размер изображения (Alt-Ctrl-I), и выставляем 1200 пикселов по длинной стороне. На самом деле на этом этапе разрешение можно не менять, 72 я вписал просто так, потом при сохранении оно изменится автоматически. Но если фото проблемное, то лучше вначале поменять разрешение, потом задать размер, потом... Ну потом нажать на ОК. И вот что получилось:

Нажмите на фото чтобы увидеть его все 1200px во всей красе

Как видите светлые линии на силуэтах кранов никуда не делись, но чтобы их заметить на уменьшенной версии - нужно уже внимательно вглядываться. А на еще более уменьшенной (тут в статье сейчас стоит 600) их вообще не видать. Этим мы и будем коварно пользоваться, наивный пользователь интернета, зайдя на наш сайт, даже не заподозрит какое гуано тут было изначально. А ведь мы еще ничего не делали, только уменьшили :)

Инструмент Уровни в фотошопе

Едем дальше. Фотография у нас изначально очень контрастная, но у меня в фотошопе передний план немного, но все таки просматривался. Можно было бы его вытянуть, но! Во первых, я люблю более контрастные фото. А во вторых, обычно на переднем плане таких фоток далеко не художественные ценности, а всякие бутылки, банки, пачки сигарет и прочие отходы жизнедеятельности. В общем я решил несколько притемнить и без того темный передний план и поднять контраст. Лично мой любимый способ - делать это через Уровни (Ctrl-L). Идем в  Изображение, Коррекция, Уровни и видим в окошке вот такую диаграмму. Там три полозка - слева, по центру и справа. Можете у себя в фотошопе подвигать их и поглядеть что меняется. Это очень простой инструмент, можно осветлить и вытянуть детали в тенях, можно притемнить, а если подвигать средний полозок то можно и притемнить и контраст поднять. Вот я его и чуть-чуть подвинул. Сугубо на свой извращенный вкус. Передний план еще более притемнился. а небо стало еще насыщеннее, я б даже сказал - грознее.

Теперь главная хитрость изготовления вкусной фотки. К сожалению пример вот этой конкретной фотографии неудачен, тут особо не развернешся, но вообще следующий совет вам очень пригодится при обработке других, не столь контрастных и с кучей изначальных артефактов, фотографий. Итак, нам надо поднять резкость!

Фильтр Контурная резкость в фотошопе

Дело в том, что при всяких изменениях размеров картинки в фотошопе, детализация на изображении сильно страдает. По этому после каждой манипуляции с размерами надо чуть-чуть подтягивать резкость. Наиболее удобно для нас использовать инструмент Контурная резкость. Идем в Фильтры, Резкость и находим там Контурную резкость. Открываем и выставляем примерно такие значения как на картинке. Эффект ставим 10-15%, а Радиус не более 1 пикселя. Затем применяем фильтр. Скорее всего никаких изменений вы не заметите, слишком они незначительны. По этому мы берем и повторяем фильтр, чтобы не лазить опять в меню достаточно просто нажать Ctrl-F (это повторяет последний примененный фильтр). Таким образом мы применяем фильтр 3-4-5 раз и вот чудо - картинка начинает постепенно меняться! Начинают проявляться ранее размытые детали, фотка становится четкой и... более интересной, что ли. Правда в нашем конкретном случае 4-5 повторений фильтра проявит и все нежелательные артефакты, светлые линии, которые мы почти потеряли при уменьшении, тут же вылезут наружу. Значит придется обойтись 1-2 нажатиями, все равно на этой фотке ничего особо и не видно, невелика потеря.

Сохранение картинки для Web в фотошопе

Вы еще не забыли что речь у нас шла о "простой обработке" фотографий? Ну я коротко писать никогда не умел, но тем не менее спешу вас утешить, мы дошли до финала! Размер уменьшили, с яркостью-контрастом поигрались, резкость чуть подтянули - пора и сохранить наш шедевр. Для этого идем в меню Файл, в пункт Сохранить в для Web и устройств. И видим вот такое окошко. Окошко делится на две части (оригинал и сохраняемый вариант), можно выбрать формат (GIF, PNG или JPG). Нам нужен JPG. А у jpg нужно выбрать качество. Но чем выше качество тем больше "вес" картинки, по этому нам надо найти здоровый компромисс. Я, обычно ставлю качество порядка 70, иногда чуть выше, для наших интернет целей этого вполне хватает. Если надо отсылать фото на какой нибудь фотосайт, то тут жмотится с качеством не стоит и ставить и 85 и даже 90. Но для всех остальных нужд 70 хватает за глаза! остальные настройки (галочки) как на скрине и нажимаем Сохранить.

Нажмите для увеличения

Ну и вот результат. От полосочек мы до конца не избавились (если бы уменьшали до 800, как я и порывался, то их было бы совсем не видать), но в целом получили приемлемого качества (и веса!) картинку для размещения на сайте. Чего, мы, собственно, и добивались.
В общем статья получилась "ниачём", уж очень неудачный пример взят для обработки. Наверно придется написать еще с примерами более интересной фотографии. Но все таки, надеюсь, что кому-то и это пригодится, а те кто умеют "гламурить" фото для глянцевых журналов - те вообще непонятно зачем сюда заглянули? ;)

{module Баннер2}