Анимация в after effects by Елизавета Гордеева

UI/UX ДИЗАЙН

УРОК 10. АНИМАЦИЯ В AFTER EFFECTS Виды и примеры анимации для веб и мобильных устройств . . . . . . . . . . . . . . . 3 Прелоадеры сайтов . . . . . . . . . . . . . . . . . 11 Основной функционал After Effects . . . . . . . 22 Основной функционал Principle . . . . . . . . . 44

ВИДЫ Виды И и ПРИМЕРЫ примеры АНИМАЦИИ анимации ДЛЯ для ВЕБ веб И и МОБИЛЬНЫХ мобильных УСТРОЙСТВ устройств Когда первая анимация появилась на сайтах, она выглядела как бесполезное украшение. Но с ростом скоростей подключения, улучшением пропускной способности и развитием браузеров, анимация стала фундаментом интерактива. Ключом к качественному дизайну с хорошей анимацией является умеренность. Маленькие, простые и ненавязчивые анимации добавляют разнообразия взаимодействию с сайтом и приложением, не отвлекая пользователя от просмотра контента. Крупная анимация привлекает больше внимания, но если дизайнер начинает добавлять слишком много движущихся эффектов, это создает лишний хаос (рис. 1). Сегодня анимация не перегружает веб-сайты и серверы, а эффекты оптимизируются для быстрой загрузки. Современный дизайн предполагает наличие большого количества подсказок для полного понимания функционала сайта. С этими функциями прекрасно справляется простая анимация. С ее помощью можно добавлять инструкции по взаимодействию с пользователем, направлять его, не внося больших изменений в общую стилистику. Анимация делает пользовательские интерфейсы более удобными. Очевидно, что недостаточно отрисовать ролик, вставить его на страницу, а затем надеяться, что он повысит коэффициент конверсии.

Рисунок 1

Как и любой другой аспект дизайна, анимацию нужно согласовывать с проектом. Также следует учитывать фактические детали ее реализации. Анимацию часто используют для подчеркивания интерфейсных элементов. Данный тип анимации подтверждает успешное (или нет) действие пользователя (например, нажатие или выбор). Пользователь взаимодействует с интерфейсом для того, чтобы совершить определенное действие, к примеру, перейти на другую страницу, открыть боковую панель или модальное окно, отправить письмо и т. д. Поэтому он должен понимать разницу между интерфейсом и украшением.

Виды и примеры анимации для веб и мобильных устройств Анимация интерфейсных элементов создает обратную связь, необходимую для комфортного взаимодействия с сайтом. Она может быть реализована незаметно, например, через изменение фона кнопок при наведении. К этому виду анимации можно также отнести скольжение боковых панелей на странице, увеличение вкладок или всплывающих уведомлений (рис. 2).

Польза такой анимации была очевидна еще на ранних этапах развития пользовательских интерфейсов. Курсор мыши в первых ОС превращался в песочные часы. Это было сигналом к тому, что компьютер не завис. Еще один пример – анимация перелетающих документов из одной папки в другую (при копировании или скачивании файлов) (рис. 3).

Рисунок 2

Достаточно распространенной является анимация ожидания (прелоадер). Эта анимация расширяет обратную связь с пользователем. Она показывает процессы в фоновом режиме, и призывает дождаться их окончания. Рисунок 3

Виды и примеры анимации для веб и мобильных устройств Интересный видом анимации является Storytellingанимация. Многие сайты содержат анимацию, которая рассказывает пользователю историю при взаимодействии с ней. К примеру, при скролле страницы перед пользователем «собирается» продукт, или появляются анимированные персонажи, которые следят за действиями на экране (рис. 4). Как правило, такая анимация предназначена для создания необходимого эмоционального настроения пользователя.

Рисунок 4

Виды и примеры анимации для веб и мобильных устройств Необычная анимация способна произвести впечатление на пользователя. Хороший пример – страница девайса Mac Pro на сайте компании Apple. Пользователю при прокрутке показывают, что находится внутри системного блока (рис. 5). Иногда анимацию размещают без определенной цели, просто для того, чтобы она была. Зачастую это декоративная анимация. Такой подход только отвлекает внимание пользователя и мешает создавать нужные акценты на странице. Если дизайнеру нужно показать важность продукта, он может вложить в анимацию призыв к действию. В случаях когда пользователь слишком отвлекается на анимацию, не обращая внимания на контент, анимацию стоит убрать. Декоративная анимация должна отодвигаться на второй план, показывать ее нужно после того, как завершится призыв к действию. Также можно добавлять анимации, которые запускаются только после того, как пользователь совершит какое-либо действие, например, наведет указатель на какой-то маленький элемент. Хорошим примером может послужить сайт Siaperitivos (рис. 6).

