Челлендж
Для портфолио и дриббла мне постоянно нужны кадры интерфейса под углом, с размытием и тенями. В Blender на один такой кадр уходило полчаса, а после любой правки макета всё заново. Мокапы в Figma быстрее, но широкие дашборды они обрезают.
Хотелось инструмент, где закинул скриншот, настроил кадр и сразу получил картинку или видео.
Процесс
Похожая идея есть у UI Camera, но мне не хватало настроек: своих пролётов камеры, анимированных фонов, нормальной работы с видео. Поэтому решил сделать своё. Собрал первую версию, пользовался сам, потом дал знакомым без объяснений и смотрел, где они тупят.
Что обнаружилось
- В первой версии было 15 иконок в одну строку. Всё в один клик, но найти нужное было невозможно.
- Люди не понимали, с чего начать. Подсказки у кнопок были, но куда кидать скриншот и как получить результат, было непонятно.
- Камера и скриншот двигались одними и теми же ползунками, и я сам постоянно двигал не то.
Ключевые решения
- На виду только камера и объектив. С ними работаешь постоянно, остальное убрал в отдельные панели.
- Пресеты вместо фото-терминов. Не надо знать, что такое 85 мм и f/1.8: выбираешь вариант с понятным описанием. Цифры остались для тех, кому надо.
- Камера отдельно, скриншот отдельно. Камеру крутишь ползунками, а скриншот просто тащишь за точку.
- Короткий тур при первом запуске. По шагам показывает, что куда, прямо на настоящем интерфейсе.
Результат
Около 30 человек уже попробовали, по их отзывам доделал интерфейс. Сам собираю в нём все визуалы для портфолио: от скриншота до готового кадра примерно минута.
PNG и MP4 до 4K, свои пролёты камеры через таймлайн, анимированные фоны. Всё прямо в браузере, бесплатно, скриншоты никуда не улетают.
