Урок 2: Делаем стильный сайт с 3d анимацией на Tilda с помощью Нейросети и Spline3D | 2024

  Переглядів 7,876

Kalinin Design

Kalinin Design

День тому

На данном уроке продолжаем делать стильный сайт с 3d анимацией. Это бесплатный курс по веб дизайну и созданию сайтов.
Данный бесплатный курс для начинающих и новичков научит создавать красивые современные сайты, они будут адаптивные с 3d анимацией, параллаксом, а самое интересное, что графический и текстовый контент придумает нейросеть DALL-E3. Останется собрать все вместе.
На прошлом уроке мы создавали текстовый прототип с помощью YandexGPT 2, и сделали в Figma макет сайта.
На данном уроке мы создадим графику и иконки в нейросети DALL-E 3. Экспортируем векторные элементы из Figma в 3D редактор Spline3D, там же сделаем скины из наших картинок. Далее создадим анимацию карты, анимацию пластиковой карты по скроллу (scroll) и анимацию снежинок на фоне
На третьем уроке мы будем экспортировать макет из Фигмы в Тильду. В Tilda добавим HTML блок в который будем добавлять код с нашими 3D моделями
Телеграм школы: t.me/kalinin_design
Инстаграм школы: / kalinin.school
Behance школы: www.behance.net/KalininSchool
Dribbble аккаунт школы: dribbble.com/kalinin_design
Сайт школы: kalinin.school
Matcukito Kioto, c152 - it was the longest night of my life
0:00 В каких программах создавался сайт с 3D анимацией по скроллу
0:40 О чем данный ролик
0:50 Что было на прошлом занятии (создание макета в Figma)
1:05 Дорабатываем макет в Figma (меняем цвета и стили)
1:40 Добавляем детали к банковской карте
2:19 Нейросеть DALL-E3 (где найти, как пользоваться)
3:00 Пишем промт для нейросети, для создания фона карты
4:15 Добавляем макет банковской карты на прототип в Figma
4:40 Добавляем на макет в Фигме декоративные элементы (снежинки)
5:30 В нейросети создаем иконки для сайта
6:48 Экспортируем иконки из PNG в SVG
7:35 Готовим векторные элементы для экспорта в Spline3D
8:26 Spline3D (обзор программы, как работать, основные инструменты, материалы)
9:45 Экспортируем карту в Spline3D
10:50 Добавляем картинку от Нейросети
11:15 Создаем свой материал в Spline3D
11:30 Добавляем источник света в Spline3D
12:30 Создаем простую анимацию (вращение карты)
13:40 Создаем анимацию по скролу (scroll)
15:00 Настраиваем экспорт анимации из Spline3D
16:30 Экспортируем векторную снежинку в Spline3D
17:00 Создаем анимацию вращения для снежинок
18:40 Добавляем эффект свечения Bloom
18:50 Бонус при работе в Spline3D
19:36 Что будет на следующем уроке
#вебдизайн #figma #нейросеть #spline3d