Рисунок 5

Рисунок 6

Виды и примеры анимации для веб и мобильных устройств Анимация также достаточно распространена для рекламы. Если дизайнер хочет привлечь внимание к рекламе, анимация – отличный способ. Но данный тип интерактива обладает той же проблемой, что и декоративный: он отвлекает пользователя от просмотра основного контента страницы (рис. 7). В целом, существует 8 функций анимации в современном веб-дизайне: 1. Привлечь внимание. Общепринято считать, что движение привлекает внимание. Если большая часть веб-сайта статична, глаз будет автоматически фокусироваться на движение. Эту особенность можно использовать, чтобы направлять внимание пользователей. Анимация работает хорошо, когда нужно оповестить пользователей о новых сообщениях или функциях на странице. В качестве примера можно привести всплывающие окна онлайн-поддержки (рис. 8).

Рисунок 7

Рисунок 8

Виды и примеры анимации для веб и мобильных устройств 2. Научить. Предположим, что в приложении пользователь закрывает меню, а анимация сдвигает его влево. Это сигнализирует о том, что пользователь может повторно открыть его свайпом вправо, либо кликом по иконке (рис. 9).

Рисунок 9

Анимированные визуальные эффекты могут обучать эффективней, чем текст или статические изображения. Наиболее эффективна анимация hover. Если объект меняет свои свойства при наведении, это сигнализирует о его интерактивности и возможности взаимодействия. Когда пользователь не уверен в интерактивности объекта, он наводит на него курсор, чтобы убедиться (рис. 10).

Рисунок 10

Виды и примеры анимации для веб и мобильных устройств 3. Сделать смену экрана плавной. Анимации перехода добавляют плавности смене экранов. Раздражающий эффект резких переходов может навредить UX, поэтому лучше сгладить такие переходы анимацией (рис. 11). Можно использовать анимацию перехода, чтобы продемонстрировать индивидуальность сайта и сделать процесс взаимодействия более плавным. 4. Сделать плавным скроллинг страницы. Без эффектов анимации прокрутка бы никогда не стала красивой. Прокрутка – это один долгий переход, и именно анимация способна убрать резкие эффекты такого перехода. Плавные переходы создают иллюзию единого экрана, соответственно, скроллинг становится более удобным и менее раздражающим. Например, как на сайте Beoplay (рис. 12).

Рисунок 11

Рисунок 12

Виды и примеры анимации для веб и мобильных устройств 5. Отвлечь от процесса загрузки. Долгая загрузка – значительный минус вебдизайна. Красивая анимация может снизить раздражение пользователя от ожидания. Пока сайт грузиться, забавная анимация позволяет пользователю расслабиться, переключить внимание (рис. 13). 6. Развлечь пользователей. Наконец, анимацию можно использовать в ее оригинальной форме – для развлечения. Один из вариантов такой анимации – интерактивные фоны, где перемещение курсора сдвигает все изображение. Эти небольшие триггер-эффекты позволяют пользователям взаимодействовать с сайтом, придавая ему игровую направленность. Такой вариант неплохо реализован на сайте Trainrobber (рис. 14).

Рисунок 13

Рисунок 14

ПРЕЛОАДЕРЫ САЙТОВ По сути, preloaders (также известны как прелоадеры или загрузчики) – это анимация или статическое изображение, которое видит пользователь, пока загружается основная часть содержимого страницы. С помощью прелоадеров можно скрасить ожидание пользователей во время обработки операций сервера. Наиболее распространенный вид прелоадеров – движущиеся полосы или мигающие круги, которые показывают время до конца загрузки. Такой вариант помогает пользователям не заскучать во время загрузки (рис. 15).

Рисунок 15

