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

Акварельный стиль применяют по-разному, но для одной цели: подчеркнуть содержание сайта. Если вы хотите поэкспериментировать со стилем веб-дизайна или научиться создавать акварельный эффект, а может даже пополнить копилку полезностей для Photoshop и примеров, то у нас все это есть. Об этом и расскажем ниже.

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

Воздушность и легкость

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

Посмотрите на проекты Blocks App, Acreativemint Type pad, The Little Things Movie, JacksonVille art walk, Caava Design, Proud Punch. Все они обладают акварельным фоном или какими-то отдельными элементами в даном стиле. При этом целость восприятия не нарушена, а сами эффекты притягивают взор и внимание посетителя.

Отдельного упоминания стоит проект HP Sound in Color. Весь он выполнен в стиле акварельных мазков и разводов, с добавлением анимации и градиентов. Выглядит потрясающе красиво, но не забудьте подключить микрофон!

Художественная акварель

Зачастую веб-дизайн исполняется в высокохудожественном акварельном стиле, в сочетании с артом, то есть карандашными рисунками, объекты которых имеют четкие границы. Это проекты Ryan Scherf, Эрнест и Селестина, Сollette Dinnigan, Дом на Хлебном, Lapierrequitourne, Doudou Blues. Разумеется, не для любого типа сайта такой стиль подойдет, но между тем он придает проекту изыск и оригинальность. Ведется ли продажа квартир или печенья, но оформление всего дизайна в рисованном стиле позволяет художнику сократить дистанцию между посетителями сайта и владельцем (компанией), создать небольшую близость.

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

Украшение шрифтом

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

Рассмотрим примеры сайтов Bilan-trends, Proud and Punch, Keep earth quakes weird, Boat, doudoublues и снова французская компания lapierrequitourne и даже Reebok.

Фон используется в акварельном стиле в виде иллюстраций или мазков и разводов, но шрифты либо каллиграфические, либо строгие, но соответствующие по цвету и типу. При этом стиль шрифта обязательно сочетается со стилем иллюстрации. Сайт Boat создан мазками и разводами, а потому и шрифт выглядит аналогично. Doudoublues, обладая контурным стилем, имеет более четкий шрифт с засечками и небольшими элементами декора. Иными словами, для любого акварельного варианта в веб-дизайне используется и соответствующий шрифт.

Особенности использования акварели

Мы рассмотрели некоторые примеры веб-дизайна в акварельном стиле. Теперь задумаемся о том, а как же конкретно можно использовать акварель в веб-дизайне. Это могут быть отдельные элементы или комбинирование друг с другом. Например, фотография + фон в виде разводов, брызгов и мазков. Или иллюстрированный фон и строгие инфоблоки, иконки. Хитрость же заключается в том, чтобы создать совпадение с содержимым, в противном случае, акварель будет подавлять дизайн в целом и воспринимать сайт и информацию на нем будет сложно.

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

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

Ресурсы для Photoshop

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

 Акварельные фоны

Ресурс Freepick имеет в коллекции более 8 000 разных текстур и фонов. Дизайнерам останется только выбрать тип, а цвет затем можно отрегулировать в Photoshop.

Pixabay также обладает огромной подборкой фонов и текстур с мазками и градиентами. Существуют даже готовые рисунки.

Акварельные кисточки

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

  • Watercolor Splatters – 32 брызга в высоком разрешении с уникальной формой. Также в наборе существует и три текстуры.
  • Hi-Res Watercolor textures – еще немного кисточек и мазков, с которыми удобно работать на холстах разного размера.
  • Watercolor Brushes – 22 кисточки в виде брызг в высоком разрешении. Аккуратные, идеально подходящие для коммерческих проектов.
  • WG Dry Paint Strokes – кисточки, создающие имитацию сухих мазков краской. Акварелью работают по-разному, а потому и наборы создаются соответствующие. Всего здесь 10 образцов мазков.
  • Watercolor Photoshop Brushes Set II – набор кисточек-штрихов, что имитируют движение художника. Выглядят они реалистично и созданы в высоком разрешении.
  • Watercolour Strokes Brushes – и еще один набор штрихов из 14 кисточек.

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

Рисунок акварелью в Photoshop

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

 Вариант 1

Открываем Photoshop и создаем новый документ нужного размера. Мы возьмем 1280х720. Цвет белый. Открывает Галерею фильтров и выбираем Текстура -> Текстуризатор и настраиваем по настроению своему текстуру холста.

Найдем в интернете текстуру старой бумаги и разместим на отдельном слое с Непрозрачностью около 70%-50% (на ваш вкус).

На новом слое размещаем нужную фотографию и создаем группу из одного слоя CTRL+G. Затем идем в меню Слои -> Слой-маска - >Скрыть все и видим рядом с группой маску, но изображения уже не будет.

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

Добавим еще один слой, что будет находиться под группой, но над фоном (в группу он входить не будет). И также мазками, но разного цвета, прокрасим некоторые места. Режим наложения – Умножение. При этом снова могут появиться новые брызги, капли.

Переходим на слой с фотографией и открываем Галерею фильтров -> Имитация -> Сухая кисть. И выставляем ориентировочно параметры: размер кисти-0, детализация-9, текстура-1.

И вот что у нас получилось. Дополнительно можно изменить прозрачность слоя с текстурой, можно поиграть с режимами наложения. И вот еще примеры.

Вариант 2

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

Создадим новый слой, зальем его желаемым цветом и разместим на новом слое вырезанный объект.

Создаем новый слой «Аква1» и рисуем акварельной кисточкой несколько мазков каким-либо цветом. После чего ставим режим наложения «Затемнение основы».

На следующем слое «аква2» мы создаем еще мазки по настроению. Этот слой размещаем ПОД фотографией, а режим наложения выбираем «Умножение».

Теперь выбираем Кисть -> набор «Сухие кисти» ставим режим Перекрытие, непрозрачность 30 и разными цветами делаем мазки и закрашиваем области прямо поверх фотографии.

Опять выбираем слой с фотографией и переходим в Галерею фильтров - > Имитация -> Сухая кисть.

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

Выводы

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

Так или иначе, но акварель используется в веб-дизайне не редко и в течение не одного года уже. Другой момент – бывает сложно подобрать вариант исполнения, стилистику. Универсального рецепта здесь быть, увы, не может.