Категории

Легче Macbook Air. Новый ноутбук Xiaomi весит всего 1,07 кг

Масса Macbook Air составляет 1,25 кг Китайская компания Xiaomi опубликовала тизер нового продукта, который будет представлен на следующей неделе, а точнее 26 марта этого года. Источники утверждают, что речь идет о новом ноутбуке линейки Xiaomi Mi Notebook Air, который будет весить всего 1,07 кг. При этом масса Macbook Air составляет 1,25 кг. До этого момента…

Подробнее

Художница Николь Рифкин о создании захватывающего искусства с участием Боуи, Бьорка, Твин Пикс и Русской куклы


Иллюстратор из Бруклина рассказывает нам о своих «меланхоличных рисунках с яркой цветовой палитрой» для групп и культового телевидения — и почему она должна была уйти Tumblr.

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

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

И не думайте, что власть осталась незамеченной графическими дизайнерами.

 Короткая анимация, выделяющая момент для чемпионата мира по футболу 2018 "width =" 1080 "height =" 1080 "/> 
 
<figcaption> Дизайн šaška ™ </figcaption></figure>
<p> В цифровую эпоху анимация может сделать больше, чем просто развлекать детей с помощью мышки, управляющей лодкой. Это эффективный инструмент для визуального общения. Конечно, он предлагает совершенно новую среду для выражения и творчества, но на более практическом уровне движение анимации привлекает больше внимания чем статичные изображения. И, учитывая ограничения на отснятый материал, иногда лучше всего работает анимация прыгающего мяча. </p>
<p> В этой статье мы даем всеобъемлющий обзор анимации. Мы обсуждаем анимацию для дизайнеров и даем некоторые приемы из расцвета мультфильмов — столь необходимое обновление для современной эпохи. Мы также продемонстрируем деловую сторону анимации, объяснив, как она может улучшить как UX вашего сайта, так и эффективность кампаний цифрового маркетинга. Так что без дальнейших церемоний, давайте двигаться! </p>
<div id=

Содержание статьи

Что такое анимация?

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

Но, скорее всего, когда вы спрашиваете «что такое анимация?», Вам нужно нечто большее, чем техническое определение. Откуда это? В чем суть апелляции?

Хотя идея последовательного искусства восходит к тысячелетиям — больше, в зависимости от вашей интерпретации наскальных рисунков — анимация, поскольку мы знаем, что это стало возможным только благодаря изобретению кинопленки. Однако оптика, стоящая за анимацией, была известна с начала 1800-х годов, как мы видим из фенакистопа Симона фон Стампфера (1833) ниже

.

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

 Анимация "Ходячая звезда" "width =" 800 "height =" 800 "/> 
 
<figcaption> Стробоскопический диск профессора Штампфера. Via Wikimedia Commons. </figcaption></figure>
<p> Для первой части 1900-х годов художники со всего мира экспериментировали с анимацией, например, недавно обнаруженный <em> Кацудо Шашин </em>датированный 1907–1911 годами, который, как говорят, предшествовал большей части западной анимации. Однако анимация рассматривалась в основном как новинка до эпоха Уолта Диснея в 1920-х годах, когда звук начинал воплощаться в кино. <em> Steamboat Willie </em> (1928), «флагманский» мультфильм Диснея, был не первым мультфильмом со звуком, но он был одним из самый популярный в то время. </p>
<p> К 1930-м годам другие студии поняли, что есть деньги, которые можно заработать с помощью анимации, которая послужила стимулом для запуска Warner Bros. Looney Tunes и Merrie Melodies. В 1930-х годах произошло дружеское соперничество между Микки и Багсом, известное сейчас как Американский золотой век анимации, которое завершилось мощной игрой Диснея <em> «Белоснежка и семь гномов», </em> — первым полнометражным фильмом, который будет сделан <em> полностью </em> рисованных изображений. </p>
<p> Остальное уже история. С популяризацией цветного телевидения в конце 1950-х годов на сцену вышла еще одна американская пионерка анимации — Ханна-Барбера. После культурной революции 1960-х годов анимация была выбрана для взрослых, наиболее известным из которых был кот «Fritz the Cat» <em> (19459004) (1972), созданный по мотивам легендарного художника комиксов Роберта Крамба. Наконец, в 1990-х годах компьютерные изображения (CGI) могли конкурировать с рисованной анимацией, популяризированной первым полностью CGI-фильмом <em> Toy Story </em> (1995). </p>
<p> Учитывая широкую историю анимации, мы видим, что ее привлекательность также широка. Конечно, детям это нравится, потому что большинство детских историй рассказывают о говорящих животных, чайниках или визуальных образах, которые иначе невозможно воплотить в жизнь. </p>
<figure data-id=  Плакат Toy Story "width =" 1200 "height =" 1800 "/> 
 
