/    /  Комментариев нет


В этом уроке мы рассмотрим принцип работы фильтров в Instagram, а так же постараемся воссоздать некоторые из них в Photoshop. Кроме того, мы познакомимся с несколькими новыми и интересными CSS-свойствами, которые позволяют добиться Instagram-эффектов «на лету» в браузере.


Как работают фильтры в Instagram

Instagram включает в себя множество фильтров от «Lomo-fi» до «Nashville», каждый из которых создан с использованием разнообразных методов, фильтров и эффектов. Со-основатель Instagram Кевин Систром (Kevin Systrom) по этому поводу сказал:

«Это сочетание множества методов. В некоторых случаях мы рисуем поверх картинки, в других используем множественное наложение изображения — всё зависит от конечного эффекта, который мы хотим достигнуть. Например, Lomo-fi ничто иное, как изображение с увеличенной контрастностью.»

На изображении ниже представлены разнообразные эффекты в Instagram:

Несмотря на то, что каждый из фильтров имеет собственные настройки изображения, мы можем разделить весь процесс преобразования на шесть основных шагов:


1. Коррекция

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


2. Глубина резкости

Понятие глубины резкости может быть определено как «расстояние между передней и задней границами резко изображённого пространства, в пределах которого объекты съёмки на снимке отображаются безусловно резко». Если вы занимаетесь графическим дизайном, то вы, вероятно, сможете представить это как некий объект, находящийся в фокусе на переднем плане, в то время как остальное пространство вокруг него размыто.

При фокусировке на фотографируемый объект, находящийся на переднем плане в кадре, вы получаете вокруг него размытую область, которая помогает акцентировать внимание именно на нём.

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


3. Lens Flare/Film Burn

В некоторых фильтрах добавляется дополнительный слой, включающий в себя блики и эффекты размытия света — всё это позволяет добавить изображению некоторый «вау-эффект». Однако нечто подобное следует использовать в разумных пределах, так как чрезмерное акцентирование внимания на этом может негативно сказаться на общем впечатлении от изображения.


4. Эффект старого фильма

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


5. Виньетка

Виньетка применяется после цветовой коррекции, глубины резкости и добавления различных шумов — чтобы ещё раз акцентировать внимание на основном объекте изображения, путём снижения насыщенности или яркости по краям кадра.


6. Рамка

Наконец, для придания некого ретро-стиля к изображению добавляется рамка. Очень часто рамки можно было увидеть на старых фотографиях или снимках, сделанных на Polaroid. Они так же могут придать эффект рваных краёв, что непременно создаст ощущение подлинной старинной фотографии.


Разработка любого фильтра для Instagram начинается в Photoshop, а уже после этого он программируется на языке Object-C — нативном языке программирования для iOS. Со-основатель приложения добавил к этому:

«Наши фильтры это сочетание настроек изображения: тональность, цветовая насыщенность, режимы наложения и так далее. Кстати, обычно я создаю их в Photoshop прежде, чем пишу алгоритмы для их реализации на телефоне.»


Воссоздание фильтров в Photoshop

Итак, мы попробуем с вами сделать следующее (до и после):


Шаг 1. Создание холста

Создайте холст размером 600x600px и задайте ему цвет фона (любой по вашему желанию). Добавьте на него выбранное вами изображение. При необходимости кадрируйте и масштабируйте его.


Шаг 2. Отрегулируйте цвета

Сейчас самое время произвести цветовую и тоновую коррекцию. Зайдите в меню Image > Adjustments > Curves. Перед вами откроется окно, в котором вы сможете задать желаемые значения.

Начните с увеличения зелёных оттенков. Например, установите значение 30, после чего картинка станет более насыщенна зелёными тонами. Мы так же увеличим оттенки синего — установите для синего канала значение 100.

Помните, что все указанные значения даны лишь для примера, поэтому не бойтесь экспериментировать с ними до получения желаемого результата.
После того, как все настройки выполнены, продублируйте этот слой (сочетание клавиш Ctrl+J или через меню Layer > Duplicate Layer).


Шаг 3. Глубина резкости

К дублированному слою примените эффект размытия: перейдите в меню Filter > Blur > Gaussian Blur, увеличьте значение ‘Radius’ до 5px и нажмите OK. Выберите инструмент Elliptical Marquee Tool и выделите область на фотографии, которая должна быть в фокусе, после чего перейдите в меню Layer > Layer Mask > Hide Selection.

В панели со слоями кликните по появившейся там маске слоя, зажав при этом клавишу alt — на холсте отобразится её содержимое. Примените Filter > Blur > Gaussian Blur со значением ‘Radius’ в 30px. Кликните по маске слоя (с зажатым alt) ещё раз. Таким образом у нас получится эффект глубины резкости с некоторым объектом в фокусе.