Рассмотрим некоторые характеристики эффективного прелоадера. 1. Прелоадеры должны быть простыми и интересными. Пользователи лучше воспринимают и запоминают простые прелоадеры. Кроме того, загрузчик должен соответствовать основному стилю сайта. Не стоит вмещать в прелоадеры большое количество анимации. Это будет отвлекать посетителя от просмотра контента. 2. Для прелоадеров важной составляющей является быстрая загрузка. С технической точки зрения, дизайнер может поместить в прелоадер все: анимацию, графику, звуковые эффекты и т. д. Однако, это не имеет смысла.

Более того, прелоадеры должны быстро воспроизводится даже при низких скоростях интернета. Для этого стоит оптимизировать контент прелоадера. 3. Прелоадеры должны быть уникальными. Обычные прелоадеры (например, вращающиеся круги) достаточно удобны в применении. Простая форма и графика – лучший для восприятия вариант. Но не стоит забывать о добавлении уникальности в прелоадер. Он должен отражать основной посыл компании и соответствовать ее стилю. Например, Google и Apple хорошо зарекомендовали себя фирменной идентичностью. 4. Показатели загрузки. Это чрезвычайно важный пункт поддержания позитивного опыта пользователей, особенно, если сайт

Прелоадеры сайтов тяжеловесный. В таких случаях стоит помещать в анимацию загрузки обратный отсчет или индикатор прогресса. Основная цель подобных анимаций состоит в том, чтобы пользователи остались на странице. Существует множество причин использования прелоадеров на сайтах. Самой распространенной причиной является выигрывание времени для загрузки сайта (рис. 16). Порой сайтам, перегруженным информацией нужно некоторое время для полной загрузки. Именно прелоадеры выигрывают время и задерживают внимание пользователей. Прелоадеры также широко используют, чтобы перенаправить внимание пользователя с длительной загрузки на анимацию (рис. 17).

Рисунок 16

Рисунок 17

Прелоадеры сайтов Одной из задач прелоадера является отвлечение внимания пользователей от ожидания. То есть, пользователи вместо того чтобы просто ждать завершения загрузки, заняты наблюдением за анимацией. Прелоадеры более привлекательны и интересны, чем простая загрузка браузера (рис. 18). Это хорошая альтернатива пустому белому окну браузера. Вместо того, чтобы заставлять пользователей смотреть в пустое окно, дизайнер может задержать их внимание на интересном, хорошо спроектированном прелоадере. Прелоадеры также создают приятное первое впечатление (рис. 19). Анимация загрузки – первый элемент, который пользователь видит на странице. Если дизайнер создал качественный сайт, то стоит также приложить немного усилий и создать столь же качественный прелоадер. Именно интересная загрузка может сформировать приятное и запоминающееся первое впечатление. Это особенно важно для сайтов-портфолио (графических дизайнеров, иллюстраторов, фотографов, дизайнерских студий, gamedev студий и т. д.). Хорошо продуманный анимированный прелоадер имеет колоссальный потенциал в создании позитивного впечатления от сайта или приложения. Кроме того, прелоадер позволяет оживить интерфейс, сделать его намного интереснее. Эта небольшая, но важная деталь подчеркивает индивидуальность бренда или проекта.

Рисунок 18

Рисунок 19

Прелоадеры сайтов Рассмотрим примеры сайтов с качественными и интересными прелоадерами. 1. Pashant Sani. Интересный прелоадер размещен на сайте вебдизайнера Pashant Sani (рис. 20). В данном случае в качестве предварительного загрузчика используются стилизованные инициалы автора. Они будто прорисовываются несколькими цветами, после этого превращаясь в логотип сайта. Подобные прелоадеры – не редкость для сайтов портфолио, и данный вариант – хороший тому пример. 2. Creative Cruise. Сайт Creative Cruise был создан для того, чтобы пригласить людей окунуться в творческую атмосферу Амстердама. Чтобы подчеркнуть основной стиль сайта и его идею, дизайнеры решили создать прелоадер с веселым мужчиной, который танцует брейкданс. Анимация загрузки выполнена в стиле самого сайта, интригуя посетителей и заставляя их дождаться полной загрузки (рис. 21).

Рисунок 20

Рисунок 21

