Дотримуючись рядка попередніх тижнів, в якому, з одного боку, я сказав вам, що браузери більше не підтримують Flash-файли, а з іншого, я навчив вас, як створювати анімацію в HTML5 як альтернативу. Сьогодні я хочу пояснити вам ще одну можливість, до якої ви можете отримати доступ, якщо хочете підготуйте банери або будь-який заклик до дії вашого веб-сайту в русі.
Йдеться про Анімовані GIF-файли. Я вже посилався на них у статті, де я говорив про те, як оптимізувати зображення на вашому веб-сайті, але ця публікація буде набагато вичерпнішою, я не просто скажу вам що це і які переваги вони мають, але також які інструменти ви можете використовувати для їх створення та як.
Покажчик змісту
Що таке анімований GIF?
Як завжди, я залишаю вам визначення, яке дає нам Вікіпедія: «це графічний формат, який широко використовується у Всесвітній павутині, як для зображень, так і для анімації». Своїми словами я скажу вам, що це тип файлу, який дозволяє вам з кількох зображень створіть одне рухоме зображення.
Для чого я можу використовувати анімований GIF?
- Щоб легше привернути увагу моїх користувачів/клієнтів
- Пояснити, як працює продукт
- Для створення закликів до дії
- Для рекламних кампаній (наприклад, виділення знижки)
- Для створення підручників
- Показати різні кольори одного і того ж товару
- Для маркетингових кампаній електронною поштою (наприклад, повідомлення про майбутню подію)
- Для зв’язку зі своєю спільнотою в соціальних мережах
- І довгий тощо.
Скажи мені, для чого ти це використав?
Не забувайте, що ...
- Не слід зловживати ними, оскільки вони можуть наситити
- Ви повинні звернути увагу на його вагу, якщо вона надмірна, це уповільнить ваш веб-сайт
- Ви повинні бути обережними зі швидкістю (ні занадто швидкою, ні занадто повільною)
- Вони не повинні бути надмірно довгими
Як створити анімований GIF у Photoshop?
Далі я поясню поетапно як створити свій відеокліп з Photoshop - - (Я використовую версію CS4, але інструкції однакові, якщо ви використовуєте CS5 або CC). Разом з інструкціями ви знайдете інфографіку, яку я рекомендую вам переглянути, оскільки це полегшить вам їх розуміння.
Якщо ви не користувач Photoshop, не хвилюйтеся, якщо ви перейдете до наступного розділу, ви побачите, що я перелічую інші інструменти, з яких ви також можете підготувати свій анімований GIF.
1. Спочатку ти повинен створити новий файл, для цього вам потрібно зайти в Photoshop, клацнути на File у верхньому меню, а потім на New.
2. Далі з’явиться екран, де потрібно заповнити такі поля:
- Ім'я: Той, який ідентифікує ваш документ
- Ширина висота: Введіть розмір файлу (будьте обережні з одиницею виміру, найкраще використовувати пікселі)
- Дозвіл: 72 пікселі/дюйм
- Кольоровий режим: RGB (пам’ятайте, що CMYK призначений для друкованих документів)
- Фоновий вміст: Прозорий (Ви встигнете забарвити фон пізніше з шарів)
3. Після створення документа перше, що вам потрібно зробити (якщо у вас його ще не активовано) - перейти у верхнє меню, клацнути на Вікно та активуйте панель анімації (Ви повинні побачити галочку зліва).
4. Ви побачите, що внизу вашої робочої таблиці a шкала часу. У нижній правій частині ви побачите прямокутний символ, і якщо ви стоїте на ньому, “Перетворити на анімацію кадру”, Натисніть на нього, і ви побачите, як змінюється дисплей, квадрати у вигляді кадру замість горизонтальних ліній.
5. Запам’ятай! Збережіть файл як .psd. Таким чином ви завжди зможете редагувати файл, якщо будуть майбутні зміни.
Що ж, після збереження настає творча частина. Вам доведеться створювати різні шари (Ви можете відкрити цю панель з меню Вікно → Шари) і включити в кожен з них елементи, які ви хочете бути частиною вашої анімації (наприклад, у моєму випадку це світло-бірюзовий фон і піктограма GIF).
6. Тепер вам доведеться повернутися до анімаційна панель для створити в цьому різні кадри це буде частиною вашого анімованого зображення. Ви повинні натиснути на квадратний символ (див. Його в доданій інфографіці) і створити стільки кадрів, скільки захочете.
7. Щоб сказати, що відображається, а що не в кожному з них, вам доведеться пограти з значок ока що ви маєте біля кожного шару з лівого боку. Таким чином ви можете вирішити, яке зображення, текст, фон тощо. з'являються в кожному з них. Наприклад, у моєму випадку я створив перший кадр із фоном + піктограма і останній кадр лише з фоном, мета полягає в тому, щоб логотип зник.
8. Для досягнення цього ефекту ви можете зробити це двома способами. Якщо клацнути в нижній правій частині кожного кадру, a меню з секундами що ви хочете, щоб кожен із них з’явився. Якщо жодна з цифр, які приходять за замовчуванням, вас не переконує, ви можете передати її "іншому" і вибрати ту, яку хочете. За допомогою цієї функціональності ви можете надати різний час для кожного кадру так що перехід вашого анімованого GIF буде більш-менш швидким.
9. Попередній варіант призведе до того, що надрізи між рамою і рамою будуть дуже грубими, якщо ви хочете досягти більш успішного переходу, ви можете скористатися інструментом "Перемітайте анімаційні кадри”(Див. Інфографіку). Для цього потрібно натиснути на перший кадр, клацнути на інструменті, про який я коментую, та на екрані, що з’явиться вибрати в яких кадрах, на яких шарах та які ефекти ви хочете. Це питання спроб і помилок, вам доведеться возитися і бачити, який результат вас переконує найбільше, натиснувши або знявши клік на різних варіантах, які він вам пропонує. Але я запевняю вас, що у вас можуть бути дуже класні речі 😉 Звичайно, будьте обережні з вагою, оскільки цей параметр генерує нові кадри, які збільшать його.
10. Наступний пункт допоможе вам уточнити скільки разів повторюватиметься ваше рухоме зображення. У вас є такі варіанти:
- Одного разу
- Три рази
- Нескінченний: зазвичай звичайний
- Інше: ви можете вибрати, скільки разів
11. Ви вже маєте готовий анімований GIF, але я думаю, що перед його експортом ви захочете подивіться, як це вийшло, не? Ну, це дуже просто, у меню під кадрами ви побачите, що є грати значок, просто натисніть на нього, і на тій самій робочій таблиці Photoshop ви побачите, як склалася анімація.
12. Вам потрібно зберегти його лише у форматі GIF, хоча перед тим, як запам’ятати, зберегти його як .psd, щоб оновити редаговані останні зміни. Після цього перейдіть у верхнє меню та натисніть Файл → Зберегти для Інтернету та пристроїв, і відкриється новий екран, в якому вам доведеться:
- Вибирайте GIF
- Кольори 256, Ви можете зменшити його, якщо вага дуже великий, якщо це не впливає на якість вашого файлу надмірно
- На дні перевірити що повторення це той, який ви вибрали раніше (нескінченний, раз ...)
- З лівого боку ви можете cчорт вазі з вашого файлу
Ось результат:
За допомогою яких інших інструментів я можу створити анімований GIF?
Майже всі варіанти, які я буду представляти вам, безкоштовні, як завжди рекомендую випробувати їх, поки не знайдете той, який найкраще відповідає вашим потребам:
Щоб встановити на комп’ютер:
GIMP: Ось відеоурок, в якому вони пояснюють, як створити анімований GIF в Gimp.
GifCam: Він не потребує встановлення, оскільки це виконуваний файл. Дозволяє робити знімки екрана та не має обмежень за часом.
MakeGIF: Це розширення Chrome, яке дозволяє робити будь-яке відео у форматі HTML5.
Інструмент Giffin: діє лише для Windows. Як перевагу ви можете включити різні ефекти.
Щоб завантажити на свій мобільний телефон:
- Для Android:
Gif Creator: Дозволяє створювати GIF за допомогою зображень, які ви маєте на своєму мобільному телефоні.
Gifinator: Він дуже простий у використанні, дозволяє швидко створювати GIF-файли.
-Для IOS:
Гіффер: Він платний, але простіший у використанні та має більше функцій, ніж інші програми.
GifMill: Він безкоштовний і дозволяє включати різні фільтри та тексти.
Правда полягає в тому, що він міг би включати довгі і т.д., тому якщо є такий, яким ви користуєтесь регулярно і який, на вашу думку, працює правильно, не соромтеся поділитися ним із нами в коментарях 😉
Як я можу перетворити анімований GIF у відео HTML5?
Я знаю, що дуже наполягаю на питанні ваги файлів, але важливо оптимізувати швидкість вашого веб-сайту. Хоча рухомі зображення, як ми бачили раніше, мають свої переваги, недолік полягає в тому їх вага зазвичай надмірна. Рішення, щоб цього уникнути, є перетворити свій анімований GIF у файл GFY, як? Я рекомендую Gfycat, він перетворить ваш файл, а потім ви зможете поділитися ним або вбудувати його, як у моєму прикладі GFY:
Це все друзі. Я знаю, що це була напружена стаття, але моїм наміром було об’єднати в одному дописі все необхідне для створення анімованого GIF, і я думаю, що цього досяг. Ви вже знаєте, що якщо у вас виникнуть запитання чи пропозиції, ваші коментарі будуть раді 😉
Джерело зображення: 1
Графічний та веб-дизайнер з великим досвідом в галузі Інтернет-спілкування. Моя мета - допомогти професіоналам та малому бізнесу створити свою цифрову ідентичність.
Мій час офлайн Я проводжу це по дорозі на гору, увіковічнивши момент своєю камерою, відвідуючи віддалене місце у світі або просто розважаючись із друзями