<figcaption> Rewatch Toy Story (1995) — первый в мире фильм со 100% компьютерной графикой все еще выглядит лучше, чем некоторые современные графики, сделанные более чем в 20 годы спустя Via Pixar </figcaption></figure>
<p> Но чем сложнее становятся методы анимации, тем и обсуждаются темы, которые они обсуждают. Хотя CGI используется практически в каждом фильме сегодня, даже полностью анимированные функции могут понравиться взрослым — просто посмотрите на популярные анимационные ситкомы, такие как <em> The Simpsons </em><em> Family Guy </em> или <em> South Park </em>. </p>
<p>.</p>
<p> Возможно, самая большая сила не в том, что он обращается к разным группам, а ко всем группам одновременно. Анимация позволяет художникам вызывать это детское удивление и страх не верить нашим глазам, а использовать эту силу для более зрелого рассказывания историй и даже бизнеса, как мы объясним ниже. </p>
<p> Как эта визуальная техника может понравиться как нашему внутреннему ребенку, так и нашему проницательному взрослому? Достаточно взглянуть на практически любой фильм <em> Pixar </em>. Это безопасное место — вы собираетесь сказать мне, что у вас не было туманных глаз в течение первых десяти минут <em> Up </em>? </p>
<h2><span id= Обзор анимации для бизнеса: Looney Tunes для финансовых благ

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

Движущаяся графика (то есть анимация таких элементов, как типографика, значки, изображения на месте и т. Д.) Предназначена для объяснения концепций с использованием движения, таких как анимированные объекты в веб-дизайне. Хотя анимационная графика не так сосредоточена на рассказывании историй, как анимационные, она все же воплощает в себе многие преимущества анимации, но по-другому. Размещение движущейся графики в нужных местах на веб-сайте может фактически улучшить работу вашего сайта, не говоря уже о вторичных восхитительных преимуществах: обучении посетителя тому, как использовать сайт быстро, эффективно и визуально.

 Движущаяся графика для сайта криптовалюты "width =" 940 "height =" 940 "/> 
 
<figcaption> Дизайн Janos Nyujto </figcaption></figure>
<p> Допустим, вы только что добавили блестящий новый функция, но аналитика показывает, что никто не щелкает по ней. Возможно, проблема в том, что они этого не видят — обычные пользователи настолько привыкли к тому, как выглядит экран, новое дополнение может остаться незамеченным. Быстрое исправление: добавьте небольшую анимацию к новая функция, будь то перемещение значка или пульсирующая точка уведомления. </p>
<p> Использование подобной анимации может оказать большое влияние на UX. Вы можете добавить анимированные изображения к наиболее популярным параметрам страницы, чтобы пользователи могли их видеть, если они им нужны. Вы можете обратить больше внимания на призывы к действию, чтобы повысить конверсию. Вы можете использовать анимацию для подтверждения действия (т. Е. Кнопки, которая перемещается при нажатии). Движущаяся графика может даже добавить немного веселья, как и в случае с пасхальными яйцами, которые перемещаются, когда пользователи наводят на них курсор. </p>
<p> Одним из лучших преимуществ движущейся графики является информирование пользователей о причинах и следствиях, особенно с помощью управления жестами на мобильном устройстве. Подумайте о культовом перелистывании Tinder — анимация перетаскивания страницы влево или вправо усиливает иллюзию интерактивности. Такое ощущение, что вы на самом деле что-то двигаете. Представьте себе, если при пролистывании экран просто моргнул и загрузил новый профиль. Приложение не будет таким веселым. </p>
<p> Есть еще много способов использовать анимацию для бизнеса, но рассмотрим ниже некоторые распространенные примеры: </p>
<figure data-id=  Объяснительная видео анимация "width =" 800 "height =" 800 "/> 
 
