Гайд: как я создаю трехмерные иконки для сайтов на прозрачном фоне с помощью нейронной сети

#иллюстрации #ui #ai #chatpgt #dalle

Очень редко хороший дизайн обходится без иллюстраций: иконки или изображения объектов помогают передать уникальный стиль и настроение бренда, выстроить правильные ассоциации для клиентов и передать контекст. В этой статье-руководстве я хочу поделиться подходом, который я использую для создания красивых трехмерных иллюстраций любых объектов на прозрачном фоне с тенью.

Это одна из статей-руководств, в которых я рассказываю более детально о процессе своей работы. Больше кейсов и заметок о разработке и программировании читайте в моем Telegram-блоге «Код без тайн».

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

Недавно, одно агентство маркетинга обратилось ко мне с небольшим заказом по верстке на Tilda для своего клиента. Однако, помимо самой верстки необходимо было обновить иллюстрацию для одного из блоков.

Обычно, такие иллюстрации создаются 3D-художником — человеком, который может не только правильно воссоздать форму объекта, но и выстроить композицию, настроить материалы и свет.

Например, для того, чтобы передать эффект металлической поверхности нужны одни настройки материалов, в то время как пластика или гипса — другие.

В результате, чтобы создать даже простую иллюстрацию календарика требуется довольно внушительный опыт и усилия.

С появлением нейронных сетей Stable Diffusion, Midjourney и DALL•E создавать уникальные изображения в высоком качестве стало проще. Можно просто «попросить» нарисовать картинку того или иного объекта, указать какого цвета, формы и т.д. должны быть детали.

И хотя настоящий фурор в сфере генерации фотореалистичных изображений в свое время произвела нейронная сеть Midjourney, другие инструменты также не отстают.

В частности, принято считать, что разные модели подходят для разных задач: какие-то больше для создания фотографий, в то время как другие — для иллюстраций.

Именно поэтому для целей создания иллюстраций я выбрал DALL•E 3 от OpenAI. К тому же ей можно воспользоваться бесплатно через Microsoft Copilot.

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

У такого подхода есть как плюсы, так и минусы: с одной стороны, текст позволяет очень гибко описать желаемый результат, с другой — нейронная сеть может не правильно «понять» запрос и придумать лишнего. Кроме того, не всегда удается словами передать идею точно как она представляется у нас в воображении.

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

Далее я покажу процесс того, как я создаю запрос (промпт) для нейронной сети на примере Microsoft Copilot.

Вначале я формулирую грубое описание того, что мне нужно.

Например:

Получился интересный результат, но он не подходит под мою задачу.

Дополним запрос, добавив примечание о том, что иллюстрация должна быть похожа на фотографию:

Это уже больше похоже на то, что мне нужно, однако, календарь выглядит слишком пластилиновым. Да и деревья в данном случае не к чему. Но стоит отметить, что уже на данном этапе иллюстрация выглядит довольно хорошо, просто она не подходит для моего случая.

Вот таким образом, пробуя разные запросы (иногда по несколько раз) мы постепенно можем прийти к желаемому результату:

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

Теперь, когда у меня есть иллюстрация, можно приступить к ее обработке: удалению фона и обработке тени.

Для обработки изображения удобнее всего использовать Adobe Photoshop. Поскольку я не занимаюсь дизайном профессионально, то вместо него я буду использовать бесплатный онлайн аналог — Photopea.

По функционалу он практически полностью копирует Photoshop и в нем есть все необходимые инструменты для удаления фона.

Ударение фона состоит из двух этапов:

Для первого этапа можно воспользоваться инструментом «лассо», однако быстрее и проще здесь тоже использовать искусственный интеллект — я использую бесплатную версию Clipdrop для удаления фона изображения. Это намного быстрее и проще ручной обработки:

Теперь, когда был получен объект без фона, останется изолировать тень. Для этого можно применить небольшую хитрость: взять за основу один из цветных каналов и использовать его для управления тенью. Подробно данный подход показан в этом видео:

В нашем случае слой для синего цвета имеет самый высокую констрастность, поэтому выбираем его:

Воспользовавшись информацией этого цветового канала создадим маску для тени. На данном этапе можно скорректировать яркость маски так, чтобы более точно изолировать тень:

Лишние участки слоя с тенью убрать довольно легко кистью с высокой степенью размытия. В итоге получим только тень, которую можно скомбинировать с объектом на прозрачном фоне:

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

В итоге, весь процесс состоит из четырех этапов:

Результат — красивая иллюстрация, сгенерированная под индивидуальные требования, которая располагается на прозрачном фоне с тенью.

Если вам понравилась эта статья, буду благодарен, если поставите лайк 🔥 и напишите комментарий — так я пойму, что на подобные темы стоит писать больше.

Также я веду свой Telegram-блог «Код без тайн», в котором пишу о веб-разработке, информатике и других технологиях: