7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Web Design
  2. Visuals

Эффект ретро-фильтра в Instagram

Read Time: 7 mins

Russian (Pусский) translation by Yuri Yuriev (you can also view the original English article)

В этом уроке я воспроизведу эффекты фильтров Instagram в Photoshop. А ещё расскажу вам об интересных свойствах CSS, которые позволят нам создавать фильтры стиля Instagram непосредственно в браузере.

Существует целый ряд приложений для состаривания фотографий от Hipstamatic до camera+, но самым известным из них является Instagram, показанный в сентябре 2010 года. Три месяца спустя, в декабре, уже было зарегистрировано более 1 миллиона пользователей.

Этот всплеск популярности позже привел к его приобретению Facebook за $ 1 млрд. Неплохо для небольшого стартапа 13 человек.


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

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

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

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

instagram filtersinstagram filtersinstagram filters
Image by Jessica Zollman/Creative Commons

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

1. Настройка

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

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

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

Фокусировка резкости на объекте, который вы снимаете и размытие окружающих областей привлекает внимание к этому предмету.

instagram depth of fieldinstagram depth of fieldinstagram depth of field
Image courtesy of SXU free stock photography

Пример иллюстрирует хорошую глубины резкости. Растение на переднем плане находится в фокусе, в то время как фон выглядит размытым.

3. Lens Flare/Film Burn (Вспышки/засветы)

На некоторых фильтрах Instagram добавляет слой, который представляет собой вспышку объектива или размытие пленки. Это придаёт изображению дополнительный компонент wow. Однако их следует использовать разумно, так как слишком большой акцент на вспышку объектива / засвет плёнки иногда может может показаться кричаще дилетантским.

Взгляните на этот выбор засветов, добавленных к эффекту винтажного стиля:

instagram film burninstagram film burninstagram film burn
Image by CG Arena

4. Эффект старой плёнки, царапины

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

5. Виньетка

После корректировки глубины резкости и наложения шумов, поверх изображения накладывается виньетка, тоже для концентрации внимания на основном предмете снимка. Виньетка - это техника фотографии, которая уменьшает яркость или насыщенность изображения по краям кадра.

instagram Vignietteinstagram Vignietteinstagram Vigniette
Image courtesy of Wikipedia

6. Добавление рамки

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


Фильтры Instagram создаются в Photoshop. Оттуда они переносятся как часть собственного приложения для iPhone. Соучредитель Instragrams поясняет :

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


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

Это то, что мы сделаем - эффекты до и после добавления наших фильтров стиля в Instagram:

Creating Instagram style filters with photoshopCreating Instagram style filters with photoshopCreating Instagram style filters with photoshop

Шаг 1: Создаём холст

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

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

Теперь настроим цвет и тональность изображения. Сделайте это, перейдя в 'Image' в верхнем меню и выбрав Adjustments > Curves. В выпадающем окне вы можете изменить эти значения.

Начните с уровней зелёного цвета. Например, измените  на «30». Теперь изображение должно стать более зелёным. Можем добавить синего. Измените его значение на «100». Теперь ваш снимок будет выглядеть очень стильно.

Можете менять настройки, пока не получите желаемый эффект для своей фотографии. Закончив, дублируйте только что созданный образ. Это делается щелчком правой кнопкой мыши по слою изображения и выбора 'Duplicate layer'.

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

На слое с дубликатом перейдите в Filter> Blur> Gaussian Blur, увеличьте «Radius» до 5px и нажмите «OK». Теперь возьмите инструмент окружности и нарисуйте круг в области вашей фотографии, которая будет в фокусе.

Затем перейдите в Layer> Layer Mask> Hide Selection. Получится окружность маски слоя размытого изображения.

На панели слоев перейдите к маске слоя, нажмите «alt» и щелкните маску слоя. Теперь на холсте появится маска слоя. Перейдите в Filter> Blur> Gaussian blur и размойте маску на 30px. Появится эффект глубины с размытым фоном и резким объектом съёмки.

Шаг 4: Засвет плёнки и вспышка объектива

Подберите изображения Google или иных сайтов со снимками, где есть блики и засветы. Выбрав команду flare/burn или обе, вы можете наложить их поверх оригинала в режиме «Overlay» или, например, «Screen». Экспериментируйте с ними, чтобы увидеть, что лучше всего подходит вашей фотографии.

Вспышки объектива можно сделать в Photoshop, перейдя в Filters > Render > Len flare... и указав желаемый эффект.

Шаг 5: Создание брака плёнки

Добавьте царапины на плёнке или создайте собственный шум, выбрав Filter> Noise> Add Noise, затем поиграйте с режимами смешивания, чтобы получить желаемый эффект.

В этом случае я выбрал режим «Multiply» и уменьшил непрозрачность до 14%

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

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

Вырезаем выделение нажатием клавиши «delete». Затем еще раз перейдите в Filter> Blur> Gaussian blur и размойте слой виньетки. Края виньетки делайте полностью чёрными. Как только это будет сделано, уменьшите непрозрачность. Я понизил её до 63%

Шаг 8: Рамка

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

Вы можете создать интересные эффекты рваных краёв, загрузив torn photoshop brushes и используя маску слоя.

...  Так вы можете воссоздать фильтры стиля Instagram в Photoshop. Теперь перейдем к созданию с помощью CSS.


Перенос фильтров Instagram в Интернет

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

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

Фильтры

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

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

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

Контраст

Контрастность - это разница цвета и света между частями изображения. Её усиление часто приводит к более яркому, насыщенному изображению, тогда как уменьшение делает снимок более блеклым.

Размытие

Фильтр размытия очень полезен при воссоздании глубины резкости изображения. Наложите две копии одного и того же изображения, а затем добавьте размытие около 5 или 6 пикселей к первому изображению. Затем мы можем использовать маскировку CSS, чтобы сосредоточить внимание на объекте, который должен быть в фокусе.

CSS Masking/маскирование в CSS

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

Композиции

Ещё в 2012 году я увидел твит, в котором упоминалось, как было бы здорово реализовать цветовые режимы стиля Photoshop для изображений с помощью CSS. Теперь, благодаря предложению Adobe, это может произойти! Предложение предназначено для "CSS-компоновки" и описано как "Смешивание и компоновка для Интернета".

Он ещё не реализован ни в каких браузерах, но Adobe собрала образец браузера, который позволит использовать их предложение! Все подробности в Adobe Compositing. При этом сохраняются все знакомые режимы смешивания Adobe, такие как screen, overlay и multiply.

CSS Gradients/градиенты

CSS-градиенты послужат, как слои в режиме overlay для  стиля Instagram. Использование градиента, например, от желтого до прозрачного до розового, а затем изменение opacity  может дать приятный налёт снимка на плёнку в стиле ретро.


Заключение

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

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

Знаете ли вы о каких-либо других свойствах CSS, которые могут оказаться полезными для создания эффектов Instagram? Расскажите о них в комментариях ниже!


Дополнительные ссылки, статьи и ресурсы

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Advertisement
Scroll to top
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.