Скачать "Моушн дизайн сайта на примере Apple. Уроки в After Effects и Webflow"

"videoThumbnail Моушн дизайн сайта на примере Apple. Уроки в After Effects и Webflow

0:00

Магия анимации сайтов

0:23

Примеры моушн дизайна, которые будем создавать в уроке

0:44

Как анимировать в After Effects с нуля

1:14

Анимация линий в After Effects

2:26

Как настроить Trim Paths анимацию

9:41

Как повторить моушен дизайн Apple

17:40

О бонусах для участников чата

17:54

Где скачать плагин Bodymovin для экспорта анимации

18:23

Как правильно экспортировать анимацию для сайта

20:05

Как экспортировать анимацию в код для сайта с помощью After Effects, используя плагин Bodymovin

21:38

Какой конструктор сайтов выбрать для анимации?

22:11

Webflow Анимация с чего начать?

27:36

Нюансы: Как правильно подключить анимацию из After Effects к сайту на Webflow

32:32

Как делать крутые сайты с анимацией без навыков моушн дизайна

33:05

Повторяем сложнейшую анимацию с сайта Apple за 3 минуты

Peretiatko. Кратко обо Мне и моем Канале

Peretiatko. Кратко обо Мне и моем Канале

Канал: Peretiatko

Повторяем ЭФФЕКТЫ из клипов в After Effects | Элджей, ASAP Rocky, Тимати, Qurt x Truwer

Повторяем ЭФФЕКТЫ из клипов в After Effects | Элджей, ASAP Rocky, Тимати, Qurt x Truwer

Канал: Хохлов Сабатовский

Уроки Adobe After Effects. Анимация слоев

Уроки Adobe After Effects. Анимация слоев

Канал: Iliada

Цветокоррекция в After Effects

Цветокоррекция в After Effects

Канал: loftblog

Ты сможешь всё в AFTER EFFECTS с этой сборкой. I Want It All Bundle от AEJuice

Ты сможешь всё в AFTER EFFECTS с этой сборкой. I Want It All Bundle от AEJuice

Канал: Dmitry Kolotilshikov

Основы After Effects. Урок 1. Обзор Интерфейса

Основы After Effects. Урок 1. Обзор Интерфейса

Канал: Илья Зернов

Топ-25 ПРОСТЫХ Эффектов в After Effects | ПОЛЕЗНЫЕ Секреты и Лайфхаки МОНТАЖА ВИДЕО

Топ-25 ПРОСТЫХ Эффектов в After Effects | ПОЛЕЗНЫЕ Секреты и Лайфхаки МОНТАЖА ВИДЕО

Канал: Хохлов Сабатовский

моушн дизайн

моушн дизайн уроки

after effects уроки

анимация

анимация сайта

webflow

webflow анимация

webflow tutorial

вебфлоу

уроки вебфлоу

веб дизайн

моушен дизайн

motion design

моушн дизайн анимация

моушн дизайн примеры работ

after effects

after effects 2022

уроки after effects

after effects с нуля

after effects для начинающих

афтер эффектс

adobe after effects уроки

trim paths after effects

анимаций линий after effects

моушндизайн

моушндизайнуроки

aftereffectsуроки

00:00:02

анимаций похожих на магию когда крутишь

00:00:04

колесико мыши и видишь не просто как

00:00:06

сайт пролистываем вниз а как происходят

00:00:09

какие-то нереальные штуки это вызывает

00:00:11

вау-эффект в этом видео я повторю одну

00:00:14

анимацию apple и установлю ее на сайт

00:00:17

делайте так же как я этот навык поможет

00:00:20

вам создавать крутые анимации и дорого

00:00:22

продавать это я выбрала вот эту анимацию

00:00:25

она выглядит круто и делается достаточно

00:00:27

просто мы создадим ее с нуля в after

00:00:30

effects чтобы прокачать ваш навык

00:00:32

анимации а в конце этого видео я покажу

00:00:35

вам как создавать такие сайты даже если

00:00:37

вы не шарите в анимации на примере вот

00:00:39

этих слайдов вы также их создатель и

00:00:42

получим такой результат для начала нам

00:00:44

нужно будет заминировать вот этот

00:00:46

отпечаток

00:00:47

мы можем придумать свой собственный но

00:00:49

проще будет просто сделать скрин этого

00:00:52

отпечатков и за анимировать его в after

00:00:55

effects и

00:00:58

так я сделала screen и добавила его в

00:01:00

проект теперь создаем нашу композицию

00:01:03

ширина 1920 высота 1080i время поставлю

00:01:08

4 секунды

00:01:10

добавляем скопированный отпечаток в наш

00:01:13

проект теперь нашей задачей будет

00:01:15

нарисовать точно такие же линии и аниме

00:01:17

ротик для этого мы можем просто обвести

00:01:20

линии на данном отпечатки из анимировать

00:01:23

сейчас я покажу как это будем делать нам

00:01:26

понадобится инструмент pen tool или перо

00:01:28

если по-русски на сайте мы увидим в

00:01:31

какой последовательности анимируются

00:01:32

нашей линии сначала анимируются вот эти

00:01:35

две потом вот эти линии также будем

00:01:38

анимировать и мы для начала отключим

00:01:40

заливку вот здесь нажмем пил и выберем

00:01:42

вот эту штуку с перечеркнутой полоской

00:01:44

дальше поставим обводку так как у нас

00:01:47

опечаток белый выберем здесь solid cap и

00:01:51

выберем цвет не белой окраски чтобы нам

00:01:55

было легко его отличать от линий самого

00:01:58

отпечатка поставим 12 пикселей толщину

00:02:01

линий и все теперь можно анимировать

00:02:03

начнем с вот этой первой более прямой

00:02:06

линии так как вам будет легче

00:02:08

просто проводим вот такую линию вот

00:02:10

здесь не отпускаем кнопку мыши и мы

00:02:12

можем вот так вот настраивать с помощью

00:02:14

вот таких штук

00:02:16

перетягивать вот эти полоски и у нас

00:02:19

будет линия похоже на ту которая

00:02:21

нарисована на самом отпечатки нарисуем

00:02:24

вот такую линии раскрываем настройки

00:02:28

нашего слоя линий которую мы нарисовали

