Полная галерея International Design Awards 2019 находится прямо здесь. А чтобы представить свою работу на наших открытых конкурсах, отправляйтесь прямо сюда!
Мы привыкли видеть сложные, блестящие новые устройства, представленные на презентациях Apple. Но на сегодняшнем мероприятии на карточках было что-то другое. В прямом смысле. Apple Card: новый сервис, встроенный в приложение Apple Wallet на iPhone, который призван помочь людям лучше управлять своими финансами. Но не только то, что может сделать карта (и мы должны отметить здесь,…
ПодробнееМасса Macbook Air составляет 1,25 кг Китайская компания Xiaomi опубликовала тизер нового продукта, который будет представлен на следующей неделе, а точнее 26 марта этого года. Источники утверждают, что речь идет о новом ноутбуке линейки Xiaomi Mi Notebook Air, который будет весить всего 1,07 кг. При этом масса Macbook Air составляет 1,25 кг. До этого момента…
Подробнее
Иллюстратор из Бруклина рассказывает нам о своих «меланхоличных рисунках с яркой цветовой палитрой» для групп и культового телевидения — и почему она должна была уйти Tumblr.
В жизни каждого был момент, когда анимация была просто самой крутой вещью, которую вы когда-либо видели. Был ли это фильм Диснея в детстве или, может быть, кат-сцена 3D-игры, которая поразила вас, всегда было что-то впечатляющее, когда воображаемые персонажи двигаются и действуют как в реальной жизни.
И не думайте, что власть осталась незамеченной графическими дизайнерами.
Содержание статьи
Анимация — это захват последовательных статических изображений — рисунков или фотографий неодушевленных объектов — и их воспроизведение в быстрой последовательности, имитирующей движение в реальном мире. Если вы когда-нибудь видели флипбук, вы знаете, как он работает.
Но, скорее всего, когда вы спрашиваете «что такое анимация?», Вам нужно нечто большее, чем техническое определение. Откуда это? В чем суть апелляции?
Хотя идея последовательного искусства восходит к тысячелетиям — больше, в зависимости от вашей интерпретации наскальных рисунков — анимация, поскольку мы знаем, что это стало возможным только благодаря изобретению кинопленки. Однако оптика, стоящая за анимацией, была известна с начала 1800-х годов, как мы видим из фенакистопа Симона фон Стампфера (1833) ниже
.
Одна из первых анимаций на фильме была фактически написана вручную французским художником и изобретателем Шарлем-Эмилем Рейно на его праксиноскопе — одном из первых этапных изобретений, которые привели к пленочной камере.
Обзор анимации для бизнеса: Looney Tunes для финансовых благ Помимо кино и телевидения, анимация становится любимой техникой бизнеса в цифровом пространстве. В частности, анимация улучшает дизайн веб-приложений и цифровых маркетинговых кампаний благодаря своим практическим преимуществам так же, как и развлекательный фактор.
Движущаяся графика (то есть анимация таких элементов, как типографика, значки, изображения на месте и т. Д.) Предназначена для объяснения концепций с использованием движения, таких как анимированные объекты в веб-дизайне. Хотя анимационная графика не так сосредоточена на рассказывании историй, как анимационные, она все же воплощает в себе многие преимущества анимации, но по-другому. Размещение движущейся графики в нужных местах на веб-сайте может фактически улучшить работу вашего сайта, не говоря уже о вторичных восхитительных преимуществах: обучении посетителя тому, как использовать сайт быстро, эффективно и визуально.
Типы анимации Начнем с объяснения, что «анимация» — это действительно общий термин для обозначения множества различных методов добавления движения к изображениям (или неодушевленным объектам). Хотя есть и другие, вот четыре из них, которые дизайнеры находят наиболее полезными:
Анимация для дизайнеров: оцифровка 12 заповедей Диснея В 1981 году два ведущих аниматора Диснея Фрэнк Томас и Олли Джонсон написали то, что многие считают библией анимации, Иллюзия жизни . В этой книге собраны знания аниматоров Диснея с 1930-х годов, и они призваны дать аниматорам прочную основу для их творчества, затрагивая такие области, как копирование физической реальности, эмоционального выражения и дизайна персонажей.
В основе книги лежат «12 основных принципов анимации». Хотя этот список лучших практик был предназначен для традиционной анимации, большинство из них остаются такими же сильными в цифровую эпоху… с несколькими обновлениями тут и там .
Как объект реагирует, когда он касается другого объекта, — как он сжимается и растягивается, — сообщает о своей жесткости и рисует лучшую картину в сознании зрителя. Подумайте о том, как резиновый шарик давит при ударе о землю, а не как шар для боулинга не .
Этот эффект может быть преувеличен для комического эффекта или реально поддержан для более реалистичных анимаций. Одно золотое правило для обоих стилей заключается в том, что общий объем объекта никогда не меняется, он просто перераспределяется.
2. Предчувствие
В реальной жизни люди и вещи не просто движутся внезапно и без предупреждения. Прежде чем кто-то наносит удар, они заводят руку; прежде чем прыгнуть, они согнуть свои колени. Если ваша анимация происходит без ожидаемого действия, она может показаться слишком внезапной и резкой — другими словами, фальшивкой.
Для веб-дизайна это означает дополнительный акцент на состояние перед анимацией. Например, если вы хотите анимировать нажатие кнопки, вам нужно спроектировать саму кнопку так, чтобы она была поднятой или «нажимной».
Этот принцип заимствован из театра: постановка — это то, где актеры размещаются на сцене для максимального эффекта. С точки зрения аудитории, действия в передней части сцены кажутся более значительными, чем в задней части.
Анимация, однако, более кинематографична, чем театр, поэтому этот принцип может также учитывать освещение и углы обзора. Для онлайн-анимации рассмотрите возможность добавления теней или смещения угла для достижения наилучшего вида.
Этот принцип относится к методу, используемому для анимации — начиная с начальной позы и создания последовательной, вместо создания ключевых поз во всей последовательности, а затем «заполняя» кадры между ними.
В большинстве компьютерных анимаций используется подход позы к позе, поскольку компьютер генерирует «промежуточные элементы». Однако, если вы страдаете от блока дизайнера, прямой метод может помочь вам найти идеи.
5. Выполнить сквозное и перекрывающее действие
Они относятся к двум различным, но связанным принципам для захвата реализма. «Выполнение» имеет дело с инерцией и концепцией, согласно которой, когда тело в движении прекращает движение, некоторые части продолжают следовать. Если бегущая женщина в платье внезапно останавливается, части платья будут продолжать двигаться вперед благодаря импульсу.
«Перекрывающееся действие» относится к тому, как разные части объекта движутся с разной скоростью — когда мы идем, наша левая сторона и правая сторона выполняют свои собственные функции и редко бывают идеально синхронизированы.
Обе эти концепции следует учитывать и для абстрактных объектов. Это маленькие росчерки, как это, что можно добавить, что «кое-что лишнее,» и не в состоянии объяснить это делает вашу анимацию неестественными и роботизированная.
Это относится к техническому аспекту анимации. Для начала вы можете замедлить действие в анимации, добавив больше кадров, и наоборот. Поэтому, когда объект ускоряется и замедляется, вы хотите добавить больше кадров, а в середине действия вы хотите использовать меньше кадров. Это заставляет действие увеличиваться и уменьшаться.
В попытке создать более естественное движение, анимируйте движение по траектории дуги. В любом случае, большинство объектов в реальном мире имеют тенденцию двигаться по дугам — рассмотрим Витрувианского Человека да Винчи. Создание движения вдоль траекторий дуги может показаться очевидным, но если вы забудете, ваша анимация будет казаться слегка «выключенной».
Хорошая новость заключается в том, что некоторые программы для анимации позволяют вам самим устанавливать линии движения, поэтому с помощью правильного инструмента этот принцип легко применить.
Этот принцип немного сложнее, чем другие, потому что он предполагает установление баланса. Идея состоит в том, что когда часть объекта движется, обычно движутся и другие части. Когда вы идете по улице, вы не смотрите прямо в глаза; Вы смотрите вокруг, киваете, моргаете и т. д. Эти второстепенные действия могут сделать вашу анимацию более реалистичной, но при этом оставляют их тонкими, чтобы они не отвлекали от основного действия.
9. Сроки
Как мы уже говорили выше, добавление кадров к анимации замедляет ее, а удаление — ускоряет. Аниматоры должны особенно осознавать это как способ сообщать такие вещи, как вес, ловкость или даже личность в случае выражения лица.
Другими словами, не оставляйте скорость анимации на волю случая. Подумайте о времени или реальных объектах и соответственно увеличьте темп анимации.
10. Преувеличение
Даже самые реалистичные анимации все еще остаются фантазиями … и именно поэтому мы их любим. Анимация позволяет художникам преувеличивать реальную жизнь ради эффекта — просто посмотрите на любой мультфильм Тома и Джерри. Не стесняйтесь использовать преувеличение, чтобы получить желаемое количество глупостей. Например, посмотрите на колеса на этом анимированном экране загрузки, не говоря уже об отдельных вагонах в колесе обозрения. Не преувеличивая, вы могли бы также снимать живое видео.
Рисуя свое имя из сплошной геометрии, сплошной рисунок означает учет трехмерного пространства. Особенно когда речь идет о двухмерных вариантах анимации, может быть легко забыть обо всех трех измерениях (а некоторые мультфильмы игнорируют их напрямую, поэтому редкость видеть персонажей Симпсонов прямо на экране так нервирует).
В частности, Иллюзия жизни предостерегает от создания персонажей, левая и правая стороны которых идентичны. Такие упущения могут рассеять погружение.
Реализуйте свои проекты с помощью анимации 
Мы знаем, что редизайн Steam находится в разработке … ну, давно. Вы можете сказать, что это Valve количество времени. Некоторые аспекты этого редизайна уже реализованы, и новые элементы интерфейса появились в витрине Steam несколько недель назад. Но сегодня, на панели обновлений Steam Business от Valve на ежегодной конференции разработчиков игр, мы получили исчерпывающий взгляд на…
Подробнее
