Волшебный чемоданчик c инструментами создания графики для продуктового дизайнера

Были ли у вас задачи, где нужно было подготовить графику? Например, нарисовать баннер для акции: «Отправим всем по резиновой уточке» или «Защити свой аккаунт от мошенников»? Было что-то такое? Предполагаю, что с большой долей вероятности, ответ будет «да». У меня тоже такие задачи появлялись в бэклоге. И сегодня я расскажу, как подобные задачи можно выполнить нестандартно.

Зачем?

У вас, наверное, уже появился вопрос: «Я — продуктовый дизайнер, зачем мне рисовать графику?»

У современного продуктового дизайнера должно быть достаточно много компетенций.

Отрисовать графику — всего лишь одна из них. И, как кажется лично мне, самая яркая.

• Во-первых, освоив этот навык, вы сможете увеличить как количество своих компетенций, так и чек. Но это не точно.
• Во-вторых, вы сможете использовать графику в продуктовых прототипах на исследованиях. Я расскажу, с помощью чего можно приблизить её к готовому результату. А вы сможете проверять гипотезы.
• В-третьих, не за горами время, когда от продактов будут прилетать задачи для VR- и AR-сред. Изучение трёхмерной графики поможет вам начать осваивать трёхмерное пространство и, соответственно, решать задачи в этом пространстве.
• В-четвертых — нейросети. Рисование графики — один из способов использования нейросетей.

Итак, давайте начнём наше путешествие. Будем идти по уровням.

Level 1: печём блинчики

№1. Всё начинается с идеи. И моя идея заключается в том, что я иду в Figma и рисую простую SVG-иконку. Любой продуктовый дизайнер, скорее всего, с этим справится.

№2. Дальше качаем получившуюся SVG-иконку на комп и перетаскиваем её в web-инструмент Endless Tools.

№3. Выбираем раздел Shape Tool, загружаем нашу SVG-иконку. Дальше Shape Tool самостоятельно выпекает 2D-иконку в трехмерный объект, как блинчик.

№4. Нам остаётся только выбрать текстуру, цвет, немного покрутиться и повертеться — и всё.

P.S. Можно ещё покрутить настройки света и окружения, но в 90 % случаев это не нужно.

• Это web-сервис, работает в любом браузере.
• Бесплатный.
• Функционал небольшой, но прикольный.
• Можно делать 3D-шрифты, креативные обложки с разными фильтрами.
• Есть небольшая библиотека 3D объектов с настройкой текстур, цвета и прочего.

В итоге, у нас получился вот такой результат.

Давайте немного его обсудим.

• Выглядит нормально.
• Реализуется легко.
• Готово для проверки гипотез. Такой баннер уютно смотрелся бы в любом прототипе.

Что ещё есть на первом уровне?

Готовые шаблоны.

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

Нейросети.

• В Midjourney пишу, что: «Хочу объект в 3D и по центру экрана, весь объект видно». Дополнительно указываю, что мне нужен черный или белый фон, без бликов и теней.
• В Removal.ai удаляю фон.
• Готовую PNG ставлю в макеты в FIgma как мне хочется.

Pixel Art из кубиков.

Этот метод на закуску, потому что он самый простой — качаете где угодно один 3D-кубик, дублируете и расставляете в нужном порядке. Не забудьте покрасить кубик в любой цвет Pixel Art.

Добавил бонусом, потому что один раз реально пригодилось.

Level 2: лепим и красим

№1. Опять начинаем с идеи, с макета…

№2. Нам нужно смоделировать объект из самых базовых форм: конусов и чуть-чуть прямоугольников. Для этого используем Plasticity.

Plasticity — это сервис, созданный художниками для художников.

Если вас заинтересует моделирование, пробуйте. Это реально просто. Даже если вы смоделируете что-то очень простое — это уже будет результат.

Единственный минус Plasticity — 30 дней бесплатного триала. Но месяца достаточно, чтобы вкатиться в 3D моделирование.

Дополнительно:

• Лучший урок на YouTube про базовые функции моделирования в Plasticity.
• YouTube-канал для тех, кто хочет жести (сложное моделирование).
• ВК сообщество Plasticity в России.

№3. Что ж, а у нас на выходе получилась 3D-модель, которую нам с вами нужно загрузить в следующий инструмент — в Spline. В нём нам нужно сделать всего три простые вещи:

• Покрасить модель в градиент. В данном случае я покрасил в светло-серый и тёмно-серый.
• Добавить свечение по краям, чтобы придать форме поведение пластика, как на пластиковых игрушках.
• Сохранить как PNG-картинку без фона.

Spline — это Figma для 3D-художников.

• Официальный ютуб аккаунт с топовыми уроками
• @spline_ru — Телеграмм-сообщество Spline в России. Можно задать любой вопрос или найти друзей.

№4. В итоге у нас получается вот такой результат.

Давайте его немного обсудим.