00:02:32

контент здесь нам нужно добавить это вот

00:02:35

здесь нажать это добавить и добавить

00:02:37

dreamcast после того как мы добавили мы

00:02:40

сможем ее за анимировать например

00:02:42

выберем and на 0 секунд здесь поставим

00:02:45

ключ и про пишем 0 и потом через

00:02:50

например пол секунды мы пропишем 100

00:02:56

так наша линия будет анимированы

00:02:59

далее мы видим что вот здесь полоски

00:03:02

закруглены а у нас они квадратные нам

00:03:04

нужно будет пройти в строгом водка и

00:03:06

здесь поставить конец нашей линии раунд

00:03:10

к чтобы она была тоже закругленным

00:03:13

теперь если мы запустим анимацию то

00:03:16

увидим что она у нас очень похожа на ту

00:03:19

линию которая была изначально на

00:03:21

отпечатки супер можно считать что дело

00:03:24

сделано так как первую линию нам удалось

00:03:26

достаточно быстро за ними ровать ночь с

00:03:28

остальными все будет гораздо проще также

00:03:31

мы увидим вот такую особенность что

00:03:33

сначала линии у нас они не

00:03:36

прозрачные а к концу когда они уже

00:03:39

прорисовываются они становятся более

00:03:41

прозрачными белыми также мы тоже можем

00:03:44

настроить эту непрозрачность перейдем

00:03:46

вот здесь строк отдельно где у нас были

00:03:49

настройки закруглен

00:03:51

концов нашей линии и выберем раздел

00:03:55

упасть и это как раз непрозрачность

00:03:57

поставим здесь ключ на нулевой секунде и

00:04:00

поставим начальную

00:04:02

непрозрачность 10 процентов

00:04:05

после чего перейдем вот в этот наш ключ

00:04:10

когда у нас уже полностью анимирована

00:04:11

линия и поставим здесь сто процентов

00:04:14

чтобы концу наша линия уже была

00:04:17

полностью так мы точно скопируем ту

00:04:20

анимацию которая

00:04:21

на сайте apple вот так это будет

00:04:24

выглядеть круто также можем сделать нашу

00:04:27

анимацию не такой резкой вот выделим все

00:04:30

наши ключи 4 которые мы поставили и

00:04:32

нажмем клавишу f9 чтобы они у нас вот

00:04:35

превратились такие песочные часы так

00:04:39

наша анимация будет выглядеть гораздо

00:04:41

прикольнее итак первую линию мы

00:04:43

нарисовали как нам нарисовать вторую я

00:04:45

предлагаю просто скопировать первый слой

00:04:47

с линией и у нас получится еще один

00:04:49

такой же слой дальше берем перо тянем за

00:04:52

верхнюю точку и переносим ее на вторую

00:04:55

лень а вторую точку нам нужно будет

00:04:58

также перенести на линию но у меня вот

00:04:59

здесь появляется перо свод такие

00:05:01

кружочка и у меня когда я буду нажимать

00:05:04

на вторую точку будет просто рисоваться

00:05:06

еще одна линия мне этого не надо поэтому

00:05:09

я нажимаю клавишу g щелкаю на эту точку

00:05:13

потому что раз нажимаем клавишу g и все

00:05:15

так я могу перетягивать свою денег

00:05:19

перетягиваю вот сюда на верх эту точку и

00:05:22

рисую еще одну точку в самом внизу сразу

00:05:25

же вот так пытаюсь сделать ее тоже

00:05:28

поворот все дали я перехожу на верхнем

00:05:32

здесь с помощью вот этих линии пытаюсь

00:05:34

повторить

00:05:36

рисунок той нашей линии которая нам

00:05:40

нужна

00:05:43

вот мне удается повторить этот рисунок

00:05:45

все элементы которые меня были на первой

00:05:47

линии это непрозрачность и наши ключи по

00:05:51

которым анимируется де ниро не

00:05:52

копируется и получается вот такая

00:05:55

анимация

00:05:56

отлично получилось вполне похоже также

00:06:00

нам нужно будет проделать с остальными

00:06:03

линию я буду копировать линию один опять

00:06:07

переносить этот слой наверх и

00:06:10

анимировать уже следующую линию

00:06:13

те действия идентична повторяю и у меня

00:06:17

получается вот такая линия единственный

00:06:20

момент что они начинают анимироваться

00:06:23

позже сначала нас прорисовывается вот

00:06:26

эти элементы и потом уже начинается

00:06:28

анимация вот этих линий поэтому нам

00:06:31

нужно будет передвинуть ключи то есть мы

00:06:33

раскроем наш слой выберем 3 мпа и

00:06:39

передвинем вот эти линии подальше вот

00:06:43

здесь мы сможем увидеть то есть например

00:06:45

когда вот эти наши линии уже прорисованы

00:06:48

мы можем начать анимировать следующие

00:06:51

лени но в данном случае я поставила

00:06:54

сильно далеко поэтому можно вернуть

00:06:55

поближе примерно

00:06:58

вот так это будет выглядеть

00:07:00

все супер также

00:07:03

непрозрачность тоже не забываем

00:07:06

передвинуть эти ключи

00:07:08

супер дальше копируем этот третий слой

00:07:12

потому что вот линия которая вот это она

00:07:14

точно такая же как вот это начинается в

00:07:17

одинаковое время с ней поэтому мы ее

00:07:20

просто копируем и переносим как обычно

00:07:23

мы это делаем точки

00:07:25

вот эта линия изогнутая и нас не

00:07:29

получается ее отредактировать с помощью

00:07:32

точек поэтому нам надо с помощью пера

00:07:33

нажать вот здесь на середине и добавить

00:07:36

еще одну точку

00:07:39

вот у меня получается примерно такая же

00:07:42

линия и дальше по схеме теперь мы видим

00:07:45

как появляется вот эти две линии и

00:07:47

начинаем анимировать их дальше я уже

00:07:50

озвучивать не буду поставлена ускоренный

00:07:52

режим вы просто повторите этот рисунок

00:07:55

за мной

00:08:08

но все ребята самая сложная часть

00:08:10

сделана для за ней мира вала весь наш

00:08:14

отпечаток вот эти самые последние

00:08:16

палочки которые короткие их можно здесь