Прелоадеры сайтов 3. Open Continents. Это веб-сайт, созданный для кинематографического исследования. Анимация загрузки завораживает своим интерактивным элементом: пользователи взаимодействуют с ней посредством курсора. Вместе с перемещением мыши также перемещаются и звезды, расположенные в круге в центре экрана. Данный прелоадер несет в себе некую тайну, побуждая посетителей исследовать сайт (рис. 22). 4. Kokopako. Это сайт-портфолио дизайнера и арт-директора Clement Pavageau. В прелоадер хорошо интегрированы личные данные владельца, «‘87» – это не только обратный отсчет до конечной загрузки, но и отсылка к году, важному для создателя (рис. 23).

Рисунок 22

Рисунок 23

Прелоадеры сайтов 5. McWhopper. Данный веб-сайт был создан для продажи специального предложения от McDonald's и Burger King. Его прелоадер представляет собой анимированный подпрыгивающий бургер, который дает возможность увидеть все ингредиенты, скрашивая ожидание загрузки (рис. 24).

Рисунок 24

Рисунок 9

Рисунок 10

Прелоадеры сайтов 3. Simple Preloader – хороший пример прелоадера, который напоминает вращающееся колесо лотереи. Такие прелоадеры можно сделать интерактивными, чтобы усилить элемент взаимодействия пользователя с анимацией (рис. 27). 4. Bird Preloader сочетает в себе простые геометрические фигуры, которые напоминают птицу. Такая анимация хорошо подходит для сайтов зоозащитных организаций, зоопарков или вебсайтов для детей (рис. 28). Рисунок 27

Рисунок 28

Прелоадеры сайтов 5. LittlePin Spinner. Прелоадеры с анимацией геоточки хорошо подходят для сайтов и приложений о путешествиях и онлайн-карт. Подобные анимированные элементы могут сделать загрузку более привлекательной и интересной (рис. 29). 6. No Halftime Loaders Petrick – увлекательная анимация со спортивными мячами. Такой прелоадер может идеально дополнить спортивный интернет-магазин или сайт о спортивных событиях (рис. 30).

Рисунок 29

Рисунок 30

Прелоадеры сайтов 7. Monkey Swinging Loader Hello Dribbble – веселый прелоадер с раскачивающейся обезьяной. Такой элемент загрузки приятно удивит пользователей и задержит их внимание. Также подходит для сайтов зоопарков, детских веб-ресурсов, для сайта мультфильма и т. д. (рис. 31). 8. Cooper loader – прелоадер в форме знака бесконечности, который плавно движется. Такая анимация загрузки с минималистичным дизайном применима практически везде (рис. 32).

Рисунок 31

Рисунок 32

Прелоадеры сайтов 9. Ping-Pong Loader – интересный анимированный прелоадер в виде игры пинг-понг. Анимация подогревает интерес пользователей к сайту (рис. 33). 10. SurveyPlanet app Loader – интересный прелоадер с планетой и вращающейся вокруг нее ракетой. Такая анимация загрузки – хорошее решение для различных глобальных компаний и организаций (рис. 34).

Рисунок 33

Рисунок 34

ОСНОВНОЙ ФУНКЦИОНАЛ AFTER EFFECTS After Effects – специализированная программа компании Adobe, предназначенная для создания сложных анимационных композиций и спецэффектов. Она широко используется как в веб-дизайне, так и в сферах рекламы, телевидения и кинематографа, а также при создании музыкальных клипов. Последняя версия программы датируется 2018 годом. Чтобы скачать и установить After Effects, необходимо зайти на официальный сайт Adobe, на страницу выбранной программы. Здесь можно купить полную лицензионную версию, либо скачать пробный триал (рис. 35). Скачиваем архив в любую удобную директорию на компьютере (рис. 36).

Рисунок 35

Рисунок 36

Основной функционал After Effects Распаковываем папку и двойным кликом запускаем файл установщика setup.exe (рис. 37). В результате начнется установка приложения Adobe Creative Cloud (рис. 38).

Рисунок 37

Рисунок 38

Основной функционал After Effects После завершения данного процесса откроется окно Creative Cloud. Здесь нужно ввести данные учетной записи Adobe и кликнуть Sing In (рис. 39).

Рисунок 39

Далее принимаем условия лицензионного соглашения и кликаем Continue (рис. 40).

Рисунок 40

Основной функционал After Effects Откроется список всех триальных продуктов Adobe, доступных для скачивания. Выбираем After Effect и нажимаем на кнопку Try (рис. 41).

Рисунок 41

Ожидаем завершения установки программы. После этого следует кликнуть Start Trial, чтобы запустить пробную версию After Effect (рис. 42).