КОМЕНТАРІ: 27
@kalinin_design
@kalinin_design 3 місяці тому
Примеры из видео: kalinin.school/sberkot kalinin.school/sberbank kalinin.school/sbercup Телеграм канал, с полезным материалом: t.me/kalinin_design Страница в Spline Community app.spline.design/@kalinin Портфолио школы www.behance.net/KalininSchool dribbble.com/kalinin_design Сайт школы kalinin.school
@LaserMaster-in3nq
@LaserMaster-in3nq 11 днів тому
Красавчик, спасибо за материал!
@kalinin_design
@kalinin_design 11 днів тому
Благодарю 🙏
@Roman_851
@Roman_851 3 місяці тому
О, вот бы уроков по Spline, особенно по настройке материалов, которых в бесплатной версии нет, на сколько я помнял
@LiliyaLilova-by1sm
@LiliyaLilova-by1sm 2 місяці тому
Супер 🔥 Жду следующий урок
@annemimosa
@annemimosa 2 місяці тому
Обалдеть какая Крутая инфа 😻
@user-sj3ik7ue3o
@user-sj3ik7ue3o 2 місяці тому
Крутяк! Продолжай в том же духе! Ждём 3 часть :)
@kalinin_design
@kalinin_design 2 місяці тому
Спасибо, скоро будет
@user-wb8sy3rh5p
@user-wb8sy3rh5p 2 місяці тому
Отличные уроки 🔥 Когда будет 3-й?
@kalinin_design
@kalinin_design 2 місяці тому
Спасибо, на этих выходных
@nonamenoname9402
@nonamenoname9402 2 місяці тому
💎
@tryhardczar2047
@tryhardczar2047 2 місяці тому
Когда мы придем к кульминации? уже месяц прошел. Ждем-с
@kalinin_design
@kalinin_design 2 місяці тому
Все будет 🙌
@hunted690
@hunted690 2 місяці тому
Вопрос возник. При экспорте 3д анимаций из Spline, то сайт начинает подлагивать. Как это можно решить?
@kalinin_design
@kalinin_design 2 місяці тому
Привет, уменьшать размер файла с анимацией: при экспорте есть кнопка Run Test, после запуска теста будет видно сколько весит анимация и будут советы по оптимизации. Как правило все упирается в картинки которые ты подгружаешь в сцену
@lanabereza5755
@lanabereza5755 2 місяці тому
Фото как из фильма ужасов
@kalinin_design
@kalinin_design 2 місяці тому
По задумке, кот в шоке от цен в магазине, т.к. карту достают при оплате на кассе 🙀
@avelur23
@avelur23 День тому
Привет подскажи пожалуйста, через какую программу записываешь видео и как сделал окошко камеры со скругленными углами?)
@kalinin_design
@kalinin_design 2 години тому
Привет, Icecream - запись экрана, Sony ZV1 - запись себя, Premier Pro - совмещение видео, добавлени эффектов, закругление углов и тд
@avelur23
@avelur23 2 години тому
@@kalinin_design вау спасибо ☺️
@kalinin_design
@kalinin_design 2 години тому
@@avelur23 обращайся 🤝
@howmakesite
@howmakesite 29 днів тому
Очень хотелось попробовать всё это, но ни в bing, ни в spline войти не удалось. В bing невозможно зарегистрироваться, а в spline при попытке создать новый файл бесконечно крутится шарик на чёрном экране. Кто-то из зрителей смог? :)
@nonamenoname9402
@nonamenoname9402 29 днів тому
да, проблем не было
@lanabereza5755
@lanabereza5755 2 місяці тому
Самую ужасную выбрал картинку с котом))
@nonamenoname9402
@nonamenoname9402 2 місяці тому
Это правда
WebGL: как сделать сайт с интерактивной 3D-графикой
39:08
Digital-агентство Мэйк
Переглядів 14 тис.
ЧТО ДЕЛАТЬ, ЕСЛИ НЕ ХВАТАЕТ ДЕНЕГ НА ВОССТАНОВЛЕНИЕ ТАЧКИ?
47:52
Godzilla Attacks Brawl Stars!!!
00:39
Brawl Stars
Переглядів 8 млн
Анита просто на химии, поэтому такая сильная
00:21
Женя Лизогуб SHORTS
Переглядів 2,8 млн
0% Respect Moments 😥
00:27
LE FOOT EN VIDÉO
Переглядів 35 млн
Первые продажи Ryzen на Ozon и первый возврат! 😱
13:17
Герасимов Live
Переглядів 38 тис.
Дизайн сайта за 160 000 ₽ | Показываю реальный проект на фрилансе
18:33
КруТа в дизайне ❘ Блог Крупиной Татьяны
Переглядів 19 тис.
Веб дизайн урок по анимации || 3d слайдер в Figma
17:33
Three.js на Tilda! Как вставить 3D сцену в Zero Block
10:29
Дизайнер со скриптами
Переглядів 29 тис.
From Figma to a 3D Web Page with Dora Plugin - No code Tutorial
12:16
ЧТО ДЕЛАТЬ, ЕСЛИ НЕ ХВАТАЕТ ДЕНЕГ НА ВОССТАНОВЛЕНИЕ ТАЧКИ?
47:52