<figcaption> Дизайн SB.D </figcaption></figure>
<ul>
<li>
<strong> Видео-разъяснители </strong> — одно из самых популярных применений анимации в современном бизнесе, анимированные видеоролики-разъяснители добавляют игривость к скучным, непривлекательным обучающим видео. Компании могут объяснить тонкости своих услуг, не будучи скучным. Единственным недостатком является то, что эта тенденция стала настолько популярной, что предприятия должны выбрать более экспериментальные и уникальные стили анимации, чтобы выделиться. </li>
<li>
<strong> Загрузка страниц </strong> — Никто не любит смотреть на пустой экран. Анимации при загрузке страницы не только снижают время загрузки и риск отскока пользователя, но и дают возможность показать индивидуальность вашего бренда или рассмешить пользователя. Иногда люди запоминают анимацию загрузки больше, чем сам сайт! </li>
<li>
<strong> Переходы </strong>. Любой, кто использовал старый компьютер, знает, как это ужасно, когда новые окна открываются без какой-либо церемонии. Анимированные переходы — смахивание, вытирание, постепенное исчезновение градиента, усадка и т. Д. — влияют на биологию человеческого глаза и делают визуальные изменения как можно более плавными, добавляя общее погружение сайта или приложения. Даже небольшие визуальные изменения, такие как выпадающие меню, выигрывают от небольшой анимации. </li>
</ul>
<figure data-id=  Графика движения для веб-сайта ручного инструмента "width =" 1000 "height =" 625 "/> 
 
<figcaption> Дизайн Яноша Ньюджто </figcaption></figure>
<ul>
<li>
<strong> Микровзаимодействия </strong> —Движущаяся графика имеет множество преимуществ UX. Если у вас возникли проблемы с дизайном интерфейса, добавление анимированных микровзаимодействий может заполнить трещины в вашем UX. Например, добавление анимированного эффекта к призыву к действию может улучшить конверсию. </li>
<li>
<strong> Видео из социальных сетей </strong> — Сердце анимации — развлекать и рассказывать историю, поэтому иногда вам следует делать анимированные видео только ради них самих. Создание анимированного видео для социальных сетей может помочь мелким брендам заметиться и помочь крупным брендам выделиться в каналах своих подписчиков. </li>
</ul>
<figure data-id=  HTML5-анимация с движущейся графикой "width =" 960 "height =" 960 "/> 
 
<figcaption> Дизайн: Мария Дзиадзюлия </figcaption></figure>
<ul>
<li>
<strong> Реклама </strong> — Рекламные объявления также извлекают выгоду из привлекающей внимание анимации. Особенно рекламные баннеры, которым нужно как можно больше магнетизма, чтобы противостоять баннерной слепоте. С правильным стилем анимации вы обязательно преобразуетесь — просто спросите у Launchpeer, который доказал это своей анимированной рекламой в Instagram. </li>
<li>
<strong> Анимированные логотипы </strong>. В то время как ортодоксальная реклама диктует «никогда не меняйте свой логотип», современные эксперты по брендингу говорят, что анимация является исключением из правил. Адаптивные и анимированные логотипы — логотипы, которые меняются в зависимости от того, как и где они используются, — оказались более эффективными, чем статичные. </li>
</ul>
<p> Но пока мы только что говорили о теории использования анимации. Давайте рассмотрим конкретные типы анимации и то, как вы можете их использовать. </p>
<h2><span id= Типы анимации

Начнем с объяснения, что «анимация» — это действительно общий термин для обозначения множества различных методов добавления движения к изображениям (или неодушевленным объектам). Хотя есть и другие, вот четыре из них, которые дизайнеры находят наиболее полезными:

 Традиционная рисованная анимация "width =" 328 "height =" 255 "/> 
 
