Создание анимации и визуальных эффектов (История развития анимации)

Содержание:

1. Введение

Компьютерная графика появилась в 1960-ых годах, уже тогда существовали полноценные графические системы. Понятие компьютерная графика включает все виды работ со статическими изображениями, компьютерная анимация имеет дело с динамически изменяющимися изображениями.

Рассмотрим, что такое анимация? Анимация означает одушевление или оживление. Это последовательный показ графических документов для имитации движения рисованных объектов. Простейшая анимация в интернете представлена в виде различных GIF файлов и рекламных баннеров, а более сложная — в кинематографе, компьютерных играх и т.д.

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

2. История развития анимации

Принято считать, что анимация зародилась в конце XVII века, когда Атанасиусом Киршером (Athanasius Kircher) была изобретена "волшебная лампа" (1671).

Принцип её работы был таковым: свет от лампы или другого источника отражался на стекло с масляными рисунками, с которого изображение проецировалось на маленький экранчик, в который зритель глядел, как в замочную скважину. Правда, нечто похожее существовало намного раньше: ещё в XV веке появлялись первые упоминания о китайском театре теней, на который, кстати, нередко ссылался изобретатель. Ещё раньше, а точнее, в начале XII века, буддистский монах Тоба (позднее возведённый в ранг святых) создал цикл графических историй, получивших название Тоба-э (Гравюры Тобы) . Эти свитки описывали животных, совершавших человеческие глупости, и являлись по сути первой мангой с покадровым описанием событий и текстовыми комментариями. Поскольку в буддизме не принято излагать мысли прямо в виде текста, то подобный способ идеально подошел для буддистских притч и вскоре обрёл немалую популярность, что послужило толчком для других событий.

В 1760 году в городе Эдо (ныне Токио) родился Кацусика Хокусай - один из величайших японских художников укиё-э (японской гравюры) . Совместно с художником Бокусэном он выпустил цикл иллюстрированных альбомов "Хокусай Манга" (Рисунки Хокусая, прим. 1814-1833 г. ) впоследствии ставших основой стиля первых японских анимационных лент .

В1824 году начала пользоваться большой популярностью интересная игрушка, изобретённая не то Джоном Аритом (John Aryton), не то Чарльзом Баббиждем (Charles Babbage), точно уже, наверное, никто не узнает. Принцип её работы был очень прост, но именно он впоследствии сыграл значительную роль в развитии не только анимации, но и кинематографа в целом: на цилиндр крепилась полоска с нанесёнными на неё двумя частями изображения, и когда цилиндр быстро крутился, то изображения сливались, создавая картинку. Именно этот принцип лег в основу кино.

С 30-х годов XIX столетия просто посыпались всевозможные "скопы" (Фенакистоскоп, Кинематоскоп) основанные на этом принципе, однако настоящей революцией стало изобретение Эмиля Рейно - праксиноскоп.

Сам прибор в соответствии с названием был создан для того, чтобы показывать на экране движущиеся картинки. Правда, показывать движущиеся картинки именно на экране Рейно додумался только года через два после этого. Сначала смотреть движущиеся картинки можно было только в небольшом смотровом окошке. В заслугу Рейно следует поставить то, что он соединил существовавшие до него зоотроп и фенакистископ, заодно усовершенствовав их добавлением в схему зеркальной призмы. Эти менее совершенные аппараты должны были показывать те же движущиеся картинки, но не могли продемонстрировать что-либо другое, кроме циклической демонстрации примитивных действий.

Позднее анимацию использовали в интернете для развлечения. Например, создавали забавных движущихся персонажей или какие-то истории.

В настоящее время анимация помогает улучшить юзабилити сайта или приложения.

3. Применение анимации

Анимация должна быть плавной, не механичной и дерганной. Она должна служить определенной цели, и не мешать контенту.

Основная причина использования анимации – улучшение юзабилити. Простая анимация может объяснять пользователю какую кнопку нужно нажать, или куда идти дальше.

Анимация может быть и отличной «декорацией». Подобного рода декоративная анимация может рассказывать историю, или создавать эмоциональную связь между интерфейсом и пользователем. Целью анимации может быть возбуждение визуального интереса, и сохранение вовлеченности на более продолжительное время.

Во время создания визуальной анимации важно продумать, какую задачу она должна выполнять. Должна ли она быть забавной или удивительной? Может это уникальный контент, которым пользователь захочет поделиться? Даже визуальный эффект должен иметь назначение.

Также анимацию можно использовать в презентации. Эффекты анимации оживляют слайд, создавая визуальные образы некоторого движения или внешнего изменения объектов слайда, проявляющегося в начале, в процессе или по окончанию демонстрации слайда. Использование анимационных эффектов делает презентацию зрелищнее и интереснее.