00:08:18

чуть-чуть ключи сдвинут поближе чтобы

00:08:20

они чуть побыстрее

00:08:22

тренировались так будет выглядеть просто

00:08:25

чуть более эстетичной вот эти наград 3

00:08:28

короткие палочки можно будет сделать

00:08:30

чуть чуть поближе ключе

00:08:34

также я постаралась сделать так чтобы

00:08:37

наша анимация вот этого всего отпечатка

00:08:39

занимала не более двух секунд то есть до

00:08:42

2 секунд с нуля у меня уложилась вся

00:08:45

анимация

00:08:47

вот что получилось в итоге теперь мы

00:08:50

можем выделить все слои

00:08:52

нажимаю на самый первый слой потом

00:08:55

зажимаем клавишу shift последний слой и

00:08:57

можем перекрасить в белый цвет

00:09:00

вот такой отпечаток у нас получился

00:09:02

далее можем нажать правой кнопкой мыши

00:09:05

при композ и объединить все слои в один

00:09:09

слой общей называть его отпечаток вот

00:09:13

такой отпечаток у нас получится снимок

00:09:15

фотография удаляю такой отпечаток

00:09:18

получается у нас поэтому

00:09:22

в целом все окна не нравится вот здесь

00:09:25

как выглядят наши линии поэтому я сейчас

00:09:29

их подправлю и

00:09:35

готова основная работа у нас выполнено

00:09:38

теперь осталось вообще фигня дальше на

00:09:41

сайте apple появляется кнопка айфона она

00:09:44

вращается прикольно после чего

00:09:46

появляется уже сам телефон так что нам

00:09:49

нужно найти телефон вставить его в

00:09:51

проект вырезать из него кнопку и все это

00:09:54

за анимировать я нашла такой красный фон

00:09:57

яндекс картинках по запросу iphone os е

00:10:00

red вот такая есть картинка она есть в

00:10:04

разрешении 2400 на 2400 просто копируем

00:10:09

открываем лиму по ground и нажимаем

00:10:13

control v и картинка загружается в эту

00:10:16

программу после чего у нее вырезается

00:10:19

фон дальше нам нужно скачать эту

00:10:21

картинку можно скачать ее просто так но

00:10:26

она будет маленького размера чтобы нам

00:10:28

скачать ее размеры 2400 на 2400 нам

00:10:31

нужно зарегистрироваться

00:10:33

поэтому вы зарегистрируетесь и скачаете

00:10:35

такую картинку в хорошем качестве чтобы

00:10:38

она у нас качестве насмотрелась на сайте

00:10:40

я уже ее скачала поэтому просто добавляю

00:10:43

в проект вот он и

00:10:46

меня ее размер

00:10:49

выровняем ее по центру и подниму на верх

00:10:53

кстати мы можем сделать iphone еще

00:10:55

больше как видите на сайте он занимает

00:10:57

большую часть экрана поэтому сделаем

00:11:01

чуть чуть побольше размер

00:11:04

давайте сделаем например вот так и от

00:11:06

опустим вниз максимально насколько это

00:11:09

возможно

00:11:10

например вот так еще раз выровняем его

00:11:13

по середине переносим iphone в самый низ

00:11:16

отпечаток у нас сверху но у нас еще есть

00:11:18

кнопка которая появляется до того как

00:11:21

появится самый фонд нам нужно будет ее и

00:11:23

вырезать для этого я просто открою эту

00:11:26

картинку фотошопе теперь нам нужно

00:11:28

вырезать нашу кнопку я буду вырезать с

00:11:30

помощью инструмента овальная область

00:11:33

ввожу ее примерно вот так и просто

00:11:37

нажимаю kontrol ц контроллер и у нас

00:11:40

появляется отдельно вот такой слой с

00:11:42

кнопкой в принципе мы можем кадрировать

00:11:44

изображение и обрезать лишнее чтобы она

00:11:48

занимала меньше места и проект весил

00:11:52

меньше с помощью инструмента рамка

00:11:56

я вот таким образом

00:11:59

обрезаю все лишние части от нашей кнопки

00:12:02

когда все готово нажимаю enter или и

00:12:05

получается вот такое изображение дальше

00:12:07

нажимаю правой кнопкой на этот слой и

00:12:10

выбираю быстрый экспорту png и сохраню

00:12:13

дальше закидываю кнопку в наш проект она

00:12:17

будет под отпечатком но надо телефону

00:12:20

задача сделать так чтобы в конце когда

00:12:22

телефон появиться уже на весь экран

00:12:25

кнопка была точно на том же месте где

00:12:27

она есть у самого телефона поэтому

00:12:30

временно можем отключить отпечаток так

00:12:34

прием кнопки сделаем ее поменьше чтобы

00:12:37

нам было видно

00:12:38

она примерно вот такого размера на время

00:12:42

можем сделать ее прозрачной нажмем

00:12:44

клавишу t на клавиатуре это

00:12:46

непрозрачность и убавим ей прозрачность

00:12:49

например до 30 так мы будем видеть и

00:12:53

нашу кнопку на телефоне и кнопку которая

00:12:57

у нас отдельно от телефон теперь ваша

00:13:00

задача сделать ее точно также и

00:13:02

поставить на том же месте на котором

00:13:04

находится сам телефон

00:13:07

все я нашла то самое положение кнопки

00:13:11

теперь на время отключим вообще наш

00:13:12

телефон в принципе и будем настраивать

00:13:15

анимацию с кнопкам из отпечатков у нас

00:13:18

отпечаток полностью образуется на 2

00:13:21

секунды и дальше уже должна появляться

00:13:23

кнопка но она появляется как мы видели

00:13:26

на сайте apple с помощью

00:13:28

непрозрачность она просто проявляется то

00:13:31

есть сначала ее не видно потом она

00:13:33

становится более заметным поэтому можем

00:13:36

поставить еще до 2 секунд чуть-чуть

00:13:39

сделать ее чтобы она уже начала

00:13:42

проявляться и уже в две секунды когда

00:13:45

наш отпечаток полностью готов чтобы она

00:13:48

уже появлялась в полную силу ну примерно

00:13:50

вот на этом моменте мы уже можем задать

00:13:53

ей

00:13:54