Рисунок 42

Основной функционал After Effects Запустится окно инициализации (рис. 43). На рисунке 44 изображено, как будет выглядеть программа при первом запуске.

Рисунок 43

Рисунок 44

Основной функционал After Effects Любые окна интерфейса можно смещать, включать и выключать, настраивая внешний вид под собственные потребности (рис. 45). Чтобы вернуться к исходному расположению окон, следует нажать кнопку Standard на верхней панели инструментов (рис. 46).

Рисунок 45

Рисунок 46

Основной функционал After Effects Список всех доступных окон с дополнительными инструментами и настройками находится в меню Window. Если какое-то окно было закрыто по ошибке, его всегда можно найти в этой вкладке (рис. 47).

Для начала работы с программой нужно создать новый проект: меню File > New > New Project. При первом запуске After Effects, он открывается по умолчанию (рис. 48).

Рисунок 48

Панель Project, которая находится слева от рабочей зоны, играет важнейшую роль в создании проекта. Сюда помещаются исходные файлы, к примеру, видео, картинки, логотипы, которые будут использоваться в работе (рис. 49).

Рисунок 47

Рисунок 49

Основной функционал After Effects Чтобы добавить файлы в проект, следует кликнуть ПКМ в области окна Project и щелкнуть Import > File. Исходники также можно напрямую перетащить из папки в программу (рис. 50). В результате сформируется список добавленных объектов (рис. 51). Чтобы было удобней ориентироваться, можно поместить файлы в папки. Это поможет четко структурировать проект (рис. 52). Рисунок 50

Рисунок 51

Рисунок 52

Основной функционал After Effects Чтобы начать работу над конкретным роликом, нужно создать композицию. Для этого кликаем по кнопке New Composition в центре рабочей области, либо открываем Composition > New composition (хоткей Ctrl + N) (рис. 53). В результате откроется окно с предварительными настройками разрабатываемого проекта. Здесь задается разрешение файла (к примеру, 1920 × 1080 px), частота кадров в секунду – Frame Rate, и продолжительность ролика – Duration, которая измеряется в секундах или в количестве кадров (рис. 54).

Рисунок 53

Рисунок 54

Основной функционал After Effects Нажимаем кнопку OK и получаем пустую композицию (Comp1) (рис. 55). В центральном окне формируется проект (рис. 56).

Рисунок 55

Рисунок 56

Основной функционал After Effects Чтобы поместить любые файлы в композицию, достаточно перетащить их из панели Project в стек слоев на панели Timeline. Принцип наложения слоев такой же, как и в программе Photoshop: каждый новый объект в сцене автоматически добавляется на отдельный слой, который помещается поверх остальных (рис. 57). Слои также можно блокировать, либо включать/ выключать их видимость (рис. 58).

Рисунок 57

Рисунок 58

Основной функционал After Effects Дополнительные настройки скрыты под иконками в правом нижнем углу панели Timeline (рис. 59). Если деактивировать все три иконки, можно освободить больше места для дорожек анимации. Это очень удобно при работе на маленьком мониторе (например, на ноутбуке) (рис. 60).

Рисунок 59

Рисунок 60

Основной функционал After Effects С помощью хоткея F4 можно переключаться между разными видами настроек (рис. 61-62).

Аналогичную функцию выполняет кнопка Toggle Switches/Modes внизу панели (рис. 63).

Рисунок 61

Рисунок 63

Рисунок 62

Рисунок 61-62

Основной функционал After Effects Принцип анимирования прост: программа After Effects позволяет динамически менять любые физические параметры объектов во времени. Чтобы раскрыть список простейших анимаций, которые можно по умолчанию применить к любому объекту, следует кликнуть по стрелке слева от названия слоя. В подменю Transform задается местоположение файла в пространстве сцены (Position), его масштаб (Scale), поворот (Rotation) и степень прозрачности (Opacity). Опция Anchor Point отвечает за положение «якорной» точки объекта, относительно которой проводится анимация (рис. 64). Возле каждого параметра стоит маленький значок секундомера. Если кликнуть по нему, на временной шкале появится небольшая точка – ключевой кадр, в котором фиксируется текущее состояние объекта. Стоит также отметить, что каждый параметр анимации обладает собственной временной шкалой (рис. 65). Если передвинуть бегунок временной шкалы на несколько секунд вперед и поменять местоположение файла, программа создаст еще один ключ с новыми значениями. При этом положение объекта во всех промежуточных кадрах между ключами просчитается автоматически (рис. 66).

