Сказочная, загадочная, необычная технология трехмерной визуализации (3D) находит свое применение в самых разных областях деятельности. И веб-дизайн стал тому не исключение. Несмотря на то, что дизайн существует в двухмерном пространстве, веб-мастеров это не останавливает и они превращают обычную плоскость в изометрию. Они раздвигают границы привычного и предлагают пользователям новую порцию впечатлений и эмоций.
О 3D-тренде можно говорить часами и неделями. И мы немного уже затрагивали эту тему, когда рассматривали технологию виртуальной реальности VR. Но теперь мы решили уделить внимание теме чуть более простой – трехмерным сценам и объектам, используемым в веб-дизайне. Даже более того, посмотреть, в чем может пригодиться Photoshop и, наверное, самое интересное – какие вариации 3D создаются веб-мастерами.
Пространство
Когда дело доходит до веб-дизайна, объемные объекты продолжают жить в 2D-пространстве. Ибо в противном случае придется использовать технологии VR и специальные очки. Но ведь такое не всегда удобно, согласны?
Если веб-дизайнер решил использовать 3D-эффекты в своем проекте вариаций сайта может быть неимоверно много. Интерфейсы с элементами игры, обзоры продукции, логотипы и сюжетные сцены. И это все больше и больше становится модным. Причем, даже если и не весь сайт создается в 3D, а только некоторые элементы. Речь идет о 3magine, Unitepeople, Oneis, Malibuboats, Beobank, Intouch, Cristof-Echard и иных проектах, где в разных вариациях используется трехмерная визуализация.
Когда речь заходит об использовании 3D-изображений есть несколько вещей, которые особо важны:
- Для реалистичности ощущений мастера добавляют элементы, с которыми можно взаимодействовать курсором мышки.
- Перспектива позволяет создавать глубину.
- Параллакс-прокрутка используется для интерфейса и превращает его в объемный
- Один 3D-трюк на один дизайн. Не стоит перегружать взор и сознание пользователей разнообразием.
- Основная часть сайта и дизайна всегда проста в восприятии, 3D дополняет и украшает собой.
- Хорошее юзабилити обеспечивается подсказками для пользователей, всплывающим текстом мелким шрифтом, легкой проявляющейся анимацией стрелочек и пр.
Например, Beobank использовали игровой курсор, чтобы показать в действии преимущества пластиковых карт. Иконка курсора имеет подпись и нам становится понятно, что нужно сделать: кликнуть, потянуть, передвинуть. 3D-эффект обеспечивается объёмной деформацией самой картой и анимационными эффектами.
Matter-of-mind имеет несколько необычный вариант подсказки. Передвигая курсор по заголовкам Studio, Lab, Shop, логотип на фоне также меняется, подсказывая своим видом, о чем будет данный раздел. Посетив каждый раздел, можно увидеть и эффекты иллюзии 3D, и различные виды анимации с изображениями и текстами, которые и создают трехмерность.
Аналогично просто и удобно выглядит спортивный проект Your Sport Agent, в котором дизайнеры использовали анимацию подсказки, трехмерные фигурки человечков и простой стиль прочих страниц.
Слои и Material Design
Появление 3D в дизайне и нарастающая его популярность обусловлена возможностями Material Design. На основе концепции Google мастера возвращают некоторые методы и эффекты, которые вышли из моды с приходом Flat-дизайна и минимализма. И конечно, в первую очередь, речь вновь идет о тенях. Им всегда уделяется особо пристальное внимание, ибо падать они должны от объекта строго по направлению света. Только если тень выглядит естественно, объект обладает глубиной, он выделяется среди текста, над фоном, среди объектов.
Объекты меню Legis отбрасывают тень. Каждый свою, хотя и кажется, что все они смешались и слились.
Небольшие зарисовки Intouch тоже обладают тенями. Пусть не все они падают под ноги персонажам, но на плечи, руки, часть лица. Все это и создает объемность. Уберите тень, и получится обычная картинка.
Ключевая же идея Material Design – иерархичность объектов на плоскости. В документации Google даже подчёркивается использование 3D-пространства и рассказывается об осях x,y,z. Это и реализовано на Cristof-Echard, Lampinroom, Unitepeople, Pholc, Akvaren, Divan.
Иллюстрации и анимации
Использование объемного объекта – та вещь, где вы можете сочетать 3D и анимацию или вывести иллюстрацию на новый уровень. В частности, интернет-магазины предлагают обзор товара в 3600. Причем создается не видео товара, а анимация объекта по фотографиям и пользователь может с помощью зажатой ЛКМ покрутить объект.
Страницы с таким вариантом представления товара обладают неимоверно большой конверсией. Оно и понятно, если товар можно рассмотреть также, так и в обычном магазине, изменить цвет, размер, его, скорее всего, закажут для доставки, примерки и 99% покупки.
Этот же подход используется и для сайтов иных тематик и направлений. На всех них можно применить обычную фотографию или иллюстрацию. Но когда её заменяют на объемную – восприятие проекта совсем другое. Речь идет о Muller, Milkable, Fracademy, Vig-re, Mausoleodiaugusto, Packwire, Supremo.
На заметку
Когда дело доходит до работы с 3D-визуализацией – простота самое главное. Не стоит удручать пользователей слишком большим обилием эффектов и элементов, которые вы использовали только для того, чтобы все это было. Трехмерный дизайн – это визуальные иллюзии на плоском холсте. Посему важно, чтобы таких трюков было мало. Тогда пользователь не сойдет с ума от восприятия творящегося на экране ментора. Старайтесь сосредоточиться на контенте и тогда вариация 3D сама придет на ум.
Стереоскопическое 3D
Наряду с использованием обычного 3D, дизайнеры создают и уникальные, редкие проекты Stereo 3D. Да, для них, как и для VR, требуются очки, но гораздо более простые. Речь идёт об очках, используемых в кинотеатрах с обычными пластиковыми линзами темно-серого цвета или разноцветными вставками. Особенность такого эффекта – его можно смотреть и без очков, но полноты визуализации не будет. С другой стороны создать его проще. Всего достаточно сделать соответствующее разделение изображения по цветовым каналам и добавить анимации. Сложностей, как с VR, практически нет.
Обратная сторона медали в том, что сайты редки и не предназначены для широкого круга пользователей. Очки не у всех есть, да и не на всех устройствах будет работать.
Проекты Odra, Massmigrations и сайт компании Mappi, Vinylcuts, DEVX Experiments - DDD 2017, Standardabweichung, Les nouveaux pauvres, Distortion Effect, Instancing, Digitalpodge, Turimagen. Много получилось, но ввиду редкости реализации стиля посмотреть их все, как минимум, интересно.
Photoshop всему голова
3D-объекты и стереоскопические изображения по отдельности используются в веб-дизайне куда чаще. Даже более, существует множество идей того, как сочетать обычные элементы сайта со стереоизображениями. Например, на проекте Intouch сделать изображения-анаглифы или к самолетику Fracademy добавить птичку или облачко, а может к проекту Легис необходимо расширить меню объектов. Это условные примеры, но вариаций работы с 3D может быть неимоверно много.
Как раз Photoshop способен помочь в этом, поскольку в нем существует огромный пакет инструментов по работе с объемными фигурами. Что самое интересное, Photoshop может превращать обычную картинку 2D в объемную 3D. Вручную останется только настроить объем. И это гораздо проще, чем изучать специальные пакеты приложений по работе с 3D.
Объемное 3D
Выберем не слишком сложное изображение, например ящерки. Представим, что создаем зоосайт, а подходящего готового объекта нет. Если рисунок на прозрачном фоне – уже удобно, если нет – аккуратно выделяем ящерку и в любом случае копируем объект на отдельный слой. В противном случае, в 3D превратится весь холст, а нам это не нужно.
Переходим во вкладку 3D и выбираем Экструзия -> Создать. В принципе вот он 3D, но ведь нет реалистичности. Экструзия, то есть глубина, нам сейчас очень мешает. Выделяем слой Ящерка и в свойствах 3D выбираем первый параметр – Сетка. Здесь во вкладке устанавливаем значение Экструзии – 0. Также обратим внимание на параметры Деформировать и установим все значение на 0, так как никакие искажения, сдвиги и прочее нам сейчас не нужны.
Теперь активируем Капитель и видим на экране возможность создать выпуклость. Стороны выбираем Спереди и Сзади. Так объемность будет полной, а не только сверху. Переводим курсор мышки к правой иконке Интенсивность раздувания и, как показано стрелочками, двигаем курсор вверх. Наш объект обретает объем.
Хорошо. Объем есть, но если подвести курсор к границам рамки объекта и повернуть его, рассматривая ящерку снизу, то видим, что границы очень явно видны и некрасивы. Потребуется изменить Угол Выпуклости. Это стрелка синяя справа. Её переводим в 900.
В общем-то и все. Вот и создали мы самый простой объемный предмет. Теперь можно поиграть с освещением, тенью или сделать это отдельно на вкладке слои, выбрав режим наложения. Мы добавили новый слой с камнями и мхом, уменьшили ящерку и, используя Маску, немного скрыли её во мхе. Будто она затаилась перед камушком.
Теперь можно расположить какой-нибудь текстовой блок и часть сайта готова. Аналогично можно поработать и над иными объектами, даже изменить текстуру, можно произвести экспорт объекта в различные форматы, применить марионеточную деформацию. И да, разумеется, в реальности грудь Ящерки имеет иной окрас и объем, нежели сверху, но в нашем случае это не столь важно. Более того, Капитель можно настроить по вкусу.
Стереоскопический 3D
А что если пойти дальше и посмотреть на природу и ее обитателей сквозь очки? Создать анаглиф можно двумя способами. Например, при совмещении с раскладкой по каналам двух почти одинаковых фотографий. На них объекты расположены с минимальным смещением. Мы рассказывали уже принцип объемного зрения в теме параллакса. Здесь используется тот же принцип, то есть создаются картинки для левого и правого глаза и совмещаются. В интернете отснятых на стереокамеру фотографий много.
Но если нужного нет, можно и одной фоткой или иллюстарцией воспользоваться. Мы сохранили нашу готовую сцену в новом файле и открываем его отдельно. Представим, что хотим, чтобы камушек стал объемным. Выделяем его и вырезаем на новый слой. Слой копируем один раз и даем ему название «правый-синий» и еще раз копируем с названием слоя «левый-красный». Наши очки имеют красный и сине-зеленый цвета, но обычно именно так и располагаются цвета в очках.
Теперь выбираем объект «левый красный» и двигаем его вправо. А на слое «правый-синий» – влево.
Для удобства дальнейшей работы установим Параметры наложения для каждого из двух слоев соответственно их цветности.
Если посмотреть, то можно видеть белые дыры от сдвига. Их быть, разумеется, не должно. Для этого увеличиваем каждый слой с камушком. Не смещаем его, но меняем размер так, чтобы он собой закрыл белое. Но не сильно увеличивайте, иначе эффект будет сильный и глаза устанут. Если есть очки, то над эффектом уже можно работать в них.
Затем копируем два раза фоновый слой и тоже присвоим им каналы красного и голубого+зеленого и сдвигаем их тоже влево и вправо соответственно.
Готово. Мы получили стереокартинку всего изображения и камушка на нем. Чем сильнее сдвиг – тем глубже эффект, поэтому будьте аккуратнее. Каждый человек воспринимает стерео по-своему.
Можно создавать анаглиф и иными способами, но это самый простой и быстрый.
Выводы
Вместе с 3D-эффектами вы можете избежать того, чтобы типографика и изображения выглядели устаревшими. Хотя увязнуть в «ноу-хау» можно быстро и пользователям это надоест.
Хитрость и тонкость использования 3D в том, что они должны быть реальными, не должно быть очевидным, что это эффект. Исключение здесь составляют стереоскопические рисунки, созданные по одной фотографии. Если делается это камерой – эффект более качественный.
Хорошие 3D-интерфейсы, элементы контента позволяют пользователям дольше задержаться на сайте, проявить интерес к содержанию, повторно посетить проект.