Например, дизайнеры используют анимацию, чтобы показать актуальные работы и продемонстрировать своё портфолио. Ведь движущиеся элементы привлекают и удерживают внимание пользователей. А интерес и внимание - критерий хорошей презентации.

Можно заказать анимационный ролик для своей компании, создать памятное видео из фотографий, мультфильм в подарок своим знакомым или родственникам и многое другое.

4. Создание анимации для веб-дизайна

Анимация появляется повсюду - от полноэкранных движущихся изображений до эффектов наведения указателя. Анимация – это модно, забавно и интересно. От простейших движений или gif, до продолжительных анимационных роликов, анимация превратилась в практический и полезный инструмент веб-дизайна.

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

Чтобы анимировать статический баннер можно воспользоваться ещё одним бесплатным онлайн-сервисом. Нужно загрузить подготовленные файлы, выполнить настройки будущей анимации, создать анимацию, а затем скачать. Таким образом, используя два совершенно бесплатных сервиса, можно сделать простую анимацию без использования дополнительного программного обеспечения.

Но иногда требуется создать более сложные баннеры, которые требуют покадрового прорисовывания. В таком случае лучше воспользоваться графическим редактором Adobe Photoshop.

Анимация в фотошопе — это множество картинок, следующих друг за другом в определённой последовательности. Здесь и работа со слоями, и установка скорости, с которой кадры будут меняться. Таким образом можно создать простейшую анимацию в редакторе Adobe Photoshop. По такому покадровому принципу можно создать и интересный и продающий рекламный баннер, и аватарку для любимого форума.

Если речь идёт о более сложной анимации, например, в мультипликации. Работу над созданием анимации для мультфильма лучше разделить на несколько основных этапов. Разработать общую концепцию, идею мультфильма, продумать персонажей, учитывая целевую аудиторию и предпочтения по стилистике. Нужна ясность в процессе работы создания анимации.

5. Визуальные эффекты. Дизайн сайтов

Зрительные образы помогают значительно лучше запоминать информацию. Использование различных графических изображений для иллюстрирования содержания сайта помогает посетителю лучше запоминать материал, изложенный на страницах сайта, и сам сайт в целом. Кроме изображений на сайтах также часто используются разные визуальные эффекты:

⦁ бегущие строки;

⦁ анимированные кнопки;

⦁ выпадающие меню;

⦁ эффект при смене страниц;

⦁ мерцающий фон и т.д.

Примеры подобных эффектов

Бегущая строка вызывает ощущение срочности информации, ее новизны. Эффект бегущей строки может применяться в том случае, когда свободного места хватает ровно на строку текста, а необходимый объем информации намного превышает размер этой текстовой строки. Но, поскольку движение текста в бегущей строке часто отвлекает или раздражает посетителей сайта, то без обоснованных причин включать бегущую строку в дизайн сайта не следует.

Анимированные кнопки. Различным образом анимированные кнопки меню на сайте последнее время очень популярны. При наведении на них курсора мыши или при нажатии они меняют цвет, двигаются в стороны, вверх-вниз. Однако, функциональной пользы от использования анимированных кнопок в дизайне сайта – минимум, а хлопот – максимум. Ведь если у посетителя сайта в настройках браузера будет отключено воспроизведение графики или выполнение скриптов, то вместо красивой кнопки он увидит пустой квадратик.

Выпадающее меню. Применение эффекта выпадающего меню довольно часто обусловлено ограниченным свободным пространством на большом сайте. В таком случае большое количество пунктов меню компактно упаковано. Однако использование выпадающих меню в дизайне сайта имеет ряд недостатков: сложность технической реализации, сложность обновления при изменении структуры сайта, увеличение времени загрузки сайта и т.д. Целесообразно применять выпадающие меню в сайтах, в которых редко происходит добавление или изменение названий страниц.

Эффекты при смене страниц. Различные эффекты смены при переходе по страницам сайта применяются часто, например, при входе/выходе на сайт или на страницу сайта. Вариантов смены страниц много. Среди них: растворение одной страницы в другой, появление жалюзи, шашек, панорама и многие другие. Эффекты при смене страниц достаточно просты в реализации, но не дают никакой экономической выгоды. Применять их или нет, зависит от возможностей дизайнера и желания заказчика.

Мерцающий фон. Мерцание звезд на фоне сайта смотрится уместно разве что на сайте, посвященном возможностям анимации в веб-дизайне. Во всех остальных случаях мерцание очень отрицательно сказывается на успешности сайта. Мерцание дает большую нагрузку на глаза посетителя, мешает нормальному восприятию информации, быстро утомляет, вызывает раздражение. Поэтому, если использование мерцающего фона не оправдано экономической или иной выгодой, то от него лучше отказаться.

