1,0×
00:00/20:21
В каких программах создавался сайт с 3D анимацией по скроллу
Описание
Урок 2: Делаем стильный сайт с 3d анимацией на Tilda с помощью Нейросети и Spline3D | 2024
4 месяца назад • 173 просмотра15 поставили "Нравится"
На данном уроке продолжаем делать стильный сайт с 3d анимацией. Это бесплатный курс по веб дизайну и созданию сайтов.Данный бесплатный курс для начинающих и новичков научит создавать красивые современные сайты, они будут адаптивные с 3d анимацией, параллаксом, а самое интересное, что графический и текстовый контент придумает нейросеть DALL-E3. Останется собрать все вместе.
На прошлом уроке мы создавали текстовый прототип с помощью YandexGPT 2, и сделали в Figma макет сайта.
На данном уроке мы создадим графику и иконки в нейросети DALL-E 3. Экспортируем векторные элементы из Figma в 3D редактор Spline3D, там же сделаем скины из наших картинок. Далее создадим анимацию карты, анимацию пластиковой карты по скроллу (scroll) и анимацию снежинок на фоне
На третьем уроке мы будем экспортировать макет из Фигмы в Тильду. В Tilda добавим HTML блок в который будем добавлять код с нашими 3D моделями
Телеграм школы: t.me/...nin_design
Инстаграм школы: instagram.com/...nin.school
Behance школы: www.behance.net/KalininSchool
Dribbble аккаунт школы: dribbble.com/...nin_design
Сайт школы: kalinin.school
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
Бесплатный курс по Веб дизайну "Сайт с 3d анимацией с помощью нейросетей"
Подборка ·
Kalinin School | Индивидуальное обучение веб-дизайну, созданию сайтов с 3D | Размещение на Behance, Dribbble 💎
· 2 из 3Далее: Урок 3: Делаем стильный сайт с 3d анимацией на Tilda и Spline3D, Секретные настройки Zero Block, лучший бесплатный курс
Бесплатный курс по Веб дизайну "Сайт с 3d анимацией с помощью нейросетей" · 2 из 3