<figcaption> Анимационный тест. Disney, via webneel. </figcaption></figure>
<p> <strong> 1. Традиционная анимация </strong> — каждый кадр создается индивидуально, а затем запускается последовательно для иллюзии движения. Это исторический корень анимации, но его стоимость и временные обязательства являются причинами, по которым аниматоры разработали более современные методы. </p>
<p> <strong> 2. Двухмерная векторная анимация </strong>. Более современное программное обеспечение поддерживает традиционную анимацию. Принцип тот же, но Flash и другие инструменты векторной анимации генерируют множество отдельных кадров на основе входных данных аниматоров. </p>
<p> <strong> 3. 3D анимация (CGI) </strong> — совершенно новый подход к анимации, когда компьютеры генерируют все изображения, а аниматоры вводят движение и углы. Говорят, что анимация CGI ближе к марионеткам и традиционной анимации — аниматоры больше внимания уделяют управлению движениями и оставляют визуальные эффекты на усмотрение компьютера. </p>
<p> <strong> 4. Остановить движение </strong> — отдельные кадры захватываются путем манипулирования и фотографирования реальных объектов; наиболее известный как глина, но его можно использовать не только с глиной, как вы можете видеть ниже. Несмотря на то, что такие же дорогостоящие и трудоемкие, как и традиционные анимации, конечные результаты часто имеют уникальный и бесценный вид. </p>
<figure data-id=  Love Goodly gif для социальных сетей "width =" 600 "height =" 600 "/> 
 
<figcaption> Design by agnes design </figcaption></figure>
<p> Стиль, который вы выбираете, зависит от ваших целей, индивидуальность бренда и бюджет. Создание видеороликов, рассказывающих о стоп-движении, может помочь вам выделиться из моря общих, но создание интерфейса остановки-движения для вашего веб-сайта … возможно, не так уж много. </p>
<p> К настоящему времени у вас должно быть представление о том, как анимация может принести пользу вашему бизнесу, и, возможно, даже несколько планов по ее использованию. Но анимации недостаточно — это должна быть хорошая анимация. И за советы о том, как сделать качественную анимацию, кого лучше спросить, чем аниматоров Диснея во время золотого века кинокомпании. </p>
<h2><span id= Анимация для дизайнеров: оцифровка 12 заповедей Диснея

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

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

1. Сквош и растяжка

Как объект реагирует, когда он касается другого объекта, — как он сжимается и растягивается, — сообщает о своей жесткости и рисует лучшую картину в сознании зрителя. Подумайте о том, как резиновый шарик давит при ударе о землю, а не как шар для боулинга не .

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

 Анимированный GIF-файл облачной технологии для Microsoft "width =" 1000 "height =" 1000 "/> 
 
<figcaption> Имитируйте движение, заставляя фигуры сжиматься и растягиваться, как этот подпрыгивающий эффект, разработанный Мэрией Дзиадзюлией </figcaption></figure>
<p> Этот принцип остается в силе и при работе с абстрактными объектами в цифровом пространстве, например, с прыгающими иконками. Вы можете выбрать любую точку на спектре между мультяшной и реалистичной, если вы учитываете эту реальную закон жизни природы. </p>
<h3><span id= 2. Предчувствие

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

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

3. Балетмейстер

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

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

4. Прямой вперед против позы, чтобы позировать

Этот принцип относится к методу, используемому для анимации — начиная с начальной позы и создания последовательной, вместо создания ключевых поз во всей последовательности, а затем «заполняя» кадры между ними.

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

 Анимация: Mbappé "The Gazelle" Running "width =" 1080 "height =" 1080 "/> 
 
<figcaption> Дизайн Kid Mindfreak </figcaption></figure>
<h3><span id= 5. Выполнить сквозное и перекрывающее действие

Они относятся к двум различным, но связанным принципам для захвата реализма. «Выполнение» имеет дело с инерцией и концепцией, согласно которой, когда тело в движении прекращает движение, некоторые части продолжают следовать. Если бегущая женщина в платье внезапно останавливается, части платья будут продолжать двигаться вперед благодаря импульсу.

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

Обе эти концепции следует учитывать и для абстрактных объектов. Это маленькие росчерки, как это, что можно добавить, что «кое-что лишнее,» и не в состоянии объяснить это делает вашу анимацию неестественными и роботизированная.