Рисунок 64

Рисунок 65

Рисунок 66

Основной функционал After Effects Также в программе существует цветовая идентификация слоев, в зависимости от их содержания. К примеру, композиции по умолчанию отмечаются бежевым цветом, футажи – зеленым, векторные фигуры и пути – синим (рис. 67). Этот параметр можно оперативно менять с помощью специальных окошек слева от названия слоя (рис. 68).

Рисунок 67

Рисунок 68

Основной функционал After Effects К каждому слою можно применить дополнительные эффекты. Список доступных пресетов можно найти на панели Effects & Presets справа от рабочей области. Данная панель по умолчанию всегда открыта (рис. 69). Аналогичный список находится в меню Effects на верхней панели (рис. 70). Каждый эффект обладает собственным набором параметров, которые также анимируются. Его настройки отображаются на панели Project. Кроме того, эффекты и пресеты можно накладывать друг на друга для создания более интересной анимации (рис. 71). Рисунок 69

Рисунок 71

Рисунок 70

Основной функционал After Effects Хоткей U позволяет отсортировать только те свойства, в которых присутствует анимация. Таким образом можно оптимизировать экранное пространство и не теряться в большом количестве развернутых дорожек (рис. 72). Многие хоткеи отображаются в меню напротив наиболее часто используемых команд (рис. 73).

Рисунок 72

Готовую анимацию можно просмотреть в рабочей области, нажав на клавишу Space. Но прежде чем проиграть ролик, программа должна скопировать его в память компьютера. Поэтому при первом запуске видео может отображаться дискретно. Это будет особенно заметно, если компьютер обладает недостаточным объемом памяти, поскольку зеленая полоса над дорожками анимации не заполнится (рис. 74).

Рисунок 73

Рисунок 74

Основной функционал After Effects После того как анимация настроена, нужно вывести проект в демонстрационный файл. Для этого открываем меню Composition и выбираем команду Add to Render Queue (Добавить в очередь рендера), хоткей Ctrl + M (рис. 75).

Внизу откроется окно со списком текущих рендеров (рис. 76). Первая строка (Render Setting) отвечает за базовые настройки (рис. 77).

Рисунок 76

Рисунок 75

Рисунок 77

Если кликнуть по данной надписи, откроется дополнительное окно (рис. 78).

Основной функционал After Effects В строке Output Module настраиваются формат и цветовая схема создаваемого ролика (рис. 79-80).

Рисунок 78

Рисунок 79

Здесь можно задать качество и разрешение рендера, указать отрезок времени и количество кадров в минуту, а также выбрать целевой файл визуализации (полную композицию или рабочую область) (рис. 78).

Рисунок 80

Рисунок 79-80

Основной функционал After Effects В строке Output To нужно указать путь, куда будет сохранен готовый файл (рис. 81). Нужно убедиться, что композиция, которую нужно отрендерить, отмечена галочкой. Она будет включена по умолчанию, если в очереди находится только один файл. После этого следует нажать кнопку Render (рис. 82). Готовый видеоролик можно просмотреть в стандартном плеере, либо залить на YouTube. Скорость рендера зависит от сложности и продолжительности проекта, а также количества использованных эффектов. Другой метод рендеринга предполагает наличие дополнительного ПО – программы Adobe Media Encoder, которую нужно установить отдельно. Это обусловлено тем, что в более поздних версиях After Effects из списка стандартных видеоформатов было исключено несколько наиболее популярных (например, MPEG-4 – H.264). Чтобы воспользоваться Adobe Media Encoder, открываем меню Composition > Add to Adobe Media Encoder Queue (рис. 83). При выполнении этой команды, загрузится программа, куда автоматически будет перенесена композиция. Далее, как и в случае с After Effects, нужно задать желаемые настройки и запустить сам рендер.

Рисунок 81

Рисунок 82

Рисунок 83

Основной функционал After Effects Все важные настройки интерфейса находятся в меню Edit – Preferences – General. Хоткей для быстрого вызова – Ctrl + Alt + ; (рис. 84).

Откроется дополнительное окно со списком параметров (рис. 85).

Рисунок 85

Рисунок 84

