Массовая подготовка фото к публикации на сайте

1 1 1 1 1 1 1 1 1 1 Рейтинг 0.00 [0 Голоса (ов)]
Массовая подготовка фото к публикации на сайте

Наверняка каждый из Вас, кто занимался изготовлением сайтов на заказ, сталкивался с ситуацией, когда клиент отдавал Вам несколько десятков или сотен фотографий, которые необходимо разместить на сайте. Сегодня я расскажу, как это сделать в более выгодном свете.

В 95% случаев, предоставляемые клиентами фото сделаны на мыльницу на дефолтных настройках, т.е. каким-либо профессионализмом фотография и не пахнет. А у любой мыльницы (хотя и у многих полупрофессиональных фотоаппаратов, если не уметь ими пользоваться) есть такой недостаток, как низкий динамический диапазон цветов и яркости. Из-за чего фотографии получаются блеклыми и не интересными. А значит, и посетители сайта Вашего клиента не будут проявлять должного интереса к его услугам, чем бы он не занимался и как бы хорошо он это не делал.

Наша же задача, поднять интерес посетителей сайта к услугам клиента, но т.к. за публикацию фотографий клиенты редко когда доплачивают (или это я такой, с доброй душой), то и тратить часы или дни, на обработку фотографий – мало кому хочется. Поэтому сейчас мы рассмотрим пример, как при помощи Photoshop решить эту задачу в пару кликов.

Запись сценария в Photoshop

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

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

Было

Открываем ее в Photoshop (я использую версию CS5, но подобные опции есть как минимум в CS3, хотя мне кажется, что юзал подобное еще до того, как фотошоп стал CS). После открытия в верхнем меню «Window» открываем пункт «Actions» (горячие клавиши: Alt+F9). В появившемся окошке, нажимаем на кнопку создания нового сценария, называем его по своему вкусу, после чего, нажимаем на запись – отныне, все манипуляции над фотографией будут записываться в сценарий.

actions

Первым делом я делаю ресайз, если фотографии еще не уменьшены. Часто клиенты отдают фотографии «как есть» прямо с фотоаппарата, хотя на сайте они будут появляться в разрешении не больше 640 или 800 пикселей по большей стороне. Многие оставляют ресайз на совесть загрузчика фото, т.е. что бы уменьшение шло на стороне сервера. Но я предпочитаю делать это сразу в фотошопе, потому что во-первых, дешевые тарифные планы хостинга часто не тянут по лимитам ресайз крупных изображений, особенно при пакетной загрузке, во-вторых – сама загрузка уже уменьшенных копий идет быстрее, ну и в-третьих, уменьшив изначально фотографии, Вы ускорите выполнение всех остальных операций над изображениями, которые мы будем сейчас делать. Поэтому сначала идем в верхнее меню «Image» и выбираем «Image Size» или делаем то же самое нажатием Alt+Ctrl+I. В появившемся окне для большей стороны указываем максимальный необходимый размер (у меня это, как правило, 800 пикселей) и жмем ОК. Фотография уменьшилась, а что бы было дальше удобно работать – сделайте масштаб в 100% (Ctrl+0).

levelsЗатем, добавляем насыщенности и контраста цветам. Для этого в верхнем меню выбираем «Image», затем «Adjustments» и «Levels» (либо Ctrl+L, что быстрее и удобнее). Смотрим на гистограмму и что мы видим? Мы видим, почти отсутствуют самые светлые и темные цвета – это видно по спадам слева и справа на гистограмме. Простым языком: гистограмма показывает на распределение яркости изображения. Т.е. если на фотографии много светлых тонов – она будет смещена вправо, если много темных – влево и т.д.

levels-window

Наша задача – сделать больше самых ярких и самых темных цветов, что в среднем сделает картинку чуть более сочной. Для этого я подвожу ползунки к краям у спадов гистограммы, что в цифрах: +10 для черного ползунка, и -20 для белого ползунка). Проще говоря, темные цвета, которых на фотографии много, но они не достаточно темные – становятся достаточно темными, а светлые, которых тоже много, но они недостаточно светлыми – еще больше осветляются.

levels-options

