Вексельная графика – это искусство и многие художники создают свои работы исключительно в этом стиле. Более того, веб-дизайнеры сами стараются создать вексельное изображение для оформления сайта. Но что такое вексельная графика, вексельное искусство и почему оно так популярно у мастеров веб-дизайна. Как создать её и где можно использовать? Мы попробуем ответить на эти вопросы и привести примеры использования вексельных изображений в веб-дизайне.
Бытует мнение, что вексельная графика – это растровая картинка (фотография, например) в векторе. Это грубое и невежественное заблуждение. Вексельный арт начал свое развитие еще в начале XXI века и только в 2003 году вексельное изображение стали называть «вексельным». До того художники просто рисовали вектором поверх пиксельной картинки, но понимали, что все это не то, чем они занимались ранее. Но тогда такие арты для веб-дизайна использовались мало, а потому им уделяли внимание только те люди, которые банально интересовались цифровым художественным творчеством.
Что такое вексельная графика
Вексельный стиль (а речь в действительности идет именно о стиле) изображения представляет собой соединение пиксельной графики и векторной. Обратите внимание, что до сих пор существует только эти два вида графики на компьютере. Вексельный арт – это стиль совмещения двух видов графики. Не замещения, а именно совмещения. Рисование фигур и контуров в векторе поверх растрового фона для улучшения качества оригинального изображения или создания нового и необычного. Хотя удобнее в обиходе использовать именно сочетание «вексельная графика». Но только помните – это стиль рисования.
Что представляют собой векторное изображение и векторная графика знают многие. При увеличении векторного изображения качество линий не изменяется и цветовая заливка сохраняется у границ в неизменном виде. Не будем углубляться в техническую сторону, просто увеличим для наглядности картинку ниже.
Растровое изображение или пиксельное при увеличении, наоборот, изменится, деформируется, оно становится замыленным, проявляются квадратики (экраны мониторов отображают все в квадратах, даже окна систем Windows и MacOS). Выглядит такое не очень красиво, мягко говоря, но её используют, так или иначе, в тех случаях, если веб-дизайн создается в пиксельном стиле или требуются небольшие иконки или картиночки, которые заведомо не будут деформироваться в будущем во время посещения сайта пользователем.
Обратим внимание, что если векторное изображение сохранить в формат файла PNG/GIF/JPG, то вектор перестанет быть вектором. Изображение станет автоматически пиксельным со всеми вытекающими. Вектор обычно сохраняется в форматах AI/EPS и работают с ним уже не в Photoshop, а в Illustrator. Но при этом векторные файлы обладают большим размером, а потому использовать их на сайте попросту становится нереальным.
Посмотрим на самые различные сайты. Многие из них обладают адаптивным дизайном, в результате даже фоновое изображение при уменьшении окна браузера или увеличения зачастую меняет свой размер. Инфографика, графические иллюстрации, элементы оформления (ленты, полосочки) на страницах или Landing Page, иконки или графические кнопки – всё это создается или может быть создано при желании веб-мастером в вексельном стиле. На примерах ниже представлены варианты использования вексельной графики для дизайна Landing Page, сайтов: nokia.com/en_int/phones/nokia-3310, KIA Academy (после регистрации), gogoro.com/smartscooter/faster/ и любые другие с графикой.
Вексельные иллюстрации – это наложение форм, линий в виде слоев поверх пиксельного изображения. Их очень часто принимают за векторные из-за высокого качества, но при этом, если вы увеличите размеры картинки, то качество заметно ухудшится, что свойственно как раз таки растровым изображениям.
Итак, чтобы было более понятно, вексельное изображение имеет внешний вид векторного, при этом является обычным пиксельным, но обладает теми же градиентами, плавными и четкими линиями, формами. Ваша задача просто укладывать части изображения, фигуры, которые создаются Пером, друг на друга различные по цвету и оттенку в виде слоев и, таким образом, воссоздавать изображение. Пользоваться при этом кисточкой, аэрографом, пером, карандашом и прочими инструментами. А поскольку при масштабировании изображения качество теряется, то создается вексельная графика в очень высоком разрешении.
Ниже мы приводим оригинальные изображения. Красивы? Их можно использовать для дизайна интернет-магазинов, посадочных страниц, для фона страницы или инфоблока. Попробуйте их сами увеличить и увидите, что из этого получится.
Создание вексельного изображения
Рассмотрим два способа создания вексельной графики на простых примерах в Photoshop.
Например, имеется некая фотография, которую захотелось использовать на сайте, как элемент или фон. Оказалась, что это фотография какого-то человека, выложившего ее в интернет. Что делать? Можно перевести в вектор с помощью Трассировки, но процесс сложен и кропотлив, даже если вы будете использовать готовые программы или тот же Illustrator. Вам придется все равно Пером корректировать, делать обводки и прочая, и прочая. Тем более, что затем сам файл немалого по размеру изображения будет «весить» прилично. Сколько же тогда будет грузиться страница сайта? А если фотография маленькая? То качество и тем более может пострадать.
Намного проще с помощью Пера обработать каждую деталь фотографии и, размещая каждый элемент на собственном слое, воссоздать образ на фотографии. Затем поиграть эффектами наложения слоями, добиваясь реалистичности. Да, слоев может быть много, времени это займет также достаточно много, но все зависит от целей. Может вам требуется сделать более качественным изображение мобильника, который мы показали выше? Тогда Автотрассировка может и не спасти положение.
На примере фотографии девушки превратим её в вексельную иллюстрацию. Пером обводите каждую часть и, создавая из замкнутого контура фигуры, выполняйте заливку.
Затем для придания реалистичности старайтесь добавить фигуры, которые будут представлять собой затененные участки тела, на шее под подбородкам, между пальцами руки.
Если же еще внимательнее посмотреть на фотографию, то заметьте тени на одежде от складок, обилие волнистых линий. Все это можно добавить, уже играя с фильтрами наложения для слоев и с деформацией слоя. Как и придать объемности и блик на очках, градиент от освещения на одежде и человеке в целом.
Другим способом создания вексельной графики является изначальное применение Постеризации. Выберите изображение или часть его для корректировки, перейдите в меню Изображение-Корректировка-Постеризация. Выберите такое значение, при котором появятся готовые цветовые составляющие, которые не будут ухудшать внешнего вида рисунка. Таким образом, вам будет несколько удобнее корректировать растровое изображение, создавая векторные формы с помощью пера или убирая пиксельные дефекты.
Примеры вексельного арта
Самый простой пример, разумеется, мало будет похож на фотографию, но мастерам удается воссоздать удивительные картины. После чего сохранить файл можно в стандартном JPG или PNG и удивить всех высоким качеством графики при малом размере файла.
Или растровая фотография была откорректирована с помощью вектора (волосы). А поскольку использование фотографий применяется широко, то, как раз, частичная «векселизация» подходит очень хорошо для улучшения качества изображения.
И еще примеры использования вексельной графики. Думаем, как это применить в веб-дизайне, представить, в принципе, несложно.
Зачем может понадобиться вообще вексельная графика
Иногда возникает необходимость перевести в растр некоторые векторные формы и фигуры, сохранив при этом высокое качество самого изображения. Кроме этого, несмотря на высокую функциональность Photoshop, некоторые веб-дизайнеры до сих пор используют другие приложения, которые автоматически растрируют векторное изображение при открытии. Почему используются такие программы? Веб-дизайнеры ставят перед собой разные задачи и привыкают к разным инструментам. Но обычно, разумеется, для стилистики и уникальности сайта.
Создание вексельного изображения – энергозатратно в зависимости от конечной цели. Так, казалось бы, небольшое изображение глаза может состоять из более 30 слоев Photoshop. Иногда это реально удобно, ибо создаётся невероятно красивое изображение, качественное, а, как известно, первая страница сайта, Landing Page или же логотип должны быть идеально созданы и не быть ресурсоёмкими, не перегружать собой сайт.
Важно понять тот момент, когда вексельное изображение визуально улучшает качество растрового, делая его похожим на векторное. Более того, использование частичной «векселизации» позволяет придать оригинальной картинке шарм и уникальность, сделать дизайн сайт в целом более привлекательным и необычным. Вариаций использования вексельной графики невероятно много.
Заключение
Вексельная графика необычна и непроста в создании для тех, кто мало работает в Photoshop, но удобна и придает дизайну сайта уникальный вид. Что важно, не обязательно создавать 100% вексельное изображение. Можно частично улучшать фотографии, растровые иконки или clipart, отдельные, несложные элементы веб-дизайна. Наш материал ни в коей мере не утверждает, что всем веб-мастерам необходимо фотографии Анджелины Джоли или Натали Портман, или даже интерьера для интернет-магазина диванов переводить в иллюстрацию кропотливым ручным трудом. Напротив, таким фотографиям можно придать лоск и шарм при использовании контуров и фигур.
Опять же посмотрите выше скриншот проекта art4web.sk/en/ . Здесь и вексельная графика, и векторная, и видно использование различных инструментов.
Что уж говорить, если посадочная страница или весь сайт создаются с графикой или вам необходимо разместить элементы инфографики, а оригинальные изображения обладают явными дефектами. Создавайте поверх растрового фона векторные фигуры. Применяйте эффекты наложения, совмещайте и получится невероятная по красоте и впечатляющая псевдовекторная графика.
Не каждый веб-дизайнер способен создавать векторное изображение с нуля, но если существует растровая база, то творить гораздо проще и удобнее. Веб-дизайн – это искусство и новаторство. Это поиск идей для привлечения внимание посетителя к конечному продукту/услуге/информации.