Есть что-то увлекательное в уличном искусстве. Даже самые яркие, абстрактные фрески и изворотливые композиции способны многое рассказать о механике создания захватывающего приключения на кирпичной или бетонной стене. И да, такое не разместишь в доме на стене между шкафчиками или в коридоре. И мало того, что уличные художники создают собственные стили и испытывают страсть к определенным мотивам, они очень строго придерживаются основных принципов стрит-арта, дизайна и даже веб-дизайна. Разумеется, инструменты иные и держа в руках баллончик с краской или кисточку, им приходится водить рукой, обводить рисунок. И им не так просто исправлять ошибки или переписывать код, корректировать расположение элементов.
Обратим внимание сразу, что стрит-арт и граффити имеют большое влияние на моду, печать (плакаты, обложки и пр.), типографику, логотипы, на рекламу в целом, используются в мультимедиа (кино, видеоигры (для некоторых проектов стрит-арт заказывается отдельно у именитых творцов)). И что касается веб-дизайна, то увидеть сейчас, в наши дни весь сайт, созданный в стиле уличного искусства непросто, даже, скорее, сложно. Но что самое занятное, отдельные элементы, принципы, тонкости используются, так же как и фоновые изображения.
Мы же сегодня посмотрим на влияние стрит-арта на веб-дизайн и как можно что-то создать в этом стиле, как поработать с графикой в Photoshop.
Граффити или стрит-арт
Если вы спросите, в чем отличие двух направлений уличного рисования, то в одном из интервью ведущий блога и хорошо известный художник-гуру Лоис Ставски сказала: «Стрит-арт – тоже граффити, но как форма искусства, вышло за пределы городских районов и перестало быть самовыражением для молодежи. Теперь это «метка» личного брэндинга авторов. Но граффити незаконен, это риск и, соответственно, контркультурная грань. Стрит-арт же, в свою очередь, создается художниками, которые обладают соответствующим художественным образованием».
Более того, достаточно сравнить граффити и уличное искусство и качество, масштабность проявят себя и будут понятны каждому. Но, несмотря на такое, отчасти формальное и условное начало, заметим, стрит-арт может многое дать для веб-дизайнеров.
Фоновые мини-изображения
Даже если вы живете не в Соединённых королевствах, то не слышать имя Бэнкси не могли. Пленительный художник способен открывать новые тайны и использовать окружающую природу для создания шедевров, привлекающих толпы подражателей и почитателей.
В веб-дизайне работы Бэнкси обеспечивают идею многоуровневого подхода, применения глубины к странице. Небольшие элементы проекта breather (аренда помещений) используют возможности и смысл холста страницы и создается полочка с изображением частых действий людей (книгу почитать, порисовать/записать). При этом вся страница дизайна мгновенно превращается в копию части настоящей комнатки.
Разговор
Вдохновение для типографики в стрит-арте приходит от крупного жирного шрифта, что скорее уместен для граффити. Но подбирая шрифтовые пары для дизайна сайта, подумайте, а почему бы не использовать один из них действительно необычным. Это повысит читаемость, узнаваемость.
Компания по производству продуктов и напитков в Лондоне G'NOSH как раз и использовала такой подход. Все аспекты дизайна страницы были собраны вокруг нарисованного логотипа. А теперь такой шрифт, стилистику написание достаточно сравнить с работами уличного искусства и похожесть будет налицо.
Влияние абстракции
Уличные художники, несомненно, достаточно талантливы, чтобы идеально украсить здание своей работой, да еще, если работа так похожа на фотографию по качеству и стилю. Тем не менее, такое встречается реже, чем абстракции. Ставски объясняет, что в начале появления граффити вдохновение было самовыражением. Но смысл заключался в представлении материальных вещей, того как их видит художник, поэтому основное внимание уделялось визуальным эффектам, ассоциациям, которые возникают при использовании той или иной реальной вещи.
Фреска Okuda (псевдоним испанского арт-художника) яркий тому пример. Мы видим изображение людей, но куда большее скрывает цветовая гамма. И это отлично можно имитировать в веб-дизайне.
Проект In Pieces показывает абстрактную форму животных Красной книги. И заметьте, насколько тонко продуман проект. Интерактивность умело связывает основное послание к дизайну и посетителям, а сами изображения животных будто и сами исчезают. В результате, сайт требует мало контента для объяснения того, что происходит в мире природы, но влияние на наши умы оказывается огромное.
Рисованное несовершенство
Веб-дизайнеры и художники в студиях работают до тех пор, пока не подберут нужные цветовые сочетания, количество штрихов, элементов и могут откладывать дату завершения проекта. Уличные художники, хотя тоже часто рисуют на заказ, редко имеют аналогичный график работы. В результате, рисованное несовершенство гораздо проще увидеть и ощутить. Иными словами, доводя в студиях вид «до лоска», веб-дизайнеры почти не стремятся к свободе и лёгкости, что сопутствуют стрит-арту.
Проект Direnduvar использует как раз несовершенный рисованный стиль. Увеличивая масштаб, рукописный рисунок можно увидеть ближе и четче. Подписи, образы показывают сообщество в целом, отражают его сущность. И все это является отличным брендом, даже иногда гораздо более открытым, близким к душам масс, чем сухие генерации совершенного ИИ.
Да, в веб-дизайне существует множество практик, стилей, правил. И мы не утверждаем, что необходимо идти против них. Сам интернет создавался для того, чтобы довести информацию до некоторой удаленной точки и нескольких точек в равной степени. И хотя в целом все понимание и целенаправленность информации подвергается иному осмыслению, главным остается тот факт, что, приходя на сайт, каждый из нас получает некую информацию. И оттого, как эта информация будет преподнесена, зависит заинтересованность посетителя и качество веб-дизайна. Аналогично на сознание человека влияет и стрит-арт.
Попробуйте перенести изображение со стены одного дома на стену другого дома. В 99% случаев осмысленность и идейность теряется. Почему? Сравним обычные картины и уличное искусство. Картины Айвазовского можно повесить в любом интерьере, но не на каждой улице, не на каждом доме можно нарисовать лица фреской, выглядывающих персонажей, сюжетные композиции, даже расписные лестницы. В уличном искусстве больше осмысленности, больше возможностей задуматься над окружающей нас действительностью.
Поэтому использование элементов стрит-арта в веб-дизайне – сложное искусство. Необходимо искать тонкости и нюансы, находить элементы, чуть иначе смотреть на рабочий холст страницы. Куда проще создавать изображения в стиле стрит-арт, надписи, иконки и пр.
Мы подобрали для вас еще некоторые примеры сайтов, где в том или ином виде используются идеи стрит-арта, стилистика, особенности видения и восприятия окружающего мира. Это OTTO Zeitgeschenke, JozefMetelka, Art Attackk, Discover Moscow, artifakt, Bistro Rambus, Subaru, Sons of Gallipoli, Karim Rashid, How I Fight
Но что же Photoshop?
Для Photoshop был создан силами GraphicRiver специальный набор Street Art, в составе которого есть кисти, узоры и Action. Найти его можно и на официальном сайте, и на просторах интернета. Вот его мы и рассмотрим, так как лучше, чем они воссоздать на компьютере стилистику уличного творчества сложно. И, возможно, вы спросите: «Что особенно в этом наборе, чтобы посвящать ему целую статью?!» Дочитайте… не пожалеете…
Для работы Action требуется исключительно английская версия Photoshop. Поэтому переходим в Настройки -> Интерфейс и выбираем английский язык. Если такого нет, увы, придется разыскать (и это несложно) версию с поддержкой английского языка.
Открываем нужное нам изображение, мы выбрали вот такой вот образчик скорости и стиля и идея в том, чтобы показать, как автомобиль способен разрывать привычное нам окружение (стены, информация – олицетворение обыденности), нестись вперёд на скорости сквозь все то, что есть в реальном мире. И также важно сохранить отличительные черты модели автомобиля, поэтому …
Изображение открыли, теперь открываем кисточку, узор и экшен по очереди Файл -> Открыть и выбираем нужный файл из имеющейся папочки. Таким образом, они загрузятся в вашу базу и копировать вручную в Проводнике файлы не придется.
Подготовим изображение. Создадим новый слой и назовём его «area». Затем переходим на основной слой и с помощью любого удобного инструмента Выделение обведем и выделим наш объект (автомобиль).
Выбираем инструмент Заливка (Paint Bucket), берем обычный красный цвет из набора RGB, (важно) переходим на слой Area и на нем заливаем наше выделение.
Активируем инструмент кисточка (Brush), открываем окно Action и выбираем Street Art Photoshop Action. Если раскрыть папочку с действиями, то самих действий там очень и очень много. Поэтому, особо не раздумывая, нажимаем Play и ждем.
И вот что получилось.
В целом, для уличного творчества очень даже недурно, но нам нужно для веб-сайта, для фона, для оформления элемента или части страницы другое изображение, с иным смыслом.
Поэтому внимательно изучаем папочки и находим обработку фона. Скопируем фоновый слой, добавим маску и немного кисточкой с черным цветом прорисуем дорогу.
Перейдя на слой с заливкой фона, в режиме наложения изменим свойства заливки узором и выберем стены. Это как раз и есть тот набор узоров, который находится в сборке.
.jpg)
Откроем папочку Your Object Elements -> Colors and layers и еще раз перенесем фоновый слой, добавим маску и кисточкой закрасим фон. Это позволит сохранить оригинальность нашего автомобиля. Затем выборочно поиграем с эффектами на нем, но так, чтобы они полностью не искажали его.
Текст можно подобрать в папочке 11 Graffiti Tags. Да, с помощью него нельзя написать что-то свое, но для арта он подойдет. Поскольку каждый такой текст находится на отдельном слое, то с помощью Ctrl+T можно изменить его размер, перспективу, поворот и прочее. Затем в свойствах слоя добавить окрас, обводку стилистическую и, если нужно, на слое с маской пройтись ластиком или кисточкой.
Таким образом, вот наше новое изображение. Будто бы из рисованного образа, автомобиль врывается в реальный мир. А от изменения силы нажима и прозрачности кисти, эффект преображается.
Поверх него можно наложить заголовки, слоганы-характеристики, ссылку или окошко с видео и многое другое. Вот таким нехитрым образом создать нечто красивое и оригинальное вполне реально. Тем более что фон можно сделать и кирпичный, закрасить им только часть изображения. На все фантазия мастера и, конечно, отталкиваться нужно от смысла и идеи изображения, его роли в дизайне сайта.
Какие-то элементы можно вообще отключить, например, обводки, дымки и прочее.
Заключение
Ключ к использованию уличного искусства в веб-дизайне – независимость и самовыражение. Но не просто так: «я вот так вижу, как будет выглядеть сайт кафе и желание заказчика мне ни к чему». Суть в том, чтобы понять, в чем оригинальность кафе, для кого оно, каково внутри и подойдут ли для сайта элементы стрит-арта. Не все и везде, не весь дизайн в целом, но что-то отдельное. Сайт Subaro использовали как раз идею оформления стрит-арта и получилось весьма недурно. Не слишком явно, но идеи видны.
Несмотря на строгие стандарты и стили, властвующие сейчас, использование арт-изображений и идей не клеймится и не считается чем-то дурным. Вы можете создавать плиточный интерфейс, плоский, чуть анимационный, но на фоне, при 50% прозрачности или больше, может прослеживаться арт-изображение. Вы создаете интернет-магазин одежды, так почему бы обложку коллекции не сделать в стрит-арте, если она для молодежи? Идей воплощений много и в реалии они используются. Нужно только чуть внимательнее присмотреться к тем сайтам, которые мы посещаем каждый день.
