#7. Мыслить как веб дизайнер - Анимация сайта в After Effects (Часть 1)
Рет қаралды 35,766
Практический урок по анимации интерфейсов от Тони Емельянова.
🔹 Продвинутый курс UX UI дизайна: academy.yem.digital/
Подпишись в инсте: / tony.yem
«Мыслить как веб дизайнер» (Урок 7): Анимация сайта в After Effects (Часть 1)
Подписывайся на канал чтобы не пропустить новые выпуски: / @yemdigital
Я в соц. сетях:
/ tony.yemelyanov
tony.yemelyanov
Мой Behance:
behance.net/tony_yemelyanov
***
Все выпуски курса «Мыслить как веб дизайнер»:
#1. Профессиональный дизайн сайта с нуля: Создаем первый экран в Figma
• #1. Мыслить как веб ди...
#2. Иконки, монограммы - подбор и адаптация,
стили и компоненты проекта в Figma:
• #2. Мыслить как веб ди... 4
#3 Иконки, монограммы - подбор и адаптация, стили и компоненты в Figma:
• #3. Мыслить как веб ди...
#4. Мыслить как веб дизайнер - Создаю видео проигрыватель для просмотра сериала и оживляю его в Figma: • #4. Мыслить как веб ди...
#5. Мыслить как веб дизайнер - Экран персонажей и внутренняя страница с продвинутой типографикой: • #5. Мыслить как веб ди...
#6. Мыслить как веб дизайнер - Адаптивный дизайн сайта под мобильные устройства в Figma:
• #6. Мыслить как веб ди...
#7. Мыслить как веб дизайнер - Анимация сайта в After Effects (Часть 1): • #7. Мыслить как веб ди...
@wallet666 4 жыл бұрын
Спасибо за видеоурок, засыпаю под него как младенец
@dariaaeroangel Ай бұрын
Привет! Спасибо за урок. В первый раз такое подробное и качественное объяснение AE вижу. В легкой подаче. Круто 💜
@Panda_Zloy 5 жыл бұрын
Очень интересно и познавательно. продолжаем. Главное ты хорошо подаешь материал - многие монотонно проговаривают текст и я вспоминаю студенческие годы когда засыпал на лекциях! У тебя все гуд!
@yemdigital 5 жыл бұрын
Спасибо, рад слышать! )
@sergeyprostobean4521 3 жыл бұрын
Досмотрел видео. Отлично. Все нравится. Спасибо, Тони, за подробные объяснения и показ практической работы над макетом. Супер. Вечером буду практиковать.
@artemasoap 3 жыл бұрын
Тони спасибо тебе, благодаря тебе мой новый кейс стал неотразим, как по мне. Спасибо, что поделился!!!!!!!!!!Здоровья и счастья тебе.
@dmitrynovikov4980 4 жыл бұрын
Очень хорошо объясняешь. Наконец-то сложилось чёткое понимание как работать с программой. Спасибо!)
@sergeyprostobean4521 3 жыл бұрын
Тони, ты спаситель . Спасибо за урок! Очень круто! Очень приятно слушать твои уроки. Все класс!
@MrBokDan 4 жыл бұрын
Спасибо за урок! Очень круто! Теперь хочу скорей идти уже изучать After Effect))
@user-is3km4uf6h 3 жыл бұрын
Самые толковые уроки! Спасибо огромное!)
@kristina7093 4 жыл бұрын
Это самое лучшее объяснение, как использовать After Effects
@Pollsokol 3 жыл бұрын
как понятно, доходчиво, душевно и полезно!! спасибо огромное=***
@emmanuilov 5 жыл бұрын
Тони, вектор правильный. Столько полезности на практике давно не получал. Спасибо огромное тебе!
@yemdigital 5 жыл бұрын
Супер! Спасибо, Андрей!
@nataliiakucher7250 2 жыл бұрын
ну наконец-то мне кто-то нормально обьяснил про анимацию!!!! Спасибо!
@Optik777 3 жыл бұрын
Круто! Очень хорошо и подробно объясняете. Спасибо!
@user-sf6mv4fs1b 4 жыл бұрын
Спасибо большое за урок,очень круто получается;)
@Tanyagolos 5 жыл бұрын
Спасибо Тони! Давно собираюсь освоить анимацию.
@yemdigital 5 жыл бұрын
Отлично! Значит, время пришло! :) Спасибо что посмотрела )
@dzivalad 5 жыл бұрын
Тони, спасибо огромное! Как всегда много познавательного! Очень интересно наблюдать. Так держать!
@yemdigital 5 жыл бұрын
Спасибо большое! :) Буду стараться )
@dzivalad 5 жыл бұрын
@@yemdigital Было бы здорово возобновить твои дизайн-разборы) Есть зрители, которым их очень не хватает;)
@yemdigital 5 жыл бұрын
@@dzivalad Я обязательно их возобновлю, чуть-чуть позже )
@roesone70 4 жыл бұрын
много уже всяких роликов пересмотрел и твой пока что самый понятный и доступный, хотя в других вроде тоже старались разжевать, но не то все равно
@zelenyi_chel 4 ай бұрын
приятный разбор спасибо доступно и понятно:)
@SinwiseAM 4 жыл бұрын
Спасибо! Очень крутое видео для новичков!
@user-kr9ms2ot4s 11 ай бұрын
Добрый вечер! Спасибо за очень подробное и полезное видео!
@yungkcob 5 жыл бұрын
Ща будет мясо
@lukichan18 3 жыл бұрын
Спасибо, все очень круто!
@kotnewman1537 5 жыл бұрын
люблю тебя..жги дальше)
@user-ug6yr4wt8z 3 жыл бұрын
Просто пушка! Было бы круто, если бы ты еще уроки по фотошопу записал :D
@user-my8ll7ju6e Жыл бұрын
спасибо! супер-видео, понятно, подробно, доступно:)))) я в восторге!!!!
@user-hf9jo1xm5l 5 жыл бұрын
Спасибо огромное! Очень информативно и понятно.
@yemdigital 5 жыл бұрын
Спасибо! :)
@pavelrightactions8150 4 жыл бұрын
Спасибо, Тони, благодаря тебе у меня появилось желание освоить Афтер Эффектс :)
@yemdigital 4 жыл бұрын
Супер! 🙂
@user-oj5yc3wt9d 4 жыл бұрын
Оч. круто ! Просто мегаСПАСИБО!!
@oliajkin 2 жыл бұрын
Супер видео! Спасибо!
@GeorgeClover 5 жыл бұрын
Ты как никто другой поможет новичку досконально разобраться с основами программы, браво! Думаю, будет полезно установить программу, которая показывает твои HotKey’s в реальном времени, тогда не придётся объяснять, что и для чего ты нажал ;) Желаю успехов со второй частью и последующим кейсом на бехайнсе!)
@yemdigital 5 жыл бұрын
Спасибо! :) Я искал такую программу, но на винде не нашел ничего нормального, только пару программ и те работают не как надо )
@xYouthTritonx 4 жыл бұрын
Хороший урок без воды, долго откладывал обучение инструментом, но вижу что зря) спасибо большое за урок
@Aleks_pakaralex 4 жыл бұрын
Очень классный урок *-*
@andrewbarkovets 3 жыл бұрын
Привет Тони! Все очень доходчиво и понятно) спасибо за видос! Но соглашусь, что есть моменты которые хочется ускорить на 2х ;) Пару вопросов! Есть онлайн конвекторы которые экспортируют frame из figma в psd, пробовал ли ты так делать? или есть какие-то нюансы по этому поводу? Заранее спасибо! Продолжай в том же духе)
@user-rp2vy7fy4b 2 жыл бұрын
Композицию, в принципе, можно объяснить как фрейм в фигме. По сути то же самое)
@zlobnyi_kommentator 3 жыл бұрын
чувак, много хорошей информации, но сука, на 1 слово по делу 100 вокруг да около. Ну емае.
@irahank5509 2 жыл бұрын
i realize Im kinda randomly asking but does anyone know a good site to watch newly released series online?
@otiskylo1038 2 жыл бұрын
@Ira Hank Flixportal :)
@irahank5509 2 жыл бұрын
@Otis Kylo Thank you, signed up and it seems to work :) I really appreciate it !
@otiskylo1038 2 жыл бұрын
@Ira Hank no problem =)
@sedovadesign7422 3 жыл бұрын
thank u man, very helpful
@yanatrehubava6896 5 жыл бұрын
Круто, со снежком прямо вау-эффект сразу добавился! :D Душевно так стало. Давно думала начать разбираться с анимацией, и твое видео в этом деле очень пригодится. Большое спасибо, Тони! :) Жаль, правда, что из Фигмы нельзя сразу в AE экспортировать фрейм, но позже, может быть, появится такой плагин. Надеюсь, во всяком случае)
@yemdigital 5 жыл бұрын
Тоже надеюсь что такой плагин появится - это очень упростит жизнь ) Спасибо и удачи с освоением анимации - этот урок тебе совершенно точно будет полезен )
@retoucher_msk 8 ай бұрын
А как же AEUX? Все, сломался? НЕ вывозит обнов Ае?@@yemdigital
@alyonamalinskaya8460 Жыл бұрын
Все хорошо, только приходится в х1.5 слушать)
@retoucher_msk 8 ай бұрын
50:40 Можно: просто надо применить Levels или hue/saturation
@user-ip1lf7ji7j 4 жыл бұрын
Мне кажется, даже самый тупой разберётся с AE благодаря этому видео.Это талант, однозначно.Спасибо большое за разбор
@yemdigital 4 жыл бұрын
Спасибо большое за обратную связь )
@user-ip1lf7ji7j 4 жыл бұрын
@@yemdigital Подскажите пожалуйста, какого года Ae Вы используете в данном видеоуроке ?))
@yemdigital 4 жыл бұрын
@@user-ip1lf7ji7j Версия программы того же года что и видео - 2019. Но особой разницы нет, можно все тоже самое делать и на 2020 и на более старых версиях - отличия есть, но наши основные задачи практически не затрагивают.
@user-ip1lf7ji7j 4 жыл бұрын
@@yemdigital поняла) спасибо.Спрашеваю , потому что у меня тоже скачана 2019 года, на русском.но интерфейс отличается почему то .. например рамка на элементах , отображение графика
@madarauchiha3277 3 жыл бұрын
Oooooooчень затянуто
@ustadine2489 4 жыл бұрын
Что делать со скругление углов прямоугольника? Как создать такую кнопку, почему про это не сказал? Как объединить слои?
@jamesbong986 4 жыл бұрын
Спасибо! Отличный урок, без воды , всё чётко и по делу=) А можешь поподробнее рассказать как ты Figme растянул все элементы фреймов по размерам 1920 px на 1080 px? Как это работает для текстовых элементов?
@yemdigital 4 жыл бұрын
Спасибо! Текстовые элементы должны сохранять свои параметры (размер букв и т.д.) вне зависимости от ширины макета. Соответственно, при растяжении растягиваются только элементы заднего фона и сам макет, а основной контент почти всегда нужно оставлять по центру без изменений.
@celestialraven182 4 жыл бұрын
AEUX попробуй, облегчит жизнь)
@juliasizova7799 4 жыл бұрын
Здорово получилось! Страничка ожила. :)) Конечно по 1 элементу из Фигмы переносить это боль, но скорость и простота работы в Фигме, компенсирует эти потери.. Интересно, а вот эти эффекты (я про снег) можно будет потом запрограммировать на реальных страницах? А то заказчик соблазнится на красивую картинку, а как это реализовать разработчику? Возможно?
@yemdigital 4 жыл бұрын
Спасибо! 😊 Да, нормальный разработчик может реализовать анимацию в проекте. Например для снега есть уже даже готовые решения, которые он можно «донастроить» под проект если есть необходимость.
@fsewcdv 2 жыл бұрын
топ
@vonesqa 3 жыл бұрын
На 2х смотреть самое то
@kristinaananian8581 3 жыл бұрын
А если экпортировать из фигмы как PDF а потом закинуть в илюстратор? А уже потом в After Effects?
@retoucher_msk 8 ай бұрын
проще как SVG и потом в Иллюстратор ) Но эффекты типа теней не переносятся
@GeorgeClover 5 жыл бұрын
Тони, а с Adobe XD экспортируется нормально в AF?
@yemdigital 5 жыл бұрын
Да, они контачат между собой
@GeorgeClover 5 жыл бұрын
YEM DIGITAL: Академия цифрового дизайна, а чем тогда xd, уступает фигме?
@yemdigital 5 жыл бұрын
@@GeorgeClover В Фигме мне нравится, что можно работать прямо в браузере. Несколько человек одновременно могут работать над одним проектом. В бесплатной версии Фигмы для дизайнера фрилансера нет практически никаких ограничений. Очень крутая система адаптивного дизайна. Совсем недавно появилась функция с работающими гифками прямо в режиме презентации проекта. С другой стороны, в XD за последнее время тоже появилось много недостающих инструментов и есть приятные возможности (например, экспорт в Ae). Планирую в ближайшее время покопаться с XD и думаю, запишу видео со сравнением свежих версий Figma vs XD.
@GeorgeClover 5 жыл бұрын
YEM DIGITAL: Академия цифрового дизайна, отлично, я только за!) Спасибо за ответ!
@ahsanulislamtapadar6876 4 жыл бұрын
brother, how to animate laye by layer Figma file in after effect ?
@yemdigital 4 жыл бұрын
Try AEUX plugin for Ae and Figma - It's quite simple to use and one of my latest videos is about it. I believe with the subtitles On it will be easy to understand:)
@ahsanulislamtapadar6876 4 жыл бұрын
@@yemdigital thanks for your response.i have added AEUX plugins in figma but it showS failed to connect in AE 😥
@user-ym5gs9oj4f 2 жыл бұрын
Не могу понять мы нажимаем F9?
@user-ih2es9kn8s 4 жыл бұрын
ООО очень много воды, но для начинающих думаю будет очень полезно. Фигму очень удобная, она мне больше нравится в использовании чем Adobe XD, но у XD есть огромный плюс, из него сразу макет или отдельно фреймы можно переносить в Афтер и анимировать
@yemdigital 4 жыл бұрын
Я недавно выпустил пару видео на тему автоматического переноса макетов из Figma в Ae, но тоже для новичков если что))
@marianan1161 4 жыл бұрын
Где вторая часть?
@yemdigital 4 жыл бұрын
На канале, здесь: kzfaq.info/get/bejne/f61mq8aJz9PJf6s.html
@forfullfun 4 жыл бұрын
А нафига это делать? Как это анимировать потом на live в реальном вебе?
@yemdigital 4 жыл бұрын
Нет практически ничего, чего бы нельзя было реализовать в вебе при желании и необходимых навыках. Технологии позволяют уже давно. Вот один из множества примеров, после которого все сомнения пропадут 🙂 bruno-simon.com/
@ilovelifeqqq 3 жыл бұрын
КАК МНОГО ВОДЫ
@user-no5gj1jr3c 4 жыл бұрын
Тони привет!Автор эфект можно скачть бесплатно?
@yemdigital 4 жыл бұрын
After Effects - платная программа, как и большинство продуктов Adobe. Но в сети можно скачать практически любой софт, если не претит пиратствовать и достаточно веб-образованности чтобы не нахватать вирусов вместе с пиратским софтом.
@nikeponomarev9403 3 жыл бұрын
ЕСТЬ У КОГО ВЗЛОМАНЫЙ АФТЕР ЭФФЕКТ?
@lwanich 2 жыл бұрын
если убрать воду видео будет длиться 20 минут
@lwanich 2 жыл бұрын
беру свои слова обратно , там нет 20 минут , там 2 часа потраченной жизни
@user-kq4zx7us4l 2 жыл бұрын
34:47 у тебя склейка... и не понятно что ты поменял тип диаграмм... Новички будут тупить в этом моменте.
@user-bo5tn4ne1c 2 жыл бұрын
За 2 мин понял что с диаграммами что-то не то... если человек не может подумать головой и переключить режим, лучше сразу идти на стройку)))
@user-kq4zx7us4l 2 ай бұрын
@@user-bo5tn4ne1c чел... ты в место того что бы умничать... подсказал бы человеку) нельзя быть таким токсичным
@user-kq4zx7us4l 2 ай бұрын
Правой кнопкой мыши на график щелкаешь и выбираешь Speed Graphic
@djumbapumba48 2 жыл бұрын
Невыносимо много воды
@user-od8po5tk6s 2 жыл бұрын
Твои длинные а-а-а-а-а-а прям напрягают. Чувак научись разговаривать. А в общем, познавательно.
@hytryy7811 4 жыл бұрын
Что за дичь? Видео нужно было назвать «как собрать макет в афтере» 0 информации по анимации, воды налил на полтора часа 👎🏻
@yemdigital 4 жыл бұрын
Так зачем полтора часа смотреть видно на тему, с которой ты уже и так знаком, а потом еще писать недовольные комменты, к тому же ложные? - Видео длится 1:45, из которых первый час - я объясняю принцип работы с After Effects для новичков, которые возможно даже никогда не видели эту программу - им этот контент полезен и важен. Это ведь, очевидно, видео именно для новичков, а на мастера класс для тех, кто уже знаком с принципами работы в Ae. Кроме того, это не просто отдельное видео, а часть мини-курса, в котором я показывал и объяснял весь процесс работы над проектом и нельзя ведь было перескочить сразу к той части где я начинаю анимировать интерфейс, не объяснив основ хотя бы в общих чертах.
Тони Емельянов | Продуктовый дизайнер (UX UI)
Рет қаралды 13 М.
Хохлов Сабатовский
Рет қаралды 254 М.
Alexey Bychkov: веб-дизайн и фриланс
Рет қаралды 35 М.
Aninix - Interface animation
Рет қаралды 18 М.
Alexey Bychkov: веб-дизайн и фриланс
Рет қаралды 20 М.