Урок 2: Делаем стильный сайт с 3d анимацией на Tilda с помощью Нейросети и Spline3D | 2024
На данном уроке продолжаем делать стильный сайт с 3d анимацией. Это бесплатный курс по веб дизайну и созданию сайтов.
Данный бесплатный курс для начинающих и новичков научит создавать красивые современные сайты, они будут адаптивные с 3d анимацией, параллаксом, а самое интересное, что графический и текстовый контент придумает нейросеть DALL-E3. Останется собрать все вместе.
На прошлом уроке мы создавали текстовый прототип с помощью YandexGPT 2, и сделали в Figma макет сайта.
На данном уроке мы создадим графику и иконки в нейросети DALL-E 3. Экспортируем векторные элементы из Figma в 3D редактор Spline3D, там же сделаем скины из наших картинок. Далее создадим анимацию карты, анимацию пластиковой карты по скроллу (scroll) и анимацию снежинок на фоне
На третьем уроке мы будем экспортировать макет из Фигмы в Тильду. В Tilda добавим HTML блок в который будем добавлять код с нашими 3D моделями
Телеграм школы:
Инстаграм школы:
Behance школы:
Dribbble аккаунт школы:
Сайт школы:
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