.jpg)
Вероятнее всего, из всех тенденций текущего года один фотоэффект заслуживает наиболее пристального внимания с разных сторон. Еще в конце 2017 года ряд некоторых известных брендов и компаний использовали данный эффект в своих работах: видеореклама, обновление дизайна сайта, полиграфия и не только. Речь идет об эффекте «глюка» или более известного как Glitch. Но, задумываясь о том, почему вдруг он становится популярным на фоне того, как в качестве изображений в веб-дизайне стараются использовать либо реалистичные фотографии, либо графические рисунки, стоит обратить внимание на его особенность.
Ранее мы уже немного затрагивали тему создания эффекта «разрыва», но очень бегло, катастрофически мало для тренда года. Именно поэтому в этом материале мы постараемся рассмотреть виды эффекта, разные варианты создания, использования, особенности и не только.
Почему вдруг Glitch
Движение в сторону популяризации данного эффекта было вдохновлено возникшей тенденцией к использованию в дизайне «ручных» работ, реальных фотографий (нестудийных, но качественных) и создания общего несовершенства, легкой небрежности. Когда в течение нескольких лет все это начало приводить к появлению шаблонных проектов, однотипных и созданных строго по правилам и стандартам, энтузиасты решили найти то новое, что способно в корне изменить ситуацию, но при этом быть легким и простым в создании, визуально необычным, но и не нарушать сложившиеся стандарты. Этим стала противоположность. Банально, но это так. Аналогично тому, как используются и сейчас еще обычные фотографии и изображения, стали популяризировать всё эти же фотки и картинки, но в искаженном варианте, словно их пытались разорвать, помять.
Таким образом, Glitch-эффект создает на экране интересную смесь реализма и абстракции, новшества и древности. По факту Glitch имитирует вид искажения, что можно увидеть было несколько лет назад, пытаясь воспроизвести старые ленты VHS на видеомагнитофонах и на аналоговых телевизорах. Этот эффект также часто ассоциируют и с кинофильмами-ужастиками или с чем-то мистическим (но не волшебным).
Важные особенности
Ни для кого не секрет, что эффект «Разрыва» лучше смотрится в динамическом исполнении. Но фотографии и изображения также искажают и используют в веб-дизайне в качестве фонов или оформления домашней страницы.
Существуют разные варианты эффекта, что отличаются друг от друга как внешним видом, так и способом создания в Photoshop. Разумеется, что можно использовать и action (о них мы уже рассказывали), но для детальной настройки они подходят мало.
Вне зависимости от типа эффекта, в любом случае, визуально можно будет видеть присутствие рваных краев или волн, инвертированные цвета, размытия, блики, шумы, разного рода дополнительные текстуры. Иными словами, Glitch редко создается в чистом виде, путем разрывания картинки. Всегда добавляется что-то еще. То, что придает гармонию.
Также стоит заметить, что эффект может быть явным, насыщенным, таким, что за всеми «рванностями» общая картинка мало будет узнаваться. А может и быть использован и в слабой форме этот эффект.
Вот как все это реализовано на некоторых проектах: kikk (glitch используется на анимационных картинках gif), mako (анимация отсчета времени), arkade (весь дизайн с эффектом разрыва), future (эффект не в явном виде, но можно заметить редкие деформации иконок, изображений). А также стоит посетить dtsi, standardabweichung, oxota, .cryptarismission
Вариации эффекта Glitch в Photoshop
Как мы сказали выше, эффект Glitch существует, как минимум, в трех вариантах. Вот теперь рассмотрим немного то, как же создается каждый из них и в чем их визуальное отличие.
Для наглядности отличия эффектов друг от друга мы будем использовать одну и ту же картинку (скриншот точнее). И да…маски должны быть черными (если у вас слой-маска белый, просто выделите его на панели слоев и Инвертируйте).
Цветовые каналы
Это очень разрушительный эффект для изображения и очень простой в создании. Открываем наше изображение и переходим на вкладку Каналы. Выберем красный.
Переходим в Фильтр -> Искажение -> Волна и… начинаем колдовать. Для начала тип необходимо указать «квадрат», затем в масштабе установить значение искажения по вертикали на 1%, так как данный эффект будет разрывать картинку только по горизонтали. Затем поиграйте ползунками Длины волны и Амплитуды, не забывая о кнопке Рандомизировать.
После этого можно посмотреть в цветном исполнении и выбрать отдельно Зеленый канал. К нему также применяем фильтр Волна, но искажения меняем по амплитуде и длине волны. Достаточно просто рандомно выбрать вариант.
Таким образом у нас получился эффект разрыва, сильный, возможно, но и такое при неполадках сигнала телевизионной антенны тоже бывало в жизни.
Смарт-объект
Красота данного варианта – в его удобстве, поскольку, как только вы его создали, впоследствии эффект можно заменить и применить совершенно к любому иному изображению. Именно поэтому в данном случае можно использовать множественные наложения цветовых слоев, объединение слоев в группы, различные эффекты и многое другое.
Открываем наше изображение и переводим его в смарт-объект. Создаем копию слоя (ctrl+J) и отключаем видимость.
Вновь применяем фильтр Волна, но уже ко всему изображению (не к каналам). При этом настройки выбираем такие, чтобы само искажения выглядело не сильным, едва заметным, но плавным. Как видно, в результате у нас получился кубический разлом объектов на изображении, словно картинку пытались собрать по кусочкам и не получилось.
Так как мы работаем со смарт-объектом, то если вам не понравился вид эффекта, всегда можно два раза кликнуть по нему на панели Слоев и, открыв окно настроек, изменить.
Затем применяем еще раз Волну, но меняем настройки на более малые. При этом настройки искажения будут для каждого изображения свои.
Активируем наш слой-копию и переходим в Галерею фильтров. Здесь нам потребуется Эскиз -> Полутоновый узор, тип: Линия. Размер линии мы выбрали 2, а контрастность подберите под настроение. Нажимаем Ок. Применяем Фильтр волна, но с большим масштабом и малой амплитудой.
Внизу панели слоев добавляем корректирующий слой Цвет (красный) и режим наложения – Затемнение.
Объединяем наши два первых слоя в группу (назовем Цветность) и выберем режим наложения – Замена светлым. Наша картинка заметно преобразилась. Если вам уже сейчас не нравятся разрывы Glitch, то в любой момент вы можете открыть окно настройки с панели слоев и поправить.
Создаем копию группы (цветность-02) и меняем цвет с красного на…голубой в нашем случае. Вы в режиме реального времени будете видеть изменения цвета на изображении, поэтому подобрать не составит труда. Затем Применяем фильтр Волна и изменяем масштаб с тем, чтобы синие разрывы были более сильными и могли выделиться.
Дополнительно можно наложить Микширование каналов и увеличить красные и синие цвета.
Важно: по факту мы создали уже готовый Action, поскольку, если заменить изображение на Слое 0, то оно изменится и в других слоях, а настройки эффекта останутся без изменений. Просто нажмите ПКМ по слою и выберите Заменить содержимое. В данном случае, у нас размер изображений разный, поэтому и пустого места много оказалось, но эффект остался целым, в чем-то более наглядный.
Смешивание эффектов Glitch
Этот вариант эффекта узнаваем многими и не всегда осознается, что именуется он именно как «глюк-разрыв». Скорее, он больше напоминает рябь и зернистость, если бы не одно «НО». Его внешний вид и требования к изображениям. Не к каждому он может подойти и лучше всего смотрится на панорамах, пейзажных изображениях. Так или иначе, но создавать его несложно. Поскольку мы вновь обратимся к смарт-объекту, то можно сначала создать кальку, а затем подбирать картинки.
Открываем опять наше изображение с Шу-цзэнем и добавляем новый пустой слой. Выбираем градиент, обычный от черного к белому и два раза кликаем по нему на панели управления вверху. В открывшемся окне настроек градиента выбираем Шум, 100% и выбираем (рандомизируем) варианты сочетания цветов таким образом, чтобы у нас был охвачен весь радужный спектр. Нажимаем ОК.
И теперь по новому слою приводим линию градиента строго снизу вверх, зажав Shift, чтобы не было перекосов. Обесцвечиваем через Изображение -> Коррекция -> Обесцветить.
Затем выбираем Уровни (Ctrl + L) и смещаем ползунки таким образом, чтобы наши белые линии стали более контрастными, яркими, а все вторичные и едва заметные исчезли.
Затем настроим параметры «ряби», для чего выбираем Выделение -> Цветовой диапазон -> Подсветка и устанавливаем ползунки так, чтобы белых линий было в достаточном и нужном нам количестве. Именно это количество и отвечает за плотность искажения. Нажимаем Ок и видим выделение.
Теперь сохраним ее через Выделение -> Сохранить выделенную область. В появившемся окне вводим имя и оставляем его в текущем документе на новом канале. Снимаем выделение и удаляем слой.
Добавляем новый слой и выбираем опять градиент, все тот же самый, но направляем его сверху вниз. Обесцвечиваем и применяем Уровни (Ctrl+L) как и раньше, выделяя белые линии. Потом выбираем цветовой диапазон и выделяем линии, сохраняем выделение как Канал 02, удаляем слой. Если теперь перейти в Каналы и посмотреть нами сохраненное, то можно увидеть, что «рябь» получилась разной, что нам и требовалось.
Возвращаемся на панель слоев, переводим наше изображение в смарт-объект и делаем три его копии. Одна – это линии, другие - это цвета смещения, и одна – базовая.
Выбираем базовый слой и применяем к нему фильтр Волна. Масштаб небольшой, амплитуда тоже, смысл в том, чтобы создать небольшой разрыв объектов, но видимый и явный.
Теперь переходим на слой «Красный», выбираем Выделение -> Загрузить сохранённую область и устанавливаем наш канал 01. Появляется выделение, которое нам не нужно. Поэтому отправляемся в Слои -> Слой-маска -> Скрыть выделение. И у нас преображается наше изображение, появляются сдвиги.
Оно может не слишком вас устраивать визуально, поэтому кликаем по замочку между слоем и маской, выделяем слой, выбираем Свободное трансформирование (Ctrl +T) и немного растягиваем или уменьшаем наше изображение. Как видите, эффект получается очень и очень…красивый.
Дважды кликаем по слою и выбираем режим отображения канала – красный. Переходим в фильтры и добавляем Шум таким образом, чтобы этот красный канал проявил себя.
Теперь все то же самое проделываем и с синим слоем, добавляя канал 02 и смещая трансформирование по горизонтали влево или вправо. Повторять описание шагов уже не будем.
Теперь займёмся линиями. Переходим на соответствующий слой и отправляемся в Галерею фильтров -> Полутоновый узор, тип: Линия. Но, если в прошлом варианте мы выбирали едва заметные линии, то теперь выберем явные (6) и повысим контрастность для того, чтобы белый стал более явным.
Применяем и выбираем режим наложения слоя – Экран. Теперь можно поиграть с корректирующими слоями, добавить цветность или фильтр поиска цвета, насытить каким-то цветом. Также непрозрачность слоя Линии устанавливайте в малом количестве, дабы детали оригинального изображения были лучше видны.
Если вы инвертируете маску для слоев Красный и синий, то результат будет иным.
Вот таким нехитрым способом можно создавать самые разные варианты Glitch-эффекта и при этом сделать единожды базу, а затем только заменять изображения.
Выводы
Эффект разрыва, VHS-глюка или Glitch действительно по праву считается одним из простых, сложных, творческих и красивых одновременно. Его несложно создавать, но и непросто подобрать частички разрыва. Тем не менее, общий его визуальный эффект получается потрясающим, будоражащим и различным по качеству, что делает возможным использовать такие измененные изображения практически на любых сайтах. По возможности, в целом.
Веб-дизайн, повторимся, профессия творческая, зависящая не только от того, что заказчик захотел страничку с блоками контента. Эти блоки и фон для них нужно оформить, и оформить таким образом, чтобы было не аляповато, скромно, строго, приятно и … красиво. Просто – красиво. И это не значит, что научившись делать Polyscape или разрыв, теперь каждый второй сайт будет с этими эффектами. Тогда, не ровен час, и даже Glitch превратиться в шаблон, унылый и скучный для творчества.
А если в творчестве становится уныло, то веб-дизайн никогда не получится эффективным и действующим. Увы.