Веб-дизайн, безусловно, прошел долгий путь от первоначальных ограниченных по возможностям HTML и браузеров. Сейчас, благодаря возможностям HTML5, CSS3, сверхбыстрым скоростям интернета и возможностям современных браузеров, веб-дизайнеры создают действительно прочный и мощный фундамент для развития бренда в Интернете. Веб-дизайн превратился из чисто технической практики в настоящее ремесло. Анимации, высокохудожественные изображения и иллюстрации сочетаются с геометрическими формами, линиями, создавая каждый раз совершенно новые комбинации и композиции, которые способны нести в себе некоторую информацию.
Использует ли веб-дизайнер видео или фотографии для оформления фона страниц, но всегда перед ним стоит выбор между реалистичностью и абстракцией. С помощью простых форм, сногсшибательных цветов и текучих, воздушных линий, абстрактные иллюстрации – одна из самых горячих тенденций в веб-дизайне. Тенденция, которая используется из года в год и всегда придает уникальность проекту. Вдохновленное множеством художественных и дизайнерских движений, это особенное эстетическое направление помогает привлечь внимание, выразить эмоции и пригласить посетителей сайта взаимодействовать с элементами, навигацией и контентом.
В этом материале мы рассмотрим как создать в Photoshop эффект абстракции из простой фотографии. Если ранее мы уже уделяли такому эффекту внимание, рассматривая эффект Polyscape (геометрическую абстракцию), то теперь посмотрим, как создать более «живую» форму, текучую и при этом еще и ту, которая будет нести в себе смысл основной композиции.
Вихревая абстракция Twirl Art
Художник готовое изображение вполне может не только «разбивать» на геометрические формы, но и «закручивать вокруг центра». И если смысл закрутки всем ясен, то при объединении разных вариантов такого эффекта можно получить весьма интересные новые композиции. При этом они будут поражать не просто своей внешней необычностью, но и цветами, яркостью и соответствием тематике.
Для начала давайте посмотрим на некоторые проекты, что были созданы с помощью плавных и текучих абстрактный фонов, среди которых есть и вариации эффекта скручивания. Это lesanimals, bacter, lonsdale, kikk, strv и другие.
В целом создавать такой эффект несложно, но в веб-дизайне он используется нечасто по той причине, что одного "закручивания" и, соответственно, искажения оригинальной фотографии недостаточно. Если хочется простого абстрактного фона, то, да, можно приглушить цвета, но если хочется создать впечатляющую «обложку» для сайта, добавить анимации, приходится фантазировать.
Но приступим…
Twirl Art силами Photoshop
В качестве оригинала возьмем самую обычную фотографию… ромашек в траве. Таким образом, у нас выделяются основные цвета: белый, желтый и несколько оттенков зеленого. Соответственно, если вам нужны иные цвета, то лучше сразу взять фотографию с подходящими цветами, поскольку вносить корректировки потом будет сложнее.
Открываем фотографию в Photoshop CC или CS6 – не имеет значения.
Важно: при работе с эффектом мы будем использовать смарт-фильтры. Много смарт-фильтров, и будем с ними экспериментировать. Поэтому, возможно, такой эффект и большое разрешение изображения окажутся слишком требовательными к вашему РС. Чтобы упростить задачу – уменьшите размер изображения. Затем готовый эффект можно будет увеличить и наложить на оригинал, но мы на этом остановимся отдельно.
Для начала сделаем дубликат изображения Изображение -> Дублировать и назовем его Вихрь. Новое изображение при необходимости уменьшаем в размерах. У нас оно изначально имеет 840х525 px.
Прежде чем начать добавлять смарт-фильтры нужно, чтобы наше изображение было не стандартным растровым, а смарт-объектом. Кликаем по нему на панели слоев ПКМ и из меню выбираем пункт Преобразовать в смарт-объект. И переименуем наш слой в Фото.
Первый фильтр, что мы применим - Фильтр -> Оформление -> Меццо-тинто. Этот фильтр добавляет случайный, высокий контраст и очень насыщенные штрихи, линии или точки на изображении в зависимости от выбранных настроек в нижней части диалогового окна. Настройки добавляют больше детализации, контрастности и цветности. Здесь нет «правильной» настройки, поэтому сейчас выбираем Длинные штрихи, и уже позже мы вернемся сюда для регулирования эффекта.
Теперь применим Радиальное размытие из Фильтр -> Размытие. В диалоговом окне выберем Качество 100, метод Линейный, а качество Черновое или Наилучшее (как у нас). Чем ниже качество, тем быстрее будет работать фильтр.
Важно: если у вас мощный РС, то можете сразу выбирать отличное качество. Разница между низким и высоким – в уровне шума. Чтобы избавиться от шума при маломощном РС, примените данный фильтр раза два или три, не меняя настройки. Шум исчезнет, а качество будет на уровне наилучшего. Если накладывать несколько вариаций с наилучшим размытием, то итоговое изображение тоже будет особо интересное.
Добавим художественности и перейдем в Фильтр -> Искажение -> Скручивание. Для настройки эффекта потребуется переместить ползунок в нижней части диалогового окна вправо или влево (по часовой стрелке или против неё). Мы выбрали по часовой при угле в 130 градусов.
Сейчас давайте вернемся к тому, о чем говорили выше – к редактированию смарт-фильтров. Попробуем отрегулировать Меццо-тинто. На панели слоев дважды кликаем по нему и видим сообщение, что все фильтры будут отключены. Причина в том, что Photoshop работает с фильтрами снизу вверх, в той последовательности, в которой они и были применены. Поэтому, да, придется согласиться.
В диалоговом окне вместо штрихов выберем Пятна. И в итоге получаем менее контрастное изображение, меньше насыщенности цвета, чем при длинных штрихах. Можно еще поиграть с настройками, но мы оставим такой. Нас устраивает.
Создадим копию нашего слоя (ctrl+J). Обратите внимание, что скопировался и слой, и все смарт-фильтры с выбранными нами настройками.
Для нового слоя выбираем фильтр Скручивание (на панели слоев) и переходим к его перенастройке. Мы выбирали 130 градусов. Теперь выберем обратное значение в -130. Разумеется, можно выбрать и другие, поиграть с завихрениями, но давайте для примера создадим нечто простое и не менее красивое.
Верхний слой полностью перекрывает нижний, а нам нужно их смешать, поэтому обратимся к Режимам наложения. Выбор у нас небольшой: Темнее, Светлее и Точечный свет.
Вот как они будут выглядеть:
Мы остановимся на Светлее.
На данный момент вы все еще можно вернуться назад и поэкспериментировать с различными настройками фильтров для любого из двух смарт-объектов. Просто дважды кликните ЛКМ на Скручивание или Меццо-тинто, чтобы повторно открыть диалоговое окно и внесите изменения. Например, мы для слоя Фото-копия открыли редактирование Меццо-тинто и выбрали Крупные точки.
Если отключить Радиальное размытие, то появится больше резкости и совершенно иной эффект, будто сочетаются два разных изображения, напоминая собой двойную экспозицию.
А можно попробовать изменить тип радиального размытия с линейного на кольцевой.
И мы добавили еще по два раза Радиальное размытия для обоих слоев в тех же наивысших настройках. Добавляете Фильтр, кликаете ЛКМ по нему на панели слоев, зажимаете ЛКМ и перемещаете вниз (или куда вам надо).
Масштабирование эффекта до оригинала
Вихревой эффект в виде цветка готов, но ведь изображение маленькое. Давайте применим готовый вариант на оригинальную фотографию, что и по размеру больше и качеством выше. У нас оно 1680px по ширине.
Переходим на вкладку с оригиналом и в меню Выделение -> Все, а затем либо нажимаем Ctrl+C, либо Редактирование -> Копировать.
Переходим на вкладку Фото и дважды кликаем по любому слою. Это открывает содержимое смарт-объекта, который в настоящее время представляет собой небольшую версию изображения, в отдельном документе под названием «Слой0.psb». И именно теперь нажимаем Вставить или Ctrl+V оригинальное изображение.
Вставленное изображение будет урезано по размерам нашего рабочего, поэтому, чтобы увидеть все, переходим Изображение -> Показать все. Масштаб устанавливается в 100%, холст увеличивается.
Нажимаем Файл -> Сохранить и закрываем данный документ.
Теперь, если посмотреть на документ Вихрь, то можно увидеть, что эффект скручивания был обрезан, так как мы вставили новое изображение большого размера. Что ж вновь переходим Изображение -> Показать все. Появится полоса прогресса, и затем окончательный вариант.
Знаете, по факту, это весь Вихревой эффект или эффект Скручивания. Его можно изменять, можно поворачивать слои, деформировать их и придавать всему эффекту различные образы, которые каждый раз будут новые. Но… давайте сейчас его еще улучшим, добавив симметричности.
Объединим наши слои Shift + Ctrl + Alt + E и образуем новый слой. Обратите внимание, он уже не является смарт-объектом и нам это и не нужно, поскольку Смарт-фильтры мы применять не будем.
Выбираем Редактирование -> Трансформировать -> Отразить по горизонтали.
Теперь изменим режим наложения, чтобы смешать наши слои, из трех вариаций Темнее, Светлее или Точечный свет. Остановимся на Темнее. Можно Трансформировать слой, можно его развернуть под любым углом, наложить тонирующий цвет или градиент.
Вариаций множество и фантазии нет предела.
Завершение
Художественный абстрактный вихревой эффект или эффект скручивания, Twirl Art, практически полностью уничтожает оригинальную фотографию, но и превращает её в необычно-красивое новое произведение. Просто взять и «скрутить» цвета и линии композиции можно, но если «поиграть» с разными эффектами, то можно создать совершенно новую сцену. Да, это абстракция. Абстракция, которую применять в веб-дизайне на так и просто, как обычные фото или графику.
Но, тем не менее, слегка заметное на фоне, абстракция превращает, казалось бы, стандартный и строгий дизайн сайта в нечто более творческое, креативное, новое и свеженькое. Она притягивает взгляд, поэтому использовать на каждой странице, где есть контент – не лучший вариант. Но украсить фон навигации домашней страницы-обложки или отдельные тематические (контакты или о нас) – вполне себе отличный вариант. Тем более, что тонировку и эффект дуплекса никто не отменял.
Здесь нет разговора о трендах, мы говорим о стиле, о красоте и вариативности. То, что в тренде яркие цвета – не значит, что они должны «резать» глаза. Вопрос в том, как их использовать и где. С арт-эффектом то же самое. В Photoshop по умолчанию существует огромная галерея фильтров – остается только выбрать подходящий вариант из огромного множества.