1. створення анімації
2. Анімація типографіки в Photoshop
3. крок 2
4. крок 3
5. крок 4
6. крок 5
7. крок 6
8. Деякі поради щодо створення якісної анімації типографіки

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

Коли текст переміщається і рухається незвичайним способом і не на високій швидкості (щоб користувач встиг прочитати) - це захоплює дух. Відвідувачі заінтриговані, хочуть дізнатися і побачити, що буде далі, що їм хочуть повідомити. Яскравим прикладом використання анімації тексту є реклама. Але також використовується і в веб-дизайні.

Наприклад, проекти 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, яку не складно створити в будь-якому редакторі.