Рассматривая самые разные сайты и работы известных веб-мастеров, можно увидеть потрясающие по красоте проекты: непохожие друг на друга, дерзкие и строгие, веселые и необычные. Среди них не редко встречаются дизайны сайтов, в основе которых используются художественные акварельные эффекты и стили. Несмотря на обилие тенденций, стандартов в веб-дизайне, акварель, как вид обработки фотографий и элементов, используется часто и придает сайту необычность и красоту. И это при том, что тематика проектов может быть самой разной от строительства до медицины или банкинга.
Акварельный стиль применяют по-разному, но для одной цели: подчеркнуть содержание сайта. Если вы хотите поэкспериментировать со стилем веб-дизайна или научиться создавать акварельный эффект, а может даже пополнить копилку полезностей для 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 и разными цветами делаем мазки и закрашиваем области прямо поверх фотографии.
Опять выбираем слой с фотографией и переходим в Галерею фильтров - > Имитация -> Сухая кисть.
В завершении добавим несколько штрихов. Например, быстрым выделением обведем нашу птичку и смягчим края. Добавим еще слой, фоновый и немного добавим разноцветных клякс. Добавим слой с текстурой (Текстуризатор), зальем цветом и отрегулируем в бежевый цвет холста, отключим слой с фоном и вот такие вот результаты.
Выводы
Одна из самых важных вещей, что дает веб-дизайнерам акварельный стиль – учиться художественно (творчески) мыслить и фантазировать. Если видите крупные интернет-проекты в таком стиле и хотите что-то подобное создать сами, то не медлите и начинайте изучать кисточки, мазки, пятна и экспериментировать с цветами. С другой стороны, если вы сторонник строгости и консерватизма, то акварельные эффекты помогут вам попросту поразвивать творческое мышление.
Так или иначе, но акварель используется в веб-дизайне не редко и в течение не одного года уже. Другой момент – бывает сложно подобрать вариант исполнения, стилистику. Универсального рецепта здесь быть, увы, не может.