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

Когда текст перемещается и двигается необычным способом и не на высокой скорости (чтобы пользователь успел прочитать) – это захватывает дух. Посетители заинтригованы, хотят узнать и увидеть, что будет дальше, что им хотят сообщить. Ярким примером использования анимации текста является реклама. Но также используется и в веб-дизайне.

Например, проекты blueberrylabs.com, lrxd.com,impertinents.com/#/ , werkstatt.fr/home , weareroyale.com/#/, craftedlogo.com, vitosalvatore.com и многие другие, которые представлены на скриншотах ниже. На момент публикации материала все ссылки в материале активны.

Таким образом, анимационный текст или анимационная типографика может использоваться для оформления только главной страницы, заголовка (jdand.co),  на Landing Page, навигация (vitosalvatore.com), в отдельных инфоблоках, информипующих о теме конкретного материала (bonnemarque.se/case/freewrite/), в качестве всплывающих надписей (названия видов французского печенья lapierrequitourne.com/nos-biscuits/) и во многих иных вариантах. Если внимательно приглядеться ко всем примерам, то анимация текста не раздражает визуально, но при этом привлекает внимание и делает сайт уникальным даже в сочетании с современными тенденциями минимализма и плоскости.

Использовать же анимационную типографику на самом сайте можно в виде gif-изображений, в виде объекта flash (flv), которые не загрузят сильно сайт и позволят пользователю посещать его даже с мобильных устройств. Самым же простым способом создать анимационную типографику является использование уже всем известного Photoshop и при этом еще и существует несколько разных по сложности и кропотливости способов. Но можно использовать и другой метод.

Создание анимации

Готовые наборы анимации текста позволят добавить эффекты плавания букв, полета, расширения или сужения. Вы даже можете заставить смеяться ваш текст или придать ему какую-либо эмоцию. Увидеть и использовать готовые Preset можно непосредственно при условии, что у вас установлен  Adobe After Effects и Adobe Bridge, где в папочке Preset – Text сможете найти огромное количество вариаций анимации. Тогда создавая новый проект и текстовой слой, вы сможете выбрать готовую анимацию, перетащить её из папки с Preset на текстовой слой и, корректируя анимацию на временной шкале, создать красивую анимацию типографики. Затем останется только экспортировать готовое видео в нужный формат.

Разумеется, что не все веб-дизайнеры мастерски знают и умеют творить в этом приложении, поэтому мы рассмотрим  более доступный способ работы с анимацией – Photoshop. Но для коллекции анимационной типографики, как минимум, иметь на компьютере Adobe After Effects – можно.

Анимация типографики в Photoshop

Шаг 1

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

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

Шаг 2

В Photoshop вам потребуется использовать множество слоев (кадров) для создания анимации. Да, это кропотливо, но позволяет точнее настроить скорость и плавность. Тем более это удобнее для тех, кто не силен в видеоредакторах и работе со временной шкалой.

Шаг 3

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

Шаг 4

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

Шаг 5

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

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

Шаг 6

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

Сохранение в GIF осуществляется через меню «Сохранить для Web». Если выбрать экспортирование видео, то можно создать непосредственно видеофайл в формате mov с кодеком H.264, или в AVI. Но все они будут иметь размер файла гораздо больший, чем gif.

Некоторые советы по созданию качественной анимации типографики

  • Убедитесь, что ваша анимация окончательна по стилю и замыслу и имеет общую продолжительность не более трех минут. Если текст будет печататься слишком долго, посетители просто начнут «гулять» по сайту или вообще закроют его.
  • Используйте музыкальный трек высокого качества, без искажений, но громкий и чистый по звучанию. Хотя анимация печатающегося текста – это визуальный компонент, наличие фонового звука усилит эффект и впечатлит посетителей.
  • Видео также должно экспортироваться при максимальных настройках. Поэтому сама анимация должна быть коротенькой по продолжительности. Слово, фраза, предложение. Если посетители сайта не будут видеть или догадываться сразу, что будет напечатано, ему будет не слишком-то и интересно.
  • Непростительны и орфографические ошибки, пропуски или неправильное расставление запятых, тире и прочих знаков препинания. Несмотря на то, что такой совет может звучать банально, бывают случаи, когда ошибки случаются. После сохранения файла видео отредактировать его будет нельзя, придется заново раскрывать слои и менять их. Это требует времени, много вашего времени, которого зачастую не так и много.

Выводы

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

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

Каким же методом воспользоваться при создании анимации: Photoshop или Аfter Effects – решать уже вам. В завершении предлагаем посмотреть анимацию текста и фотографий на сайте cristof-echard.fr, которую не сложно создать в любом редакторе.