непрозрачность примеру 0 и дальше вот на

00:13:58

этом моменте когда уже прошло две

00:14:00

секунды здесь уже можем поставить ей 100

00:14:03

либо можно чуть поменьше чтобы она была

00:14:06

не сильно контрастная можно поставить 90

00:14:08

и потом уже когда телефон у нас появится

00:14:12

а появится он у нас после 3 секунды

00:14:15

примерно вот здесь мы уже можем

00:14:16

поставить

00:14:19

скопировать здесь ключ 90 и вот здесь

00:14:22

можем поставить снова 0 чтобы уже кнопка

00:14:25

исчезла когда появится сам телефон

00:14:28

нажмем f9 выделим все наши ключи чтобы

00:14:33

наша анимация была

00:14:34

более прикольно вот так будет выглядеть

00:14:37

кнопка также можем ей задать вращение

00:14:41

это нас раньше значит в тот момент когда

00:14:44

появится телефон давайте сразу кстати

00:14:46

зададим ему появления например он

00:14:48

появится три с половиной секунды

00:14:51

давайте зададим ему тоже

00:14:53

непрозрачность зафиксируем сто процентов

00:14:57

три с половиною начнет он появляется

00:14:59

чуть чуть пораньше например вот здесь

00:15:00

поставим ему 0 и вот к этому моменту

00:15:04

когда у нас появляется телефон наша

00:15:07

кнопка уже должна зафиксироваться и

00:15:09

больше не вращаться ну то есть допустим

00:15:11

уже в этом месте она сто процентов

00:15:13

должна зафиксироваться поэтому переходим

00:15:16

в кнопку ставим recession 0 вот здесь а

00:15:18

все остальное время как мы видели она

00:15:21

вращалась например она может вращаться

00:15:23

уже с самого появления вот здесь зададим

00:15:26

ей например 100 градусов в целом окей

00:15:28

все она досталась анимировать так чтобы

00:15:31

отпечаток пальцев попадал ровно в кнопку

00:15:35

в самом конце но как мы видели вначале

00:15:38

вначале он очень крупный потом со

00:15:41

временем он становится все меньше

00:15:44

то есть он уменьшается и потом

00:15:47

оказывается внутри кнопки давайте

00:15:49

сделаем то же самое за масштаб у нас

00:15:51

отвечает параметр скилл нажимаем клавишу

00:15:54

с водки и здесь мы можем давайте сначала

00:15:58

начнем с того масштаба чтобы он

00:16:00

помещался в кнопках

00:16:02

подберем такой масштаб который нас

00:16:06

устроит

00:16:08

например пусть это будет вот так далее

00:16:12

мы должны зафиксировать этот масштаб в

00:16:15

той точке когда у нас уже появляется

00:16:17

наша кнопка то есть вот в этом месте мы

00:16:20

уже должны зафиксировать вот с кем ok но

00:16:24

до этого он вполне может быть гораздо

00:16:26

крупнее например в самом начале поэтому

00:16:29

давайте выкрутим до 100 с лишним

00:16:31

процентов

00:16:33

давайте 120 вопрос задам скилл f9 и вот

00:16:38

такая анимация у нас получается смотреть

00:16:41

сначала отпечаток большой потом

00:16:44

уменьшается плавно появляется в кнопки

00:16:47

кнопка крутится и в конце появляется

00:16:49

телефон в целом это полочки повторяет ту

00:16:52

картинку которая есть у apple

00:16:54

единственный момент который здесь нужно

00:16:56

добавить это что отпечаток в конце

00:16:58

исчезает заходим в этот учаток опасть

00:17:02

это прозрачность нажимаем кнопку ти

00:17:04

фиксирую сто процентов примерно вот в

00:17:08

этом месте

00:17:09

вот здесь уже можем поставить например

00:17:13

0

00:17:15

так у нас плавно отпечаток исчезнет с

00:17:19

экрана телефона чтобы сделать это

00:17:21

плавнее можно вот этот ключ чуть-чуть

00:17:23

передвинут

00:17:25

тогда это будет чуть медленнее

00:17:28

происходить можно нажать в девять леть

00:17:31

ключи вот такое видео у нас получилось

00:17:33

то что было нарисовано у apple мы смогли

00:17:36

повторить сделать карту анимацию

00:17:38

осталось добавить это на сайт ребята я

00:17:40

отвечаю на все вопросы в бесплатном

00:17:42

телеграм-чате а еще делюсь участниками

00:17:44

крупными ресурсами вообще мы там

00:17:46

общаемся и помогаем друг другу по любым

00:17:48

вопросам поэтому вступай в чат пока он

00:17:50

открытый ссылка есть в описании под

00:17:52

видео и так в видео которое мы только

00:17:55

что сделали нам нужно будет вставить в

00:17:57

виде кода на сайт мы это сможем сделать

00:17:59

через программу after effects без всяких

00:18:01

вопросов для этого нам понадобится

00:18:03

только один плагин он называется body

00:18:05

movin' он бесплатный мы его можем

00:18:07

скачать на официальном сайте адаб вообще

00:18:10

без всяких проблем после того как вы его

00:18:12

установите перезагрузите автор и он у

00:18:14

вас появится вот здесь в окне windows xp

00:18:18

mce вадиму он нам пригодится чуть позже

00:18:22

для начала нам нужно экспортировать наше

00:18:24

видео в виде картинок и то мы сможем

00:18:26

сделать через стандартный способ

00:18:28

экспорта файлов видов media encoder

00:18:31

после того как проект появился в до

00:18:32

поединка но мы выбираем место сохранения

00:18:35

советую выбрать отдельную папку например

00:18:38

я назвала его готова потому что у нас

00:18:40

туда сохранится много картинок и

00:18:42

выбираем формат экспорта проекта

00:18:45

выбираем вот здесь

00:18:47

гипер то есть у нас видео будет

00:18:49

сохраняться в картинках и далее вот

00:18:52

здесь внизу нужно будет выбрать видео

00:18:55

качество пусть будет 100 она будет потом

00:18:59

зависеть от размера если у вас получится

00:19:01

слишком тяжелый файл то можно

00:19:03

попробовать по уменьшать

00:19:06

качество картинок но я пока оставлю что

00:19:09