saturationСледующим шагом будет добавление насыщенности, что бы фотография выглядела более ярко. Для этого идем в «Image» - «Adjustments» - «Hue/Saturation» (Ctrl+U), и в появившемся окошке ползунок Saturation тянем вправо на 10-20 единиц (по вкусу).

saturation-window

Последим этапом обработки я добавляю резкости: «Filter» - «Sharpen» - «Sharpen».

Сохраняем результат через Ctrl+S, указав качество 10 из 12. Останавливаем запись на панельке «Actions».

Вот, что получилось.

Стало

Пакетная подготовка фотографий в Photoshop

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

batchВ верхнем меню выбираете «File» - «Automate» - «Batch». В появившемся окне в выпадающем списке «Actions» выбираете свой сценарий, а в качестве источника указываете папку, где находятся фотографии, которые необходимо обработать.

batch-window

Нажимаете ОК и идете пить чай.

Вот несколько фотографий для сравнения (кликайте и смотрите).

IMG 3077 IMG 3077 2

IMG 4497 IMG 4497 2

IMG 4573 IMG 4573 2

IMG 4589 IMG 4589 2

IMG 6137 IMG 6137 2

Понравилась статья?

Лучший способ сказать мне спасибо:


Комментарии  

0 # Сергей 12.04.2012 04:43
А вот это уже в мемориз и закладки ) Благодарю. Несколько минут и картинка оживает. Еще на блоге Сергея Доли рассказывается как он в фотошопе доводит каждую фотку, действий мало, а эффект великолепный.
Ответить | Ответить с цитатой | Цитировать
0 # Sergius 12.04.2012 06:15
Статья просто супер!.. Написано максимально подробно и ясно...
Ответить | Ответить с цитатой | Цитировать
0 # stman 12.04.2012 12:38
В дополнение к статье можно еще и Action выложить, для ленивых :) чтобы скачать можно было
Ответить | Ответить с цитатой | Цитировать
0 # stman 12.04.2012 15:30
Забыл сказать - "спасибо". Как всегда все самое нужное, хорошо и подробно описано.
Ответить | Ответить с цитатой | Цитировать
0 # titaniMOZG 13.04.2012 09:50
Записать actions самому быстрее и нагляднее, чем скачивать и потом откапывать нужную папку, куда его положить. :)
Ответить | Ответить с цитатой | Цитировать
0 # Андрей 17.05.2012 05:29
Отличная статья. Только лучше бы ее назвать "как улучшить фото" :)
Ответить | Ответить с цитатой | Цитировать
0 # titaniMOZG 21.05.2012 06:59
Речь идет о массовой подготовке, поэтому как называется, так и лучше ;)
Ответить | Ответить с цитатой | Цитировать
0 # DmitryJ 20.06.2012 00:21
Спасибо! Не думал что так можно преукрасить фото и подать для посетителей сайта в новом цвете. За такую работу с клиента можно брать % к бюджету за продвижения его бизнеса в интернете :)
Ответить | Ответить с цитатой | Цитировать
0 # Vika 23.07.2012 21:44
До обработки фотографии лучше смотрелись =)
Ответить | Ответить с цитатой | Цитировать
+2 # titaniMOZG 25.07.2012 14:12
На вкус и цвет, как говорится :)
Ответить | Ответить с цитатой | Цитировать
0 # regta 21.08.2013 14:10
Привет! Рекомендую добавить еще в сценарий добавление полупрозрачным белым шрифтом (в правом нижнем углу) - (c)site.ru. Не мельчить (чтобы легко не обрезалось) и не слишком крупно, чтобы не мозолило глаза. А то растащат фото по сети (их и так растащат, но хоть кто-то сделает это, сохранив копирайт). Разумеется, это нужно делать только с авторскими фото, а не с тыренными из гугла.
Ответить | Ответить с цитатой | Цитировать
0 # titaniMOZG 21.08.2013 21:05
Ну ватермарки у меня автоматом шлепает плагин для жумлы. :)
И всем клиентам ставлю его, что бы им тоже шлепал автоматом.
Либо в настройках JoomGallery (если это галерея) тоже есть опция для ватермарков.
Я думаю, что под любую CMS такой плагин найдется.
Ответить | Ответить с цитатой | Цитировать

Добавить комментарий


Защитный код
Обновить