Blog

среда, 29 октября 2008 г.

Создание оверлея для имитации потертости на фото или фоне

По просьбам трудящихся *ohoho*:
Урок по созданию оверлеев разной формы.
Сейчас стало очень популярно придавать фотографии или скрапбучному фону потертый вид. Массу примеров можно найти в скрапбучных галереях, к примеру на DST .
Как вариант, такой оверлей можно создать, взяв за основу старую потертую фотографию, с загнутыми уголками, царапинами, может быть даже рваную. Но такие фотографии обычно имеют прямоугольную или квадратную форму. Да и часто под рукой нет старых фотографий. Поэтому предлагаю создать оверлеи самим.


Что нам потребуется:
- лист черной бумаги. Из него мы будем вырезать заготовку для оверлея. Это может быть цветная бумага, картон. Да мало ли чего вокруг черного цвета, я к примеру как-то вырезала оверлеи из бумажного пакета SEPHORA, тоже вариант. *razz* Если у вас нет под рукой ни бумаги, ни картона, но есть принтер, то можно напечатать лист черного цвета. Я настаиваю именно на черном цвете, т.к. он не дает при вырезании в Фотошопе цветных ореолов (хотя опять же, от них тоже легко можно избавиться, но я ищу довольно быстрый способ создания оверлеев, поэтому выбираю то, что мне наиболее просто).

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

- сканер или фотоаппарат. Чтобы отсканировать полученную в результате шкурения потертую заготовку для будущего оверлея.

- Фотошоп. Чтобы получить сам оверлей. Ну это думаю и так понятно.




Итак, начинаем.
1. Вырезаем заготовку для оверлея из бумаги.
Определяемся с формой для оверлея. И вырезаем из бумаги черного цвета нужную форму. Не нужно использовать целый лист, достаточно куска 10 на 10 или 15 на 15 см. Я беру для примера простую форму – квадрат.


Если нужно, чтоб уголки были скругленные, то ножницами делаем скругления:


2. Создаем потертости, царапины, рвем бумагу.
Берем наждачную бумагу и проходим по краям заготовки. Чтобы было удобнее, положите заготовку на край стола, совместите ее край с краем стола и пройдитесь наждачкой. Давите то больше, то меньше наждачкой, чтобы создавать разные по величине потертости. Аккуратно пройдитесь по уголкам заготовки, держа ее в руках (а может наоборот неаккуратно – смотря какой оверлей вы хотите получить в результате).


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




Если нужно, загните уголок заготовки.


Довольны результатом - переходим к пункту 3.

3. Сканируем заготовку. Чтобы заготовка получилась побольше размером, выставляем разрешение 600 dpi (можно больше).

4. Получаем оверлей.
4.1. Открываем заготовку в Фотошоп. Переводим слой с заготовкой в обычный редактируемый (двойным щелчком по надписи Background).


4.2. Обтравливаем контур заготовки, т.е. отделяем ее от фона. Предварительно вызовите команду Levels (Ctrl+L) и увеличьте немного контраст, чтобы насыщенность черного цвета увеличилась - так удобнее вырезать (левый ползунок Input Levels сместите вправо так, чтобы изображение стало контрастее). Я делаю примерно так (но у вас может быть по-другому, сканеры у всех разные и могут давать немного разные результаты):


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


В итоге мы получим нашу заготовку на прозрачном фоне.


4.3. Теперь нам нужно убрать черный фон из середины заготовки. Для этого я использую команду Color Range из меню Select. Увеличим немного масштаб картинки (50 или 100 процентов), найдем довольно светлую область и вызываем команду Color Range. Пипеткой щелкаем по светлой области (не сильно белой, но близкой к белому). Fuzzinnes в настройках команды должно быть примерно 185. И нажимаем Ok.


В результате вокруг белой области появится выделение.


Нажав Ctrl+J, перенесем выделенный оверлей на новый слой. Снимаем выделение (Ctrl+D). Слой ниже, из которого мы вырезали черную серединку сделайте временно невидимым – он нам еще понадобится.


4.4. Чтобы оценить результат, подложите слоем ниже оверлея какой-нибудь фон или фото (а лучше и то и это). Сразу будет понятно, насколько реалистично смотрятся потертости и нужно ли еще что-нибудь менять.
Оверлей не должен содержать очень темных пикселей.
Если они есть, то с помощью команды Levels избавляемся от них, сдвинув левый ползунок в Output Levels вправо примерно на 30-50. Вы можете наблюдать, как меняется картинка – темные пиксели становятся светлее, а светлые остаются такими, какие и были. Если нужно сделать картинку еще светлее, то двигаем средний ползунок в Input Levels немного влево.


Я вполне довольна результатом, поэтому перехожу к следующему пункту.

4.5. Чтобы было потом удобнее применять этот оверлей к фото (чтобы фото не заходило за пределы оверлея), делаем следующее:
Создаем новый слой, ниже слоя с оверлеем. Щелкаем по пиктограмме невидимого слоя (тот, что с черной серединкой), чтобы получить вокруг него выделение. Делаем Edit – Stroke, указывая в команде ширину обводки 1 пиксель, цвет - белый и место ее расположения – внутри выделения (Inside).


Нажимаем Ok и получаем тонкую обводку белого цвета. Встанем на слой с оверлеем и нажмем Ctrl+E, чтобы склеить оверлей с этой полученной обводкой. Снимем выделение Ctrl+D. Эта обводка помогла нам замкнуть разорванный в результате команды Color Range контур оверлея.
Этот шаг в большинстве случаев бывает необходим. Но для проверки замкнутости контура до этого шага, просто щелкните инструментом Magic Wand вне области оверлея – если контур замкнут, то выделение будет вокруг внешней области оверлея и этот шаг делать необязательно, а если помимо внешней области выделятся еще и некоторые части внутри оверлея, то этот шаг сделать нужно.

4.6. Еще один шаг, который следует сделать, чтобы оверлей, наложенный на фото смотрелся реалистичнее. Это добавление на него полупрозрачных теней в местах заломов и сгиба.
Для этого создадим новый пустой слой ниже слоя с оверлеем. Выделяем место тени с помощью Polygonal Lasso (посмотрите внимательно на оверлей, где проходит сгиб бумаги, чтобы определить, где должна располагаться тень. Если сложно понять, где должны находиться эти тени, посмотрите на бумажку – заготовку для оверлея).
Выделять нужно точно по линиям сгиба внутри оверлея, а снаружи необязательно точно, т.е. потом все эти области мы удалим.
Я выделила следующую область:


Нажимаем клавишу D, чтобы Foreground Color стал черным.
Затем я выбираю инструмент Gradient, на верхней панели настроек инструмента нужно выбрать тип заливки градиента – Foreground To Transparent, затем выбираем тип самого градиента Linear Gradient, а Opacity ставим 7%. И заливаем выделенную область (для того, чтобы выделение не мешало оценивать результат, можно скрыть его, нажав Ctrl+H, а затем, когда вы зальете, вернуть обратно этим же сочетанием клавиш). Участок с тенью готов.

Чтобы снять выделение нажмем Ctrl+D.

На оверлее может быть несколько таких участков. Каждый из них заливайте на новом слое. В результате получится нечто подобное:


Теперь удалим области теней, вышедших за оверлей. Для этого встав на слой с оверлеем, щелкнем Magic Wand вне области оверлея, а затем пройдемся по всем слоям с тенями, нажимая на каждом Del. Снимем выделение Ctrl+D.


4.7. Остается склеить видимые слои (а именно – слой с оверлеем и слои с тенями, контрольный слой с фоном/фото удалите) и сохранить полученный оверлей в .png.

5. Как состарить оверлей?
Наш оверлей получился светлым. Чтобы сымитировать старую, потертую фотографию, скажем, сделать сепию, лучше будет смотреться оверлеи желтоватый, с разводами. Для этого отсканируем/сфотографируем/найдем в своих запасах старую бумагу (или состарим сами). Откроем ее в Фотошоп и переместим в документ с оверлеем слоем выше. Создайте группу с маскированием, а именно: встаньте на слой с бумагой и нажмите Ctrl+Alt+G. В результате у бумаги скроется все, что вышло за границы оверлея.


Осталось поменять режим наложения слоя с бумагой, к примеру, на Multiply, Linear Burn или Overlay и состаренный оверлей готов (сохранить его не забудьте в .png).


6. Как пользоваться оверлеем? Очень просто:
1. Поместите оверлей поверх вашего фото или фона.
2. Встаньте на слой с оверлеем. Используя Magic Wand, кликните где-нибудь вне области оверлея. Вокруг пустой области вне оверлея появится выделение.
3. Встаньте на слой с фото или фоном. Нажмите клавишу Delete. Выделенная область вне оверлея будет удалена.

Так выглядит мой созданный оверлей «в действии» с фоном и с фото:







Надеюсь, урок был полезным и интересным. И самое главное – не сложным, т.к. создание такого оверлея от начала и до конца занимает при некотором опыте меньше 10 минут (урок писался гораааааздо дольше *razz* *razz* *razz* )… Так что при желании можно создать оверлеев различной формы великое множество:

*wink*

Оригинал урока тут.

14 комментариев:

Ilona комментирует...

I don't understand Russian, but I'd love to read this tutorial in English! Is it possible to translate it?

rmk комментирует...

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

rmk комментирует...
Этот комментарий был удален автором.
Krakatuka комментирует...

ЛЕНОЧКААА! СПАСИБООО!!!!! Это просто бесценнейший урок!!!

e-lena комментирует...

rmk, чтобы фотография передала все помятости естественно, я бы использовала фильтр Displace, примерно как тут: http://imagination-forum.com/viewtopic.php?t=818
В этом уроке тоже можно этот фильтр использовать, если очень сильные заломы будут у оверлея.

Лена комментирует...

Очень хороший урок! Большое спасибо!

Rin@ комментирует...

Лена, спасибо за все, ты наш наставник и вдохновитель, это тебе http://rina-creative.blogspot.com/2008/10/award_31.html

Mololi комментирует...

Моя благодарность не знает предела! Потрясающий и ооочень нужный, полезный, бесценный урок!!!!!!! :))))

myborkova комментирует...

Огромное спасибо!!! Очень нужный и полезный урок! Награда вот здесь http://myborkova.blogspot.com/2008/11/first-award.html

Volshebnica комментирует...

Леночка, огромное спасибо! Давно искала что-то подобное. Уже сама догадалась как это сделать. Но тут столько подробностей! Очень нужный урок!

Анонимный комментирует...

Огромное спасибо за урок!!! Так подробно все расписала! Обязательно буду пользоваться! Дарья.

Albina комментирует...

Леночка! Огромное спасибо! Столько времени мною было потрачено на попытки создания чего-то подобного...И вот...пожалуйста...все гениальное столь просто...Еще раз спасибо за возможность воспользоваться твоими потрясающими советами!
Удачи тебе и дальнейших творческих успехов!

M u s s комментирует...

Просто здорово!!
Спасибо большое!

Ingoda комментирует...

Огромное Вам спасибо за урок!нашла его случайно, но полезен как никогда! Самое интересное - вовремя! Результат суперский получается! Еще раз огромнейшее спасибо!