частота кадров здесь стоит 50

00:19:12

994 но нам не нужно в принципе для сайта

00:19:15

такая частота кадров принципе если у вас

00:19:18

прыгать весит мало то можно пробовать

00:19:20

оставлять 30 но здесь я покажу 15 потому

00:19:23

что в принципе этого будет достаточно

00:19:24

чтобы хорошо было видно наше видео

00:19:28

выбираю 15 нажимаем ok готов к экспорту

00:19:31

нажимаю экспортировать открываю папку и

00:19:35

вот так вот мы и видео выглядит

00:19:37

покадрово в картинках а весит вся эта

00:19:41

папка 6 мегабайт после того как мы это

00:19:45

превратим файл для сайтов код по на

00:19:48

будут вести еще больше но в целом это

00:19:50

еще терпимо если ваш файл весит больше

00:19:53

десяти мегабайт то сайт скорее всего

00:19:55

будет загружаться очень медленно это

00:19:58

будет не комфортно для пользователей

00:20:00

поэтому нужно будет зажимать файлы это я

00:20:03

покажу позже как сделать переходим в

00:20:05

автор и создаем новый проект дальше

00:20:09

заходим в нашу папку готова и выбираем

00:20:12

все файлы которые у нас образовались

00:20:14

и закидываем их вот сюда

00:20:17

после чего перетягиваем уже в сам проект

00:20:21

здесь нам нужно обязательно нажать для

00:20:24

секвенции слоев галочку поставить здесь

00:20:27

сингл композицию и время он предлагает 2

00:20:30

секунды две секунды вполне будет

00:20:32

достаточно

00:20:33

ok дальше все наше видео превращается в

00:20:36

покадровое вот такое видео теперь нам

00:20:39

пригодится как раз приложение body мулен

00:20:42

плагин которые мы скачали открываем

00:20:44

винду

00:20:45

extension вадим умер нажимаем на три

00:20:49

точки выбираем папку для сохранения

00:20:51

нашего кода сейчас мы уже сохраняем код

00:20:54

и который будем вставлять на сайт

00:20:56

назовем его яблоко и сохраним в нашу

00:20:59

папку далее приходим в настройки далее

00:21:02

переходим в папку assets

00:21:05

и выбираем здесь

00:21:07

копии если вам нужно сжать ваше

00:21:10

изображение они получились сильно

00:21:13

тяжелыми как я говорила ранее то

00:21:14

выбирайте и ней был компресс тогда у вас

00:21:18

изображение а станут гораздо меньшего

00:21:20

размер у меня в принципе размер более

00:21:22

менее адекватно для сайта поэтому я

00:21:24

выберу то качество которое есть сейчас и

00:21:26

далее нужно будет нажать in cloud in

00:21:29

джейсон все нажимаем вот этих две

00:21:32

настройки нажимаем сейв после чего вот

00:21:35

здесь ставим галочку и жмем render пока

00:21:38

можем зайти на сайт это конструктор веб

00:21:41

flow очень крутой конструктор который

00:21:43

позволяет делать крутые анимации сайте с

00:21:46

помощью автор эффекты то есть по факту

00:21:48

мы можем создать любые проекты которые

00:21:50

только захотим хоть поджечь тарелку как

00:21:53

мы создавали на прошлом видео в анимации

00:21:55

с реальным огнем хоть можем за

00:21:58

анимировать любое видео хоть повторить

00:22:00

сайт apple в общем все на что хватит

00:22:03

нашей фантазии поэтому рекомендую

00:22:05

зарегистрируйтесь и попробуйте повторить

00:22:07

хотя бы этот проект это очень прокачает

00:22:09

важно я создаю новую страницу потому что

00:22:12

у меня уже было создано ранее нажимаем

00:22:15

create создать так будет выглядеть моя

00:22:17

новая страница экспорт завершён да окей

00:22:22

переходим наш нашу папку и вот так будет

00:22:27

выглядеть наш код яблоко супер теперь мы

00:22:30

можем создавать сайт на конструкторе веб

00:22:33

фло мы будем повторять анимацию которая

00:22:36

была нарисована у apple мы добавим

00:22:40

сначала надпись возвращения домой потом

00:22:43

она плавно исчезает дальше появляется

00:22:45

вся наша картинка с отпечатка и потом

00:22:48

появляется последняя надпись текста для

00:22:52

этого мне нужно будет создать секции 1

00:22:56

секция будет для первого текста далее

00:22:59

будет еще одна секция для нашей анимации

00:23:01

в которой мы вставим видео и будет еще

00:23:03

одна секция для нижнего текста вот здесь

00:23:06

есть такой параметр навигатор я перехожу

00:23:10

и вижу что у меня создано три секции все

00:23:12

супер так как мне нужно далее мне нужно

00:23:15

будет добавить заголовок это возвращение

00:23:17

домой я его добавлю в первую секцию

00:23:21

вот здесь я кстати смогу посмотреть что

00:23:24

он точно добавился в первую секцию в

00:23:26

последнюю я добавлю просто текст

00:23:29

вот у меня из текст а

00:23:32

во вторую секцию мне нужно будет

00:23:34

добавить как раз тот кот из нашей

00:23:37

анимации которые мы сохранили я просто

00:23:40

выберу наш код и перетягиваю его вот

00:23:43

сюда в браузер

00:23:45

все он вот здесь сейчас загрузится

00:23:47

супер-кот загрузился перетягиваем его во

00:23:51

вторую секцию и

00:23:52

смотрим вот здесь чтобы он был во второй

00:23:55

все верно кстати цвет нашего фона мы

00:23:58

можем сделать чёрным вот здесь секции

00:24:01

будет основная чтобы все наши слои

00:24:03

покрасились в черт просто переходим

00:24:06

здесь color white background

00:24:08

а мы выбираем

00:24:09

давайте для начала разберемся с нашим

00:24:13

заголовкам возвращения домой и

00:24:16

еще мне на понадобятся квадратные

00:24:18

кавычки

00:24:20

я их просто скопирую вот чудо

00:24:24

далее вот этот текст я выровнял

00:24:27

посередине и мне нужно будет его

00:24:29

покрасить в нужный цвет и поставить

00:24:32

нужные шрифты

00:24:33