Шаг 4. Lens Flare и Film Burn

Можно воспользоваться поиском Google по картинкам, чтобы подобрать для вашей фотографии подходящие блики. Достаточно будет лишь добавить выбранное изображение к холсту (выше слоя оригинальной фотографии) и применить к нему эффект наложения (blend mode), например, ‘Overlay’ или ‘Screen’.

Так же можно поэкспериментировать со встроенным в Photoshop фильтром ‘Lens Flare’ (Filter > Render > Lens Flare…).


Шаг 5. Эффект старого фильма

Попробуйте добавить немного шума к фотографии, используя Filter > Noise > Add Noise с различными настройками.
В данном случае к исходному изображению был применён метод наложения ‘Multiply’ и снижена прозрачность слоя до 14%.


Шаг 6. Виньетка

Создайте новый слой и залейте его чёрным цветом. Затем выберите инструмент Elliptical Marquee Tool и нарисуйте большой овал по центру холста так, чтобы его края почти касались границ изображения.
Удалите выбранное выделение клавишей ‘delete’ на клавиатуре. Далее воспользуйтесь размытием Filter > Blur > Gaussian Blur с произвольными значениями фильтра, но при этом следите, чтобы края слоя оставались непрозрачными. После этого уменьшите ‘opacity’ (прозрачность) слоя. В данном примере значение прозрачности составляет 63%.


Шаг 7. Рамка

Финальной частью является добавление рамки, напоминающей старые плёночные фильмы. В данном случае выбрана прямоугольная рамка с несколькими цифрами, буквами и стрелками.

Так же вы можете создать интересные эффекты «рваных» рамок, используя набор рваных кистей для Photoshop и технологию применения масок для слоёв.


Вот так достаточно просто можно имитировать фильтры Instagram в Photoshop. А сейчас давайте поговорим о реализации нечто подобного средствами CSS.


Создание фильтров Instagram средствами CSS

Я бы не сказал, что с помощью CSS получится в точности повторить все встроенные в «Инстаграм» фильтры, однако можно попробовать создать нечто похожее, экспериментируя со множеством свойств, которые доступны нам в CSS.
Ниже я представлю вам несколько таких свойств, с помощью которых можно начать.

 

Фильтры

В настоящее время только webkit-браузеры обладают поддержкой фильтров. Фильтры позволяют применять к изображениям различные эффекты в стиле Photoshop средствами CSS, например:

  • Blur (размытие)
  • Gray scale (уровни)
  • Sepia (сепия)
  • Brightness (яркость)
  • Saturation (насыщенность)
  • Hue Rotate (тональность)
  • Contrast (контраст)
  • Invert (инверсия)

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

 

Контраст

Контраст — это отношение яркостей самой светлой и самой тёмной частей изображения. Увеличение этого параметра делает картинку более яркой и динамичной, в то время как уменьшение приводит к блёклости и сухости изображения.

 

Размытие

Размытие очень полезно для достижения эффекта глубины резкости: накладываем два одинаковых изображения друг на друга, при этом размываем изображение переднего плана примерно на 5-6 пикселей, после чего мы можем с помощью CSS-маски (CSS Masking) сфокусироваться на каком-либо объекте путём «вырезания» некоторой области с верхней картинки.

 

CSS-маска

CSS-маска позволяет выделить определённый графический элемент или фигуру для её дальнейшего использования как отдельную независимую область — в общем, эффект практически тот же, что и у маски слоя в Photoshop.

 

Наложение изображений

В 2012 году я как-то напоролся на твит, в котором говорилось, что было бы здорово иметь возможность накладывать изображения друг на друга с применением эффектов смешивания цветов как в Photoshop (blending mode).
Что ж, благодаря предложению, внесённому компанией Adobe, это скоро будет возможно! Само предложение описывается как «Смешивание и наложение для веб» (‘Blending and compositing for the web’).

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

 

Градиент

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


Заключение

Наверное, почти каждый сейчас пользуется разнообразными программами, такими как Instagram, для придания своим фотографиям различных ретро-эффектов и прочей «магии». Без всякого сомнения такие изображения выглядят более «живыми» и неординарными, чем простые и скучные снимки.

Количество фильтров и эффектов будет увеличиваться наравне с ростом популярности таких программ. Понимая основные принципы работы фильтров, вы можете без проблем реализовать их для своего сайта или приложения. Со временем, CSS будет иметь полный набор свойств и методов для работы с изображениями подобным образом. Хорошей новостью является то, что упомянутые сегодня свойства уже сейчас позволяют имитировать некоторые несложные фильтры, представленные в Instagram.

А знаете ли вы какие-нибудь CSS-свойства, в дополнение к уже упомянутым, позволяющие добиваться интересных и необычных эффектов? Будем рады услышать о таковых в комментариях!