• Ключ выглядит уже интереснее, чем в прошлый раз. Хочу обратить внимание не на то, как он выглядит, а скорее на то, КАК мы его сделали. На втором уровне появилось больше возможностей — появилась, не только ось Z, а ещё X и Y.
• На этом уровне процесс, по-прежнему, не сложный. Я, правда, настаиваю на том, что получить такой результат несложно — достаточно посмотреть 3 ролика на YouTube: базовые функции Plasticity, базовые функции Spline и какой-нибудь урок по той модели, которую вы хотите сделать.
• Всё ещё работает для проверки гипотез. А может быть, даже и для боя. Но это будет зависеть от того, насколько придирчива дизайн-система в вашем продукте.

Но мы могли пойти другой дорожкой…

После того как мы в Plasticity создали 3D-модель, сделаем её скриншот….и просим нейросеть Stylar её раскрасить.

Я использовал простой промпт: «Realistic metal with scratches and scuffs, with shine and roughness, and a little bit of corrosion»

Bот что сделала нейросеть.

Я не столько удивлен самим результатом, сколько тем, насколько это было просто.

Что ещё на втором уровне?

Целая пачка аналогов Spline.

Видимо, когда Spline стал популярен, другие сервисы тоже подсуетились. Конкуренция большая. У каждого есть что-то крутое, но пока выигрывает эту гонку Spline. Особенно это видно по росту комьюнити.

• Vectary. Чуть-чуть более усложнённая версия Spline, но зато функций больше. За эти функции приходится платить, хотя есть тридцатидневный платный период.
• Womp. У Womp есть одно преимущество: он очень круто красит модели в воду, жижу, металлы — короче, в разные блестящие текстуры.
• Stephaneginier. Бесплатный онлайн-сервис для скульптинга (моделирование кистями). Для тех, кто любил пластилин в детстве.

Также на втором уровне есть нейронки, которые красят.

Они просто красавчики. Я выделяю Adobe FireFly и Stylar просто потому, что DALL-E 3, к сожалению, хуже всех сохраняет ту форму, которую вы ей показали. У Adobe Firefly и Stilar такой проблемы нет — они просто перекрашивают. Adobe очень круто работает, но есть проблемы со входом, так что лови гайд по установке.

Есть нейронки, которые моделят.

• Tripo3d. Моделирует через текстовый промпт, выдаёт 4 варианта.
• Hugging Face для генерации 3D-модели из картинки.
• Meshy. Ещё один AI, моделирующий модели.
• Kaedim. Платный. Но очень качественно генерирует модели из ваших картинок.

Но, к сожалению, пока что модели выглядят так, будто я увидел их во сне.

днако нейросети развиваются, и мы все знаем, как быстро. Просто подождите, когда они дойдут до приемлемого уровня. Я думаю, что они сильно изменят рынок 3D-моделирования, и моя статья станет неактуальной.

Level 3: ты не пройдешь

…Или Blender для всего.

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

Но когда я готовился к третьему уровню, то понял, что…

Не нужен вам третий уровень.

Серьёзно. Не хочу обидеть Blender и его разработчиков. Инструмент очень крутой, очень профессиональный, но...Просто посмотрите на интерфейс для покраски модели.

Я уверен, что можно многого добиться, но... это сложно. Очень. Сложно. В Blender я достиг определённого результата в моделировании ключа и сделал три варианта.

Вот они.

Смоделированы в Blender, раскрашены в Spline, в Blender и в Stylar.

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

Когда вы дойдёте до этой границы, то будут важны только те навыки и умения, которые вы сможете применить. А в каком инструменте будете работать — неважно, хоть в PowerPoint.

Game Over

Как только появляется какой-то инструмент, я стараюсь просто вкатиться. Смотрю, что там у него, как устроен, что умеет и получится ли у меня с ним работать. И здесь как раз к месту будет метод прогрессивного джипега, которым я с вами поделюсь. Начните с малого: сделайте простой шарик в Spline и добавьте его на фон в свой макет. Не успеете оглянуться, как через квартал вы уже будете запускать 3D-модель кота в продакшн.

Вывод всей моей статьи в том, что мы всё ещё полезны. Мы всё ещё пользуемся нейросетями, а не они нами.

Возможно, через год всё повернется на 180 градусов. Но поскольку наша работа — это по большей части процесс, а сейчас процесс состоит именно из этих инструментов, то, если вам интересно 3D-моделирование — пробуйте сейчас.

Сегодня я показал вам, как вылупить 3D-модель из плоской 2D-иконки. Но кто знает, куда вас может это привести? Может быть вы начнёте развиваться и будете работать над своими продуктами в метавселенных. Может быть, увлечётесь инженерным моделированием и и сделаете костюм мандалорца для Comic-Con. А может вам понравится работать с нейросетях, и вы там чего-нибудь добьетесь.

Но чтобы эти двери для вас открылись, вам нужен только ключ. Держите — 🗝️.

Источник