это можно сделать с помощью прикольного

00:24:36

плагина для браузера google он

00:24:39

называется фонд ниндзя

00:24:41

просто я его включаю навожу на любой

00:24:44

текст который написан на любом сайте и

00:24:47

могу отсюда вытащить название шрифта

00:24:50

размер шрифта и его цвет просто нажимаю

00:24:55

на текст и вот у меня уже готов цвет и

00:24:58

также мы можем запомнить 64 68 это

00:25:01

размер шрифта

00:25:03

вот здесь я поменяю текст

00:25:08

и вот здесь 64 68

00:25:11

пропишу размер единственное у меня нет

00:25:14

здесь в этом конструкторе такого шрифта

00:25:18

как у apple поэтому я поставлю монсеррат

00:25:20

но мы видели название и могли бы найти и

00:25:23

загрузить сюда тот же лифт который нам

00:25:25

нужно но я не буду тратить на это время

00:25:28

дальше нам нужно будет настроить еще

00:25:30

отступы для этого текста чтобы у нас

00:25:33

было место для прокрутки и чтобы он мог

00:25:37

нас плавно появится для начала я нажму

00:25:40

на самую секцию и поставлю здесь отступ

00:25:43

верхний отступ я поставлю 300 внешней у

00:25:48

нас появится вот такое пространство для

00:25:51

анимации текста и и высоту самого блока

00:25:56

я задам 150 пикселей дальше перейду к

00:26:00

заголовку это же здесь задам отступы

00:26:04

верху 300 внизу 150 и дальше мы можем

00:26:08

перейти к нашей анимации и и здесь мы

00:26:11

можем настроить вот в этом разделе и

00:26:13

добавить анимацию для нашего заголовка

00:26:17

для этого нажмем вот здесь элемент

00:26:20

триггер

00:26:21

уайлс кролик in view то есть показывать

00:26:24

анимацию при прокрутке

00:26:26

вот здесь выбираем

00:26:29

играть scroll они мишин и

00:26:33

вот здесь нам нужно будет добавить новую

00:26:36

анимацию у нас именно она становится

00:26:39

непрозрачной поэтому выбираем упасите

00:26:42

ставил вот здесь чтобы все сработало нам

00:26:45

нужно будет выбрать 75 процентов эти

00:26:50

пусть будет 71 и здесь нам нужно будет

00:26:52

поставить прозрачность анимации сто

00:26:55

процентов а на 100 процентах уже сделать

00:26:58

0 чтобы она исчезала вот как это будет

00:27:01

выглядеть вот здесь можно посмотреть при

00:27:03

прокрутке

00:27:04

вот она будет исчезать здесь нажимаем на

00:27:07

глаз и можно будет посмотреть как будет

00:27:10

выглядеть наша анимация

00:27:12

здесь ставим 100 а здесь у нас исчезает

00:27:16

слишком поздно поэтому поднимаем выше 75

00:27:21

примеры можно стоять сама 108 ставим

00:27:24

ноль и пробуем еще раз проиграть нашу

00:27:27

анимацию

00:27:28

вот теперь она исчезает во время и

00:27:31

появляется наша анимация которую мы

00:27:34

сейчас настроим

00:27:36

переходим нашу секцию с анимацией и

00:27:40

нам нужно будет добавить сюда еще один

00:27:43

элемент разделительным блок div div блок

00:27:46

добавляем его сюда заходим в навигатор и

00:27:49

делаем так чтобы div блок был под нашей

00:27:54

нашем видео вот так это будет выглядеть

00:27:57

дальше заходим вот сюда в наш раздел и

00:28:01

пишем высоту div блока

00:28:04

2000 пикселей это значит что пока мы

00:28:07

будем скролить на 2000 пикселей будет

00:28:10

проигрываться вся наша анимация мы можем

00:28:13

поставить любую высоту если мы поставим

00:28:15

5 тысяч пикселей дата мы будем скролить

00:28:18

очень долго и соответственно очень долго

00:28:20

будет проигрываться все наше видео а

00:28:22

если мы поставим например 500 пикселей

00:28:25

там и запал скролла уже про ли с ним всю

00:28:28

нашу анимацию я подобрала 2000 это самый

00:28:31

оптимальный вариант для скролла но вы

00:28:33

можете попробовать любые версии как вам

00:28:36

больше понравится сильно долго не

00:28:39

рекомендую делать так как пользователю

00:28:40

просто надоест пролистывать всю анимацию

00:28:43

пока он доберется до сути но если у вас

00:28:46

длинное видео больше чем получилось у

00:28:48

нас тогда скорее всего вам придется

00:28:50

поставить высоту вот этого блока больше

00:28:53

чем 2000 все отлично где в блок не

00:28:56

прописали высоту кликаем на нашу

00:28:57

анимацию и нам нужно сделать так чтобы

00:29:00

пока мы будем крутить анимация прилипла

00:29:03

верху экран для этого мы переходим здесь

00:29:06

позиция раздел в нашей анимации и пишем

00:29:09

здесь стилистике это липкий и вверху

00:29:12

ставим ноль чтобы она прилипла вверху

00:29:15

экрана пока мы будем скролить наш экран

00:29:18

после чего мы переходим в секцию и

00:29:22

настраиваем анимацию для секции

00:29:25

выбираем триггер файл скроллер in view

00:29:29

добавляем scroll анимации и

00:29:33

теперь настраиваем нашу анимацию

00:29:36

нажимаем вот сюда

00:29:40

нажимаем на нашу по ним отсюда

00:29:42

называется лоте они меньше 4 у меня в

00:29:45

данном случае нажимаю плюс выбираю лоте и у меня

00:29:49

появляется 0 при нуле когда я начинаю

00:29:53

листать у меня видно

00:29:57

0 процент моего видео а в самом конце

00:29:59

когда я пролистаю у меня видео про

00:30:02

крутится на 100 проц и вот сейчас в

00:30:05

америке вот все видео про крутится на

00:30:08

сто процентов но ключевой кадр видите у

00:30:10

меня на 100 ничего нету а нам нужно чтоб

00:30:13

телефон оставался поэтому можем

00:30:14

поставить

00:30:15

99 процентов сэйв нажимаем и вот здесь

00:30:20

еще есть такая штука смещение при старте