Как и в любой другой программе, настройки After Effects можно сбросить к исходному состоянию. Для этого нужно закрыть программу, нажать клавиши Ctrl + Alt + Shift, и запустить программу снова. При этом появится предупреждение с вопросом, действительно ли нужно удалить все существующие настройки (рис. 86).

Основной функционал After Effects

Рисунок 86

Нажимаем OK. В итоге откроется обычная версия After Effects со сброшенными настройками. Любые изменения в положении окон или оформлении интерфейса будут удалены.

Один из важнейших параметров, который следует настроить перед началом работы, – автосохранение. В последних версиях программы эта функция по умолчанию активна. Интервал сохранения лучше задать в пределах 10-15 минут, количество резервных копий – не более 5, чтобы не перегружать компьютер. Здесь же прописывается путь для сохраняемых файлов. Лучший вариант – держать бекапы в той же папке, что и основной проект (рис. 87).

Рисунок 87

ОСНОВНОЙ ФУНКЦИОНАЛ PRINCIPLE Principle позволяет создавать интерактивные прототипы. С его помощью можно реализовать скроллинг и навигацию на различных устройствах (рис. 88).

Сохраняем скачанный архив в любой удобной папке на компьютере и распаковываем файл (рис. 90).

Рисунок 90

Триальную версию данной программу можно скачать с официального сайта Principle (рис. 89).

Запускаем Principle. Появится окно регистрации, в котором можно ввести серийный номер продукта. Здесь же, в правом нижнем углу находится кнопка Continue Trial, которая позволит ознакомиться с пробной версией программы в течение 14 дней. Кликаем по ней, чтобы открыть Principle (рис. 91).

Рисунок 89

Рисунок 91

Рисунок 88

Основной функционал Principle Внешний интерфейс разделен на три зоны: панель инструментов (слева), рабочая зона (посредине) и окно предпросмотра (справа) (рис. 92). Вся анимация и действия задаются с помощью различных триггеров – касания, прокрутки и т. д. (рис. 93). Создание смарт-объектов реализовано через компоненты. В компоненты можно объединить как отдельные элементы, так и анимацию, а также выставить тип и степень мягкости перехода с одного экрана на другой. Рисунок 92

Рисунок 93

Основной функционал Principle Анимация и триггеры прикрепляются следующим образом: 1. Задается начальный вид элемента до взаимодействия (рис. 94). 2. После – триггер, при котором будет происходить анимация (рис. 95). 3. Задается вид элемента после выполнения триггера (рис. 96).

Рисунок 94

Рисунок 95

Рисунок 96

Основной функционал Principle Созданные анимации доступны в окне предпросмотра. Однако, анимации обладают некоторыми особенностями, например, все анимации длятся 0,5 с. При необходимости, длительность и плавность можно поменять (рис. 97). Анимации переходов создаются с помощью компоновки и установки необходимых триггеров на объекты.

Рисунок 97

Основной функционал Principle Прежде чем импортировать артборды в Principle, нужно расставить их в порядке переходов. Для создания эффекта бесшовных переходов стоит убрать лишние элементы интерфейса (рис. 98).

Рисунок 98

UI/UX ДИЗАЙН

УРОК 10. АНИМАЦИЯ В AFTER EFFECTS

Все права на охраняемые авторским правом фото-, аудио- и видеопроизведения, фрагменты которых использованы в материале, принадлежат их законным владельцам. Фрагменты произведений используются в иллюстративных целях в объёме, оправданном поставленной задачей, в рамках учебного процесса и в учебных целях, в соответствии со ст. 1274 ч. 4 ГК РФ и ст. 21 и 23 Закона Украины «Про авторське право і суміжні права». Объём и способ цитируемых произведений соответствует принятым нормам, не наносит ущерба нормальному использованию объектов авторского права и не ущемляет законные интересы автора и правообладателей. Цитируемые фрагменты произведений на момент использования не могут быть заменены альтернативными, не охраняемыми авторским правом аналогами, и как таковые соответствуют критериям добросовестного использования и честного использования. Все права защищены. Полное или частичное копирование материалов запрещено. Согласование использования произведений или их фрагментов производится с авторами и правообладателями. Согласованное использование материалов возможно только при указании источника. Ответственность за несанкционированное копирование и коммерческое использование материалов определяется действующим законодательством Украины.