Иконосказ / Рисуем трехмерные иконки

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

В качестве примера взял иконку из текущего проекта.
Сервис Rizzoma ^[1] — это система коллаборации, альтернатива Google-wave.
В ходе работы над сайтом родилась идея сделать красивые иконки для каждого блока с преимуществами сервиса. Улитка символизирует <a rel="nofollow" href="http://habrahabr.ru/blogs/ui/135381/">контекстные сообщения и по сути своей является продвинутым символом @

Эскиз

Обычно работа над иконкой начинается с карандашного эскиза, но в этот раз оказалось достаточно вдохновляющих картинок Fast snail ^[2]. Было решено сделать свою версию улитки с турбиной — прекрасную и очаровательную.

Моделирование

Моделю обычно в 3D Max, но по сути инструмент не имеет решающего значения. С тем-же успехом можно было-бы это делать в Maya или Blender.

Раковина

Модель делается грубой низкополигональной, затем накладываем сглаживание.

Слизень и турбина

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

Готовая модель

Собираем все вместе

Визуализация

Рендерю посредством Vray, версию лучше брать посвежее чтобы багов было поменьше и все шло по шустрее.

Сцена

Я использую достаточно стандартную С-образную сцену с тремя источниками света. Она позволяет получать не слишком шумный с хорошими отражениями рендер при высокой скорости просчета. Урок по созданию подобной сцены можно посмотреть например здесь ^[3]. Я добавил еще два дополнительных источника света, один синий, другой желтый, чтобы сделать цветные блики и добавить «драматизма»

Отрендеренная модель

Делаю тестовый рендер с простой серой текстурой, чтобы посмотреть как ложиться свет. Здесь видно что немного доработан «ремешок» для крепления турбины.

Текстурирование

Находим понравившуюся картинку улитки и разбираем ее на органы на две текстуры. Переводим текстуру в черно-белое, немного повышаем контраст и получаем бамп (текстура неровностей) Текстуры накладываю без развертки, т.к. моделька не будет анимироваться и вид будет только с одного ракурса. Выставляем нужную степень отражения и прозрачности. Есть шикарный сайт http://www.vray-materials.de ^[4] на нем очень много качественных материалов для Vray. Можно использовать готовые или брать за основу для создания собственных.

Рендер

Обсчитываю картинку в большем разрешении чем требуетися, чтобы в дальнейшем после обработки ее уменьшить и «доточить». Так получается более качественный конечный результат, меньше шума и четче детали.

Маски

Дополнительно рендерится альфа-канал и маски для разных объектов. Теоретически маски можно считать одним каналом, раздав нужным материалам (или обьектам) соответствующие ID, но мне удобно по отдельности.

Постобработка

Готовый, достаточно грязноватый и неопрятный, рендер корректируется в фотошопе:
— Используя альфа-канал вырезаем объект из фона
— Фон делаем более светлым и контрастным, удаляем лишнее оставляя только тень
— По маскам вырезаем объекты на отдельные слои
— Каждый объект обрабатываем, делаем ярче, контрастней, добавляем блики, корректируем форму и т.д. Какой-то точный алгоритм этих действий сложно составить, все делается «на глаз» и зависит от того какой материал обрабатывается и что хочется получить

Финал

Немного уменьшаем и добавляем резкости.
Большая улитка будет использоваться для статей, маленькая на главной странице.

Автор: idenisenko