00:30:24

и при конце анимации это нужно для того

00:30:26

чтобы мы увидели анимацию в нужный

00:30:28

момент потому что если мы не выстоим

00:30:29

сейчас вот эти параметры то когда мы

00:30:31

придем наша анимация уже начнется мы ее

00:30:34

увидим где-то с середины это будет не

00:30:36

совсем правильно поэтому нам нужно

00:30:38

выставить смещение чтобы мы прокрутили и

00:30:41

вот потом когда мы уже были в центре

00:30:43

экрана началась наша анимация надеюсь

00:30:46

понятно объяснила поэтому ставим здесь

00:30:48

этого в set it off set и добавляем старт

00:30:51

и конец заниматься здесь выставляем

00:30:52

буквально небольшие значения 13 14

00:30:56

пиксель пример 13 здесь например в конце

00:30:59

14

00:31:00

переходим в режим просмотра

00:31:03

вот вверх текст наш исчез мы добрались

00:31:06

до середины экрана вот здесь очень низко

00:31:10

начинается наше видео мы это можем

00:31:14

компенсировать если зайдем в наш слой

00:31:17

плоти анимация наша файл который мы

00:31:19

добавляли и вот здесь выставим

00:31:21

внутренние отступы с каждой страны к

00:31:24

примеру по 150 пикселей я нажимаю alt и

00:31:28

вот так вот тянул у меня с двух сторон

00:31:30

добавляются отступ 150 теперь когда я

00:31:33

буду просматривать нашу анимацию она

00:31:36

будет уже ближе к центру экран но такие

00:31:39

моменты лучше учитывать заранее еще на

00:31:41

моменте создания видео и возможно вот

00:31:44

здесь можно было ее сделать высшего что

00:31:48

ближе к середине но даже не учитывая это

00:31:52

у нас получается вот такая крутая

00:31:54

анимация как на сайте у apple вот так мы

00:31:58

ее можем покрутить повертеть в разные

00:32:00

стороны и все будет круто работать нам

00:32:03

осталось только добавить нижней текст

00:32:05

который будет появляться после анимации

00:32:08

у нас здесь есть текстовый блок мы можем

00:32:10

скопировать вот этот текст сайта apple и

00:32:18

так вот что у нас получилось конечном

00:32:21

итоге

00:32:26

круто очень похоже то что есть на сайте

00:32:29

у apple и даже работает без глюков супер

00:32:32

дальше расскажу как сделать вот такую

00:32:33

анимацию на сайте даже если мы не умеем

00:32:36

создать ее изначально в after effects

00:32:39

ребята у меня есть идея для обучающих

00:32:41

видео как заработать за один день на

00:32:42

motion design и даже без опыта и

00:32:45

портфолио если вам было бы интересно

00:32:47

посмотреть такие видео то напишите

00:32:49

пожалуйста об этом в комментах или

00:32:51

поставьте плюсик чтобы я хотя бы знала

00:32:53

что вам это интересно если будет много

00:32:55

желающих то запишу такие видео а теперь

00:32:58

рассказываю как я сделала такую анимацию

00:33:00

на сайте даже не они миру и такие крутые

00:33:03

картинки для этого я просто сделала

00:33:05

запись вот этой области экрана и

00:33:07

сохранила это как видео готовое видео я

00:33:10

загрузила в after effects и у меня

00:33:12

получилось вот такое видео здесь даже

00:33:14

видно как ползунок экрана идет вниз вот

00:33:17

но это неважно чем у вас есть крутое

00:33:21

видео из которого вы хотите сделать

00:33:22

такую анимацию на сайт что с этим делать

00:33:25

также закидываем его просто в after

00:33:27

effects потом сохраняем его с помощью

00:33:30

картинок экспортируем вон кадр и

00:33:32

сохраняем в картинках прям качество что

00:33:36

а количество кадров выбираем 15

00:33:39

возвращаемся в автор создаем новый

00:33:42

проект закидываем эту кучу картинок

00:33:45

вот сюда затем перетаскиваем их вниз

00:33:49

длительность 2 секунды секвенция слоев

00:33:52

дальше с помощью плагина сохраняем это

00:33:55

все файл для сайта так как запись экрана

00:33:59

весила больше то моя папка с картинками

00:34:03

уже занимает 15 мегабайт что очень много

00:34:06

поэтому вот здесь я выбрала секс и

00:34:11

выбрала экспрессию картинок здесь

00:34:15

оставила 80-ые забыла нажать in cloud

00:34:19

интереса с

00:34:20

галочкой aprender пока мои картинки

00:34:23

сохранялись в код я зашла на наш сайт

00:34:26

веб flow и создала новую страницу

00:34:30

после того как файл экспортировался я

00:34:34

закидываю его сюда

00:34:36

он кстати получился всего 7 мегабайт что

00:34:41

меня вполне устроила 7 и 8

00:34:43

итак он загружается наушники все окей я

00:34:48

создаю здесь новую секцию сразу добавляю

00:34:51

сюда блок div разделительной и

00:34:55

добавляю сюда

00:34:57

это видео наушники

00:35:01

дальше захожу в навигатор смотрю чтоб в

00:35:04

секции больше сначала мои видео наушники

00:35:07

зачем затем девблог захожу в девблог

00:35:10

ставлю ему как вы помните 2000 размер

00:35:13

2000

00:35:15

далее заходим в анимацию

00:35:17

секция анимация

00:35:21

добавляем файл скроллинг не view

00:35:24

place kroll они мишин добавляем новую

00:35:28

анимацию

00:35:30

нажимаем вот сюда на наш слой с видео

00:35:33

лоте здесь выбираем лоте и здесь тоже

00:35:37

ставим на чайный кабель 0

00:35:41

последний кадр ставим 100 наш фон воде

00:35:45

покрасил в черный будет смотреться

00:35:47

прикольно

00:35:51

готова и не забудем еще файл лоте

00:35:54

поставить позицию липкие стики

00:35:57

вот здесь вверху поставить 0 чтобы он

00:35:59

прилип внизу пока мы будем прокручивать

00:36:02

весь наш разделительным блок div все

00:36:06

включаем предпросмотр листаем и

00:36:11

наслаждаемся нашей анимации

00:36:15