6. Медленно и медленно

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

7. Arc

В попытке создать более естественное движение, анимируйте движение по траектории дуги. В любом случае, большинство объектов в реальном мире имеют тенденцию двигаться по дугам — рассмотрим Витрувианского Человека да Винчи. Создание движения вдоль траекторий дуги может показаться очевидным, но если вы забудете, ваша анимация будет казаться слегка «выключенной».

Хорошая новость заключается в том, что некоторые программы для анимации позволяют вам самим устанавливать линии движения, поэтому с помощью правильного инструмента этот принцип легко применить.

8. Вторичное действие

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

 gif-анимация футболиста / футболиста "width =" 1080 "height =" 1080 "/> 
 
<figcaption> Design by maneka </figcaption></figure>
<p> Этот принцип похож на« Follow Through "Выше, но вторичное действие не обязательно связано с основным действием. Вы можете увидеть и то, и другое в примере выше: вторичное действие — мигание субъекта, последующее — то, как его туловище слегка отскакивает, когда его ноги упал на землю. </p>
<h3><span id= 9. Сроки

Как мы уже говорили выше, добавление кадров к анимации замедляет ее, а удаление — ускоряет. Аниматоры должны особенно осознавать это как способ сообщать такие вещи, как вес, ловкость или даже личность в случае выражения лица.

Другими словами, не оставляйте скорость анимации на волю случая. Подумайте о времени или реальных объектах и ​​соответственно увеличьте темп анимации.

 Загрузка анимации для приложения The Game Zone "width =" 750 "height =" 1334 "/> 
 
<figcaption> Design by ogld </figcaption></figure>
<h3><span id= 10. Преувеличение

Даже самые реалистичные анимации все еще остаются фантазиями … и именно поэтому мы их любим. Анимация позволяет художникам преувеличивать реальную жизнь ради эффекта — просто посмотрите на любой мультфильм Тома и Джерри. Не стесняйтесь использовать преувеличение, чтобы получить желаемое количество глупостей. Например, посмотрите на колеса на этом анимированном экране загрузки, не говоря уже об отдельных вагонах в колесе обозрения. Не преувеличивая, вы могли бы также снимать живое видео.

11. Сплошной рисунок

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

В частности, Иллюзия жизни предостерегает от создания персонажей, левая и правая стороны которых идентичны. Такие упущения могут рассеять погружение.

12. Привлекательность

 Логотип и анимированное вступление для певицы, автора песен и исполнителя Catherine Forte "width =" 540 "height =" 540 "/> 
 
<figcaption> Дизайн bubupanda </figcaption></figure>
<p> Более художественный Если вы беспокоитесь, а не технические, вы хотите, чтобы субъекты вашей анимации были привлекательны, чтобы их стоило наблюдать. Это может быть что-то базовое, например, яркий цвет, или что-то более креативное, например, широкие глаза аниме. Дело в том, что никто не хочет смотреть анимацию о чем-то мягком. </p>
<p> В приведенном здесь примере представлен очаровательный и уникальный стиль, который сочетает в себе реализм с мультфильмами, придавая ему привлекательность «я раньше такого не видел». Это также полезно для бизнеса, учитывая, что это логотип для реального человека. </p>
<h2><span id= Реализуйте свои проекты с помощью анимации
 99designs анимация в социальных сетях "width =" 600 "height =" 600 "/> 
 
<figcaption> Дизайн Maryia Dziadziulia </figcaption></figure>
<p> Независимо от того, что анимация является вовлеченным процессом. Рисование одна хорошо сделанная картина достаточно сложна, не говоря уже о тысячах, поэтому анимация — это дисциплина на протяжении всей жизни, а не работа художников на выходных. </p>
<p> Но это дисциплина, которая стоит усилий. Мало того, что анимация имеет явные преимущества для бизнеса и дизайна, это поистине волшебная форма искусства, которая может перенести любой мирский проект на высоту воображения. Попробуйте анимацию, и вы удивитесь, как вам когда-либо удавалось сидеть неподвижно в мире статического дизайна. </p>
<div class=

Хотите привести свой бренд в движение?
Найдите дизайнера для создания анимации сегодня!