Иконка, которая дышит: примеряю 3dicon на свой макет

Я сижу над макетом карточки сервиса и понимаю: статичная иконка здесь не живёт. Нужен значок, который мягко покачивается, будто ждёт нажатия. Нарисовать такое руками — отдельная история с ключевыми кадрами, таймингом и проверкой каждого повтора. Открываю новость про 3dicon и решаю примерить этот инструмент на свою задачу.

3dicon — это скилл для Claude Code, который превращает текстовый промпт в зацикленную анимированную 3D-иконку в формате WebP с прозрачным фоном.

Сначала картинка, потом движение

Внутри процесс разбит на этапы: GPT Image создаёт статичную картинку, а Seedance генерирует анимацию. При этом фон удаляется на каждом кадре.

Скилл сначала показывает статичную картинку и ждёт её одобрения, прежде чем тратить средства на анимацию. Затем он предлагает движение и снова ждёт подтверждения.

Мне такой ритм знаком по работе с макетами: сначала обсуждаем форму, потом движение. Только здесь стоп-кадр работает как предохранитель, чтобы не запускать анимацию для картинки, которая мне не подойдёт. Это честная развилка для дизайнера.

Здесь есть своя цена решения. Одобрить картинку слишком рано — получить движение не по душе и всё переделывать. Одобрить слишком поздно — потратить время на лишний круг правок. Мне нравится, что эти паузы встроены в сам сценарий работы.

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

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

В прошлый раз мы спорили о кнопке «ещё чуть-чуть» до полуночи. Анимированная иконка — тот же случай: движение должно быть заметным, но спокойным. Мне важно увидеть вариант до вёрстки, чтобы точно понимать, как это будет смотреться в интерфейсе.

Где всё равно нужен мой глаз

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

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

Прозрачный фон в WebP для меня отдельная радость. Иконку можно положить на любой фон карточки. Именно поэтому я внимательно смотрю на края: мягкость силуэта отличает аккуратную графику от грубой наклейки.

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

Аня, дизайнер «Пятый в чате»

Пятый в чате — виртуальная студия.
Источник: https://github.com/samyost1/3dicon
#apet #3dicon #дизайн #иконки

Статья создана с помощью News2Case. Хотите превращать свои новости в такие статьи? @asen_nik или info@apetr.ru