получилось точно что что на сайте у

00:36:18

apple получается если у вас есть крутые

00:36:22

видео то вы можете их анимировать даже

00:36:25

без навыков motion design а если ещё у

00:36:28

вас будут навыки то сможете это делать в

00:36:30

сто раз круче и делать очень крутые

00:36:32

уникальные проекты подписывайтесь на

00:36:35

канал если вам зашел такой контент в

00:36:37

коментах пишите обратную связь для меня

00:36:39

это очень ценно и до встречи в следующем

00:36:41

видео пока

Описание:

Мини курс по моушн дизайну. Создаем с нуля 9 креативов для портфолио. Стоимость курса 990 рублей: https://boosty.to/marketing-po-factam Конструктор сайтов Webflow: https://webflow.grsm.io/apple Вступайте в бесплатный Телеграм Чат, где я отвечаю на вопросы: https://t.me/+YinuRXEL4X9iNWUy Привет! В этом видео я покажу, как делать крутую анимацию сайтов. Покажу на примерах с сайта Apple, как создавать анимации с нуля и устанавливать их на сайт. Повторяйте за мной, чтобы прокачать навык в моушн дизайне и продавать свои услуги дороже. 00:00:00 - Магия анимации сайтов 00:00:23 - Примеры моушн дизайна, которые будем создавать в уроке 00:00:44 - Как анимировать в After Effects с нуля 00:01:14 - Анимация линий в After Effects 00:02:26 - Как настроить Trim Paths анимацию 00:09:41 - Как повторить моушен дизайн Apple 00:17:40 - О бонусах для участников чата 00:17:54 - Где скачать плагин Bodymovin для экспорта анимации 00:18:23 - Как правильно экспортировать анимацию для сайта 00:20:05 - Как экспортировать анимацию в код для сайта с помощью After Effects, используя плагин Bodymovin 00:21:38 - Какой конструктор сайтов выбрать для анимации? 00:22:11 - Webflow Анимация с чего начать? 00:27:36 - Нюансы: Как правильно подключить анимацию из After Effects к сайту на Webflow 00:32:32 - Как делать крутые сайты с анимацией без навыков моушн дизайна 00:33:05 - Повторяем сложнейшую анимацию с сайта Apple за 3 минуты Смотрите другие обучающие уроки по моушен дизайну с нуля: 1. Основы моушн дизайна с нуля: Урок 1: https://www.youtube.com/watch?v=7XF9AxNfTeQ 2. Создаем рекламный ролик: https://www.youtube.com/watch?v=QDkDr6PORxQ 3. Креатив за 20 минут. Моушн дизайн Уроки в After Effects. Урок 2: https://www.youtube.com/watch?v=yxEK_mt1zBg 4. Как заставить шевелиться статичную картинку? https://www.youtube.com/watch?v=QUQfZHOmY24 Добавляйтесь ко мне в соц.сети: Instagram: https://www.facebook.com/unsupportedbrowser ВК: https://vk.com/abramichbz

Готовим варианты загрузки

Популярные

HD видео

Только звук

Все форматы

* — Если видео проигрывается в новой вкладке, перейдите в неё, а затем кликните по видео правой кнопкой мыши и выберите пункт "Сохранить видео как..."

** — Ссылка предназначенная для онлайн воспроизведения в специализированных плеерах

Вопросы о скачивании видео

Как можно скачать видео "Моушн дизайн сайта на примере Apple. Уроки в After Effects и Webflow"?

Сайт http://unidownloader.com/ — лучший способ скачать видео или отдельно аудиодорожку, если хочется обойтись без установки программ и расширений. Расширение UDL Helper — удобная кнопка, которая органично встраивается на сайты YouTube, Instagram и OK.ru для быстрого скачивания контента.
Программа UDL Client (для Windows) — самое мощное решение, поддерживающее более 900 сайтов, социальных сетей и видеохостингов, а также любое качество видео, которое доступно в источнике.
UDL Lite — представляет собой удобный доступ к сайту с мобильного устройства. С его помощью вы можете легко скачивать видео прямо на смартфон.

Какой формат видео "Моушн дизайн сайта на примере Apple. Уроки в After Effects и Webflow" выбрать?

Наилучшее качество имеют форматы FullHD (1080p), 2K (1440p), 4K (2160p) и 8K (4320p). Чем больше разрешение вашего экрана, тем выше должно быть качество видео. Однако следует учесть и другие факторы: скорость скачивания, количество свободного места, а также производительность устройства при воспроизведении.

Почему компьютер зависает при загрузке видео "Моушн дизайн сайта на примере Apple. Уроки в After Effects и Webflow"?

Полностью зависать браузер/компьютер не должен! Если это произошло, просьба сообщить об этом, указав ссылку на видео. Иногда видео нельзя скачать напрямую в подходящем формате, поэтому мы добавили возможность конвертации файла в нужный формат. В отдельных случаях этот процесс может активно использовать ресурсы компьютера.

Как скачать видео "Моушн дизайн сайта на примере Apple. Уроки в After Effects и Webflow" на телефон?

Вы можете скачать видео на свой смартфон с помощью сайта или pwa-приложения UDL Lite. Также есть возможность отправить ссылку на скачивание через QR-код с помощью расширения UDL Helper.

Как скачать аудиодорожку (музыку) в MP3 "Моушн дизайн сайта на примере Apple. Уроки в After Effects и Webflow"?

Самый удобный способ — воспользоваться программой UDL Client, которая поддерживает конвертацию видео в формат MP3. В некоторых случаях MP3 можно скачать и через расширение UDL Helper.

Как сохранить кадр из видео "Моушн дизайн сайта на примере Apple. Уроки в After Effects и Webflow"?

Эта функция доступна в расширении UDL Helper. Убедитесь, что в настройках отмечен пункт «Отображать кнопку сохранения скриншота из видео». В правом нижнем углу плеера левее иконки «Настройки» должна появиться иконка камеры, по нажатию на которую текущий кадр из видео будет сохранён на ваш компьютер в формате JPEG.

Сколько это всё стоит?

Нисколько. Наши сервисы абсолютно бесплатны для всех пользователей. Здесь нет PRO подписок, нет ограничений на количество или максимальную длину скачиваемого видео.