Способи створення та використання анімації типографіки
Анімований текст здатний захопити увагу глядача швидше та ефективніше, ніж звичайний інфоблок. Але як це створюється без навантаження на сайт? Де використовується? Як зробити якісну анімацію та на що звернути увагу?
Анімаційна типографіка або інакше анімація тексту - один з хороших варіантів представлення текстової інформації, тим більше що і виглядає це дуже красиво. При цьому анімалізація тексту часто використовується в дизайні сайтів як оформлення елемента (назви, меню) або цілий блок даних, що дозволяє привернути увагу відвідувача до деяких важливих даних. В цілому ж, анімація друкарні дозволяє надати сайту деяку особливість, прибирає тужливість та одноманітність.
Таким чином, анімаційний текст або анімаційна друкарня може використовуватися для оформлення тільки головної сторінки, заголовка (jdand.co), на Landing Page, навігація (vitosalvatore.com), в окремих інфоблоках, що інформують про тему конкретного матеріалу (bonnemarque.se/case/ freewrite/), як спливаючі написи (назви видів французького печива lapierrequitourne.com/nos-biscuits/) і в багатьох інших варіантах. Якщо уважно придивитися до всіх прикладів, то анімація тексту не дратує візуально, але при цьому привертає увагу і робить сайт унікальним навіть у поєднанні із сучасними тенденціями мінімалізму та площини.
Використовувати ж анімаційну друкарню на самому сайті можна у вигляді gif-зображень, у вигляді об'єкта flash (flv), які не завантажать сайт і дозволять користувачеві відвідувати його навіть з мобільних пристроїв. Найпростішим способом створити анімаційну друкарню є використання вже всім відомого Photoshop і при цьому ще й існує кілька різних за складністю та копіткістю способів. Але можнавикористовувати та інший метод.
Створення анімації
Очевидно, що не всі веб-дизайнери майстерно знають і вміють створювати в цьому додатку, тому ми розглянемо більш доступний метод роботи з анімацією - Photoshop. Але для колекції анімаційної друкарні, як мінімум, мати на комп'ютері Adobe After Effects можна.
Анімація типографіки у Photoshop
Спочатку потрібно вибрати стиль тексту, який має відповідати загальному стилю вашого сайту. Якщо ви створюєте контент про татуювання, то колір, малюнки та стиль шрифту повинні відповідати цьому стилю. Сам Photoshop має багато шрифтів у стилістиці татуювань, тому шукати безкоштовні набори в інтернеті може і не знадобитися.
Тепер використовуйте створення шарів і на кожному розташовуйте текст так, як він має виглядати при готовій анімації. Якщо це текст, що друкується, то на кожному новому шарі повинна з'являтися нова літера. При цьому не забувайте використовувати пензлі та фільтри при необхідності, щоб текст відповідав вашій початковій заготівлі. Завдяки цьому у Photoshop можна створити дуже гарний та оригінальний текст, але не забувайте про стилізацію всього вашого сайту. Експериментуйте з ефектами та підбирайте.
Пам'ятайте, що для використання пензлів над текстом потрібні нові шари. Тільки тоді можна буде увімкнути появу малюнка пензлем у загальну анімацію. Наприклад, завитки або цятки додати (у нашому випадку ляпки). Іншими словами, все має бути на шарах. Якщо ви хочете на головній сторінці сайту створити анімацію тексту з ефектом відблиску або зробити затирання ластиком неправильної літери та передрукувати правильно, то все має бути на окремих шарах.
Однак якщо ви вирішите вибрати «Анімацію кадру», вам потрібно буде вручну додаватикожен кадр через "створення дубліката" внизу панелі Анімації і вже не шари розміщувати, як на шкалі часу, а змінювати їх видимість. Таким чином, вийде теж анімація тексту, що друкується, але можна додати і трохи плавності.
Залишилося лише зберегти у GIF форматі та розмістити на сайті у потрібному місці. Тепер, після того як ви навчилися створювати анімацію у Photoshop або освіжили свої давні знання, ви зможете створювати приголомшливі ефекти з текстом.
Деякі поради щодо створення якісної анімації типографіки
Приклади на початку статті демонструють різні ефекти тексту, що друкується або з'являється, випливає або загасає. Така анімація не перевантажує сайт, ідеально підходить за стилістикою до дизайну проекту і не є чужорідним елементом, який деякі майстри використовують для «галочки», щоб «було» і щоб замовник бачив, що я ще можу.