Предыдущие статьи про иконки породили множество вопросов о технике рисования таких, по сути, мини иллюстраций. Постараюсь раскрыть эту немудреную тайну:)
Подробного описания, что и куда нажать не привожу, это бы потребовало написания целой серии уроков, а хочу поделиться общим принципом.
В качестве примера взял иконку из текущего проекта.
Сервис Rizzoma — это система коллаборации, альтернатива Google-wave.
В ходе работы над сайтом родилась идея сделать красивые иконки для каждого блока с преимуществами сервиса. Улитка символизирует <a rel="nofollow" href="http://habrahabr.ru/blogs/ui/135381/">контекстные сообщения и по сути своей является продвинутым символом @
Эскиз
Обычно работа над иконкой начинается с карандашного эскиза, но в этот раз оказалось достаточно вдохновляющих картинок Fast snail. Было решено сделать свою версию улитки с турбиной — прекрасную и очаровательную.
Моделирование
Моделю обычно в 3D Max, но по сути инструмент не имеет решающего значения. С тем-же успехом можно было-бы это делать в Maya или Blender.
Раковина
Модель делается грубой низкополигональной, затем накладываем сглаживание.
Слизень и турбина
Аналогично делаем мягкую часть улитки. Для турбины сглаживание не нужно, можно сразу делать с плотной сеткой.
Готовая модель
Собираем все вместе
Визуализация
Рендерю посредством Vray, версию лучше брать посвежее чтобы багов было поменьше и все шло по шустрее.
Сцена
Я использую достаточно стандартную С-образную сцену с тремя источниками света. Она позволяет получать не слишком шумный с хорошими отражениями рендер при высокой скорости просчета. Урок по созданию подобной сцены можно посмотреть например здесь. Я добавил еще два дополнительных источника света, один синий, другой желтый, чтобы сделать цветные блики и добавить «драматизма»
Отрендеренная модель
Делаю тестовый рендер с простой серой текстурой, чтобы посмотреть как ложиться свет. Здесь видно что немного доработан «ремешок» для крепления турбины.
Текстурирование
Находим понравившуюся картинку улитки и разбираем ее на органы на две текстуры. Переводим текстуру в черно-белое, немного повышаем контраст и получаем бамп (текстура неровностей) Текстуры накладываю без развертки, т.к. моделька не будет анимироваться и вид будет только с одного ракурса. Выставляем нужную степень отражения и прозрачности. Есть шикарный сайт http://www.vray-materials.de на нем очень много качественных материалов для Vray. Можно использовать готовые или брать за основу для создания собственных.
Рендер
Обсчитываю картинку в большем разрешении чем требуетися, чтобы в дальнейшем после обработки ее уменьшить и «доточить». Так получается более качественный конечный результат, меньше шума и четче детали.
Маски
Дополнительно рендерится альфа-канал и маски для разных объектов. Теоретически маски можно считать одним каналом, раздав нужным материалам (или обьектам) соответствующие ID, но мне удобно по отдельности.
Постобработка
Готовый, достаточно грязноватый и неопрятный, рендер корректируется в фотошопе:
— Используя альфа-канал вырезаем объект из фона
— Фон делаем более светлым и контрастным, удаляем лишнее оставляя только тень
— По маскам вырезаем объекты на отдельные слои
— Каждый объект обрабатываем, делаем ярче, контрастней, добавляем блики, корректируем форму и т.д. Какой-то точный алгоритм этих действий сложно составить, все делается «на глаз» и зависит от того какой материал обрабатывается и что хочется получить
Финал
Немного уменьшаем и добавляем резкости.
Большая улитка будет использоваться для статей, маленькая на главной странице.
Автор: idenisenko