6. Какие программы использовать

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

Программы можно условно разделить на два направления: для анимирования прототипов и создания полноценных анимаций. Рассмотрим одни из самых популярных программ.

6.1. Анимирование прототипов

С помощью таких программ можно создавать бесшовные переходы между экранами и страницами сайта. При правильной настройке можно имитировать поведение элементов интерфейса и собрать несложную анимацию.

Программы работают на основе макетов, импортированных из популярных графических редакторов. И создают анимацию, если задать начальное и конечное состояние экрана и триггер — событие, при котором запускается переход.

Вид анимации, плавность, скорость и остальные параметры можно настроить.

1. Principle

Один из популярных инструментов для создания интерактивных прототипов и анимации интерфейса. Подходит для детальной настройки сложных переходов между экранами и разными состояниями. Работает только на macOS.

Сфера применения: создание коротких сценариев в два–четыре экрана.

2. Marvel

Онлайн-сервис для создания прототипов. Работает из браузера или как дополнение к популярным графическим редакторам. Позволяет не только создать и настроить переходы, но и изменить макеты при необходимости или посмотреть прототип на смартфоне.

Сфера применения: удобное создание прототипов прямо из браузера.

3. InVision Studio

Универсальный дизайн-редактор. Помогает легко работать с прототипом и редактировать анимацию, поддерживает все сервисы InVision. Находится в раннем доступе, поэтому пока распространяется бесплатно.

Сфера применения: создание дизайна и прототипов.

4. Atomic.io

Работает из браузера и позволяет создавать неограниченное количество прототипов и проектов в бесплатной версии. Сервис похож на смесь Marvel и Principle. Подходит для совместной работы, можно делиться работами и комментировать экраны.

Сфера применения: создание быстрой анимации в браузере.

6.2. Создание полноценных анимаций

Этими инструментами дизайнеры пользуются для создания презентаций, микровзаимодействий и движущихся баннеров. Чтобы решить, в какой программе делать анимацию, необходимо сформулировать цель: какую анимацию и для чего ее необходимо создавать.

Универсальные программы для анимирования — это продукты компании Adobe. Простую анимацию можно сделать и в Photoshop, для сложного подойдет Animate или After Effects.

Последние две программы появились как логическое продолжение Photoshop и даже сейчас работают в связке с ним. В последних версиях After Effects нет возможности сохранить проект в GIF напрямую, поэтому это нужно делать через Photoshop.

5. Adobe Photoshop

Универсальный редактор для обработки графики. С помощью инструмента Timeline («Шкала времени») можно создавать покадровую анимацию работ. Photoshop — самый простой инструмент от Adobe, в котором можно создавать движение. Интерфейс более сложных программ построен на основе внешнего вида Photoshop. Поэтому знакомство с созданием анимации лучше начать с него.

Сфера применения: работа и анимация сайтов, фотографий, иллюстраций и другой графики.

6. Adobe Animate

Это одна из тех программ, которые используют для анимации изображений. Есть удобная шкала времени с раскадровкой. В Animate удобно работать с макетами из Photoshop. Идеально подходит для создания интерактивных презентаций и баннеров. Позволяет экспортировать анимацию в формате HTML и CSS.

Сфера применения: анимация презентаций, баннеров, рекламы.

7. Adobe After Effects

Продвинутый редактор для создания анимированной графики. Его также используют для обработки видеоклипов, оформления рекламных роликов и заставок.

After Effects требует значительных ресурсов и довольно сложен для изучения. Поэтому знакомство с ним лучше начать уже после изучения Photoshop и Animate.

Сфера применения: создание спецэффектов, заставок, титров, анимаций.

Программ для создания анимации много, каждая из них подходит для своей цели.

7. Заключение

С середины 1980-х годов компьютерная анимация используется для создания спецэффектов в кинематографе. Сейчас компьютерная анимация повсюду: мультимедийных приложениях, например, энциклопедиях, в компьютерных играх, для «оживления» отдельных элементов оформления, например, веб-страниц и рекламы (анимированные баннеры). На веб-страницах анимация может формироваться средствами стилей (CSS) и скриптов (JavaScript) или модулями, созданными с помощью технологии Flash или её аналогов (флеш-анимация).

Главным преимуществом компьютерной 3D-анимации перед классической рисованной является полное отсутствие искажений пропорций объекта (Например, черт лица) при движении, неизбежных при ручной прорисовке.

8. Список используемой литературы и интернет-ресурсов

Основы компьютерной анимации / О. А. Надеждин

http://webstudio2u.net/design-site/259-visual-effects.html/

https://vc.ru/flood/6702-ui-animation

https://topref.ru/referat/55936.html

http://uxgu.ru/introduction-to-animation/