GIF Resizer: зміна розміру Gif анімації онлайн. Створюємо та редагуємо GIF файл Як редагувати анімацію

Думаю, у жодної мене час від часу з'являлося бажання переробити / доробити / трохи змінитизнайдену gif – картинку.

Напевно, багатьом знайомі ситуації типу:
- начебто й симпатичний готовий анімований аватарчик, але трохи б його сповільнити…
- ось би написати на анімованій картинці щось...
- добре б розмір gif - малюнки поменше зробити…
- і т.д. і т.п.

Ось ми розберемо ці питання сьогодні.

Минулого разу ми, сьогодні ж ми будемо видозмінювати готовий анімований гіфпід свої потреби.

Зіткнувшись із цією «проблемою», але вже знаючи, як створити анімований гіф, я припустила де і як можна змінити gif. Тут же знайшла в інеті пару гіф-ів і перевірила свій здогад - вона виявилася вірною. Але почнемо по порядку.

Отже, ви маєте готову анімовану картинку. Розглянемо 3 варіанти її видозміни (на мою думку – найзатребуваніші випадки):
1. Уповільнимо анімацію.
2. Що-небудь напишемо на зображенні.
3. Змінимо розмір картинки.

Змінюємо швидкість анімації на гіф - картинці.
(Міняємо швидкість миготіння картинок)

Часто бувало так, що мені подобається, наприклад, якась анімована аватарка, але дуже вже там сильне миготіння і хочеться його ну хоч трохи уповільнити. Ось цим ми і зараз займатимемося. Хоча варіант з збільшенням швидкостіанімації – абсолютно той самий випадок.

Відкриваємо цікавий для нас файл формату gif в Adobe ImageReady: File(Файл) – Open(Відкрити) - …

Тепер дивимося на панельку Анімації

Уважно дивимося на цей сувій і бачимо, що під кожним"кадром" є час (у даному випадкувстановлено 0,17 секунд).

Ось цей показник нам і треба поміняти тиснемо на галочку і з'являється список, що випадає, де ми можемо встановити потрібну нам тривалість показу кожногокадру окремо (або всі разом, виділивши всі кадри, затиснувши клавішу Shift на клавіатурі).

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

Якщо вас все влаштовує, то зберігаємо отриманий результат: File - Save Optimized As…– І дивіться, що вийшло.

ОК

ОК

Якщо ні – продовжуйте змінювати тривалість показу кадрів, доки не отримаєте бажаного.

От і все!

Якщо ви помітили, то у новому гіфі був прибраний підписв правому нижньому куті. Ось цим ми зараз і займемося, тільки ми додамо в картинку напис, а не приберемо його.

На анімованому аватарі (картинці) пишемо слова.

Відкриваємо у Adobe ImageReadyанімований аватар: File(Файл) – Open(Відкрити) - …

Цей гіф має всього 2 кадри(і 2 шари). І нам треба всього додати напис. Робиться це дуже швидко.

Пишемо на малюнку «потрібні слова» у потрібному місці за допомогою інструмента Text(як у Фотошопі) при цьому новий шар у списку шарів створюється автоматично.

Зробимо із тексту растрову картинку: у меню Layer – правою кнопкоюмиші тиснемо на шарі з текстом і в списку вибираємо Rasterize Layer - і ось текст перестав бути текстом, тепер це просто графічний елемент, що має один (!) колір, що дуже важливо для ваги файлу.

Тепер дивимося на панельку Анімації(Animation) у лівому нижньому куті вікна програми (за замовчуванням вона там з'являється). Якщо її там немає, то треба цей "свиток" (панельку) дістати: у меню Window вибираємо Animation.

Якщо кадру всього два ми їх краще створимо заново:

Відкриємо список, що випадає, свитка Animation і виберемо Delete Frame(Видалити кадр).

Ось у нас залишився лише один їх кадрів. "Налаштуємо" його - ми хочемо бачити першу картинку (Layer 1) і напис - залишаємо їх включеними (глазик поруч із шаром включений), а "непотрібний" поки шар відключаємо (натиснути лівою кнопкою миші).

Перший кадр готовий.

Створюємо його копію (обравши Copy Frameу списку, що випадає, або відповідну кнопочку праворуч від «програвача»).

З'явився другий кадр- Налаштовуємо його:
- напис включений
- Layer 1 вимкнено
- Layer 2 включений

Ну от, загалом, і все. Запустіть плеєр і побачите, що тепер на вашому анімованому аватарі з'явився напис.

Якщо вас все влаштовує, то зберігаємо отриманий результат: SaveOptimizedAs...

Можна вимикати на другому кадрі слово - тоді "мерехтіти" буде і воно.

А якщо я хочу, щоб при «мерехтінні» картинки поступово додавалися літери слова?

Розрізаємо слово на окремі літери (копіюємо шар зі словом і на кожному наступному шарі стираємо на одну літеру менше – перший шар – залишена від слова перша літера, другий шар – 2 літери тощо по повного шару). Для цього вистачаємо шар зі словом і тягнемо його на іконку внизу списку шарів – шар копіюється та з'являється у списку.

Усі зміни із шаром виробляються, коли саме змінюваний шар активний, тобто. ви знаходитесь на ньому (лівою кнопкою тиснемо на шарі і він підсвічується темнішим кольором).

Тепер залишилося створювати нові кадри і кожному наступному включати шар із доданою літерою. У цьому поперемінно вкл/выкл Layer 1 і Layer 2 (щоб змінювалося як слово, а й картинка).

Ось що у нас вийшло:

Я Вам пропоную скористатися онлайн-редактором, який називається « Ezgif.com», де можна як змінювати розмір анімаційних картинок, а й оптимізувати їх, т. е. зменшувати їх вагу.

Ще за допомогою цього онлайн редактора, можна багато банери з інтернету переробити на власний розсуд, і не потрібно працювати над дизайном. Ви просто пишіть свій текст і банер готовий.

Заходимо сюди

Інструменти онлайн редактора «Ezgif.com»

Для швидкого редагування GIF зображень краще скористатися онлайн редактором, ніж Фотошоп. Адже багато людей і поняття не мають, як з Фотошопом працювати, а тут можна за лічені хвилини відредагувати будь-яке GIF зображення

Онлайн редактор виглядає так:

Редактор «Ezgif.com» для редагування анімаційних GIF картинок

До функціоналу Фотошоп він, звичайно, не дотягує, зате має всі необхідні інструменти для редагування GIF зображень.

Можливості онлайн редактора:

1. Обрізання зображення

2. Зміна розміру

3. Оптимізація зображення

4. Додавання ефектів

5. Зміна швидкості анімації

6. Розбирання анімації на кадри (фрагменти)

7. Додавання тексту

8. Накладення іншого зображення

Здавалося б, на вигляд простенький редактор, а якийсь потужний.

Давайте розглянемо всі перераховані інструменти окремо.

Crop (Обрізання зображення):простий онлайн інструмент для обрізання анімаційних картинок.

Завантажте картинку, а потім за допомогою миші виділіть потрібну частину зображення, яку хочете обрізати. Натисніть « Crop it» і все готове.

Після того, як Ви завантажите зображення, під цією картинкою з'являється інформація про нього: розмір КБ, габарити картинки, і скільки кадрів вона містить.

При обрізанні картинки можна задати розмір вручну. Для цього під зображення потрібно в поля. Left», « Top», « Width» та « Height» ввести потрібні значення.

Resize (Зміна розміру зображення):за допомогою цього інструмента можна змінити розмір картинки або обрізати її. Після зменшення картинка залишається такої ж якості, і швидкість анімації не змінюється.

У полях « New width» та « New height» потрібно встановити новий розмір зображення, або можна просто вказати відсоток (Percentage), а потім натиснути « Resize it!». Картинка буде зменшена на відсоток, який Ви вказали

За допомогою цього інструменту, Ви можете швидко та легко змінювати розмір GIF зображень. При збільшенні розміру картинки якість буде губитися.

Якщо картинка після зміни стала погано відображати анімацію, тоді можна спробувати задати інший розмір

Optimize (оптимізація):а за допомогою цього інструмента можна змінити розмір (вага) файлу GIF. Вага картинки стає меншою за рахунок зменшення кількості кольорів у кожному кадрі. Кожен кадр GIF містить до 256 унікальних кольорів, але при зменшенні кількості кольорів можна досягти меншого розміру файлу.

Оптимізація має безліч методів, але можна підібрати оптимальний варіант, щоб якість картинки залишалося хорошим. Докладніше про оптимізацію читайте на сайті.

Effects (ефекти, зміна кольору зображення):за допомогою цього інструменту можна дзеркально перевертати зображення по горизонталі та вертикалі.

Також можна повернути зображення під певним кутом, якщо задати ступінь у полі « Rotate». Зображення можна призначити інший колір, зробити його чорно-білим, або надати якийсь інший відтінок.

Speed ​​(зміна швидкості GIF анімації):Цей інструмент призначений для зміни швидкості анімації.

Якщо ви хочете змінити швидкість анімації пропорційно до поточної, тоді використовуйте відсоткове співвідношення « % of curent speed», а щоб задати затримку між кадрами, потрібно використовувати метод « ». Параметр « hundrediths of second between frames» задає час затримки між кадрами в сотих секундах (1/100)

Split (розібрати GIF картинку на кадри): е.цей інструмент призначений для перетворення анімаційних GIF зображень на окремі кадри, після чого кожен кадр можна редагувати окремо.

Усі кадри анімаційної картинки можна завантажити на комп'ютер. Для цього треба клікнути по кадру правою кнопкою миші, а потім у контекстному меню вибрати зберегти зображення як…». Також усі кадри можна завантажити одним zip-архівом. Download frames as ZIP»

Write (додати текст): ецей інструмент дозволяє додавати текст до GIF анімації. Ви можете додати текст до всієї GIF картинки, або до окремих її кадрів. Текст на зображенні можна переміщати за допомогою миші.

Overlay (накладення іншого зображення):цей інструмент дозволяє на GIF зображення накласти інше зображення, і бажано, щоб вона була формату PNG або GIF.

Файли у форматі GIF усюди. Колись скромні анімовані зображення наразі є неофіційною мовою інтернету. GIF анімація – це найшвидший спосіб висловити емоції у Twitter, а ще ми можемо витрачати години на її перегляд прогортаючи стрічку новин у VK, Facebook або Однокласниках.

Існує досить велика кількість сайтів, на яких можна знайти вже готові гіфки на різні тематики. Але ніщо не зрівняється з GIF анімацією, яка зроблена своїми власними руками. Вважаєте, що це складний процес? Ви помиляєтесь, це досить просто. Швидко створити GIF анімацію можна у графічному редакторі Photoshop, конвертуючи вже існуюче відео, або використовуючи серію статичних зображень. Давайте розглянемо докладніше, як це робиться.

Примітка:У всіх прикладах цієї статті я використовую Photoshop CC 2017.

Для початку необхідно запустити Photoshop, перейти у “Файл” > “Імпортувати” > “Кадри відео у шари” та вибрати необхідний відеозапис.

У діалоговому вікні можна буде виконати імпорт всього відеозапису, або вибрати тільки його певну частину. Якщо ви виберете другий варіант, перетягніть ручки під вікном попереднього перегляду, щоб встановити початкову та кінцеву крапки. Частина відеозапису між цими ручками буде імпортована.

Примітка:Майте на увазі, що чим більше відео, яке ви імпортуєте, тим більше буде ваш GIF. Також, якщо ви імпортуєте занадто довгий відеозапис, вибір "Залишити кожен 2 кадри" (або більше) - це простий спосіб зменшити розмір, не дуже сильно впливаючи на якість.

Переконайтеся, що галочка в віконці «Створити покадрову анімацію», а потім натисніть «OK». Розпочнеться процес імпортування відео. Це може тривати деякий час, залежно від розміру кліпу. Після завершення імпорту відкриється робоча область, де кожен кадр відеозапису буде розміщено на власному шарі.

У нижній частині екрана знаходиться панель шкали часу. Вона показує всі кадри, з яких складатиметься ваша GIF анімація.

Ви можете додавати та видаляти кадри на свій розсуд, або редагувати будь-який з існуючих шарів так само, як редагуєте шари на будь-якому іншому зображенні. Для попереднього перегляду GIF-анімації просто натисніть кнопку «Відтворити» внизу шкали часу.

У результаті має вийти щось на кшталт цього:

Створення GIF анімації із серії статичних зображень

Якщо у вас немає відеозапису для використання його як основи для вашої GIF анімації, ви зможете створити його вручну із серії статичних зображень. Це трохи складніше, особливо якщо ви хочете зробити щось круте, але основний процес є простим.

Ви створюєте свій GIF з одного файлу зображення, що містить кілька шарів. Кожен шар – це окремий кадр вашої майбутньої анімації. Існує два способи розпочати роботу:

1. Якщо ви вже створили зображення для анімації, імпортуйте їх, вибравши «Файл» > «Сценарії» > «Завантажити файли у стек…». Натисніть «Огляд» і виберіть зображення, а потім натисніть «OK». Кожне зображення буде поміщено на окремий шар усередині того самого файлу.
2. Якщо ви ще не створили зображення, зробіть це зараз. Пам'ятайте, що кожне окреме зображення є частиною майбутньої анімації.

Тепер ви готові розпочати створення анімації.

Анімація статичних зображень

Ось як це працює. Коли ви створюєте кадр анімації вручну, в нього включається кожен видимий шар. Шари, які відключені, не братимуть участі в кадрі.

Для створення першого кадру зробіть перший шар видимим, а всі інші відключіть. Потім, створюючи другий кадр, зробіть другий шар видимим, а потім третій шар третього кадру і так далі. Коли ви почнете, все стане зрозумілішим.

Для створення анімації відкрийте шкалу часу, якщо вона у вас не відкрилася автоматично. Для цього у верхній панелі натисніть «Вікно» і у меню виберіть «Шкала часу». У центрі панелі натисніть «Створити анімацію кадру». Ця дія призведе до створення першого кадру вашої анімації. На панелі "Шари" приховайте шари, які не повинні бути частиною кадру.

Тепер натисніть кнопку «Новий кадр», яка дублюватиме попередній кадр. Ще раз приховайте зайві шари, а ті, які мають брати участь у кадрі, зробіть видимими.

Повторюйте цей процес, поки не додасте всі необхідні кадри для анімації.

Завершення

На завершення встановіть час відображення кожного кадру. Виділіть перший кадр, а потім клацніть по останньому із затиснутою кнопкою «Shift», щоб виділити їх усі. Тепер клацніть стрілку вниз під одним із кадрів та виберіть затримку. Відсутність затримки означає, що анімація працюватиме швидко, тоді як встановлена ​​кількість секунд змусить кадри залишатися на екрані протягом заданого періоду часу.

Нарешті, встановіть параметри циклу, які ви знайдете внизу панелі «Шкала часу». Цей параметр відповідає за те, скільки разів відтворюватиметься ваша анімація. У більшості випадків ви вибиратимете варіант «Завжди».

Тепер натисніть кнопку «Відтворити» в нижній частині екрана, щоб переглянути анімацію. Ви повинні побачити щось на кшталт цього:

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

Коли ви будете задоволені результатом, ви можете переходити до розділу «Збереження анімації», або читайте далі, щоб поліпшити анімацію.

Удосконалення анімації шляхом додавання проміжних кадрів

Photoshop підтримує потужну анімаційну функцію створення проміжних кадрів. Це дозволяє створювати плавніші анімації, автоматично генеруючи перехідні кадри між двома існуючими кадрами. У цьому прикладі я збираюся обійти всі кадри, щоб надати зоряному небу ефекту мерехтіння.

Для початку виберіть перший кадр і натисніть кнопку «Створення проміжних кадрів» на панелі інструментів у нижній частині шкали часу.

У діалоговому вікні, що відкрилося, встановіть пункт «Проміжні кадри» у значення «Наступний кадр», а для пункту «Додати кадрів» вкажіть значення на свій розсуд. Більше значення означає більш плавний, але повільний перехід. Натисніть OK, щоб створити проміжні кадри.

Тепер повторіть процес для інших вихідних кадрів, які ви додали. Коли дістанетеся до останнього, встановіть «Проміжні кадри» у значення «Перший кадр». Це допоможе створити плавний перехід до початку циклу вашої анімації.

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

Скріншоти представлені нижче з Photoshop СС, але робота з GIF анімацією в CS6 та інших версіях програми плюс-мінус аналогічна. Можливо, візуально інструменти трохи відрізнятимуться, але в цілому, принцип і алгоритм дій схожі. Як приклад розглянемо тривіальне завдання як створити GIF анімацію у Фотошопі з фотографій, що змінюють один одного. Нещодавно за допомогою цього керівництва зробив гіфку про свої пригоди для підсумкового поста за 2016 рік у персональному блозі.

Процес зайняв буквально хвилин 5-10. Тут важливо просто уважно виконувати усі кроки. Наприкінці посту знайдете англомовний відеоурок на цю тему.

Додавання зображень GIF анімації у Photoshop

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

У центрі даної панелі є список, що випадає, де потрібно вибрати варіант «Create Frame Animation» і клікнути по кнопці. В результаті цієї дії Timeline трохи перетвориться, і ви повинні побачити як перший кадр картинку з верхнього шару.

На наступному етапі виділяєте всі шари в проекті (клікаєте по них утримуючи клавішу Ctrl). Після цього відкриваєте контекстне менюу правому верхньому кутку вікна Timeline і вибираєте «Make Frames From Layers».

З усіх видимих ​​та виділених шарів Adobe Photoshopстворить кадри анімованого GIF В результаті побачите їх у панелі Timeline.

Налаштування GIF анімації у Фотошопі

Тут вам потрібно буде вказати дві речі: тривалість відображення різних кадрів + число повторень гіфки. Почнемо з першого. Під кожним об'єктом-картинкою в Timeline знайдете час показу та стрілку вниз. Клікаєте по них і у випливаючому меню вибираєте тривалість карда.

Елементам можна вказувати різний час або встановити параметр одночасно для декількох з них (спільне виділення як і в шарах - за допомогою Ctrl).

Щоб «зациклити» GIF у Фотошопі при створенні анімації вибираєте значення Forever у відповідному налаштуванні, як показано на скріншоті нижче.

Там є можливість вказати будь-яку потрібну вам кількість повторень. Поруч знаходиться кнопка Play, що дозволяє програти анімований GIF і подивитися як виглядатиме підсумковий результат.

Збереження GIF анімації у Фотошоп

У фінальній частині нашого керівництва розглянемо, як правильно зберегти GIF анімацію у Фотошопі. Для цієї мети використовується знайомий всім інструмент Save for Web, проте останніх версіях Adobe Photoshop СС він розташовується в новому місці меню (File - Export). На щастя Alt+Shift+Ctrl+S все ще працює.

У вікні налаштувань треба вибрати формат GIF, а також переконатися, що налаштування Looping Options встановлено у Forever. У нижньому правому кутку вікна можна запустити створений вами анімований GIF у Photoshop для перегляду.

Якщо все функціонує так, як потрібно, натисніть Save і зберігаєте файл на локальному комп'ютері. Щоб перевірити працездатність GIF потрібно відкривати їх у браузері, т.к. вбудований переглядач Windows не програє анімацію.

До речі, ви також легко можете експортувати ваш проект у відео формат. Порядок дій аналогічний як при збереженні GIF анімації, але у меню Фотошоп вибираєте пункт File — Export — Render Video.

У вікні будуть різні налаштування відео, але нічого додатково міняти не потрібно, просто клацаєте по кнопці Render. У результаті отримаєте mp4 файл зі слайдшоу фотографій/зображень.

Насамкінець пропонуємо глянути англомовний відеоурок для створення анімованих GIF у Photoshop. Алгоритм роботи там такий самий, як і у статті, але можливо, вам буде простіше сприймати інформацію про відео.

Якщо у вас залишилися ще якісь питання про те, як зробити GIF анімацію у Фотошопі або є доповнення, пишіть у коментарях.

існує з якихось зовсім кудлатих років, а точніше з 1987 року. У рунеті, принаймні, він став загальним — будь-яку рушійну картинку називають «гіфкою». Звичайно, він поступається у використанні двом іншим JPEG і PNG, але впевнено займає свою нішу анімованих картинок і останнім часом отримує нове життя. Наприклад, у проекті messenger platform, яку нещодавно презентував facebook. Мабуть, як доповнення набридлим смайлам та стікерам. Але й останніх відправляти на спокій передчасно.

Отже, ми з'ясували, що формат GIF живіший за всіх живих, в мережі багато ресурсів, де є маса готових гіфок, але як самим отримати анімований файл і трохи розважитися.

Онлайн редактори GIF для відео та зображень.

Giphy.com- Зручний, багатофункціональний, максимально простий і зрозумілий редактор в браузері. Вміє мабуть все, що вам тільки знадобиться, вставляєте посилання з you tube, vimeoабо просто посилання на будь-яке відео. Обрізайте, редагуєте та накладаєте різні тексти чи символи. Важливо все це робиться в браузері і відразу можете розшарити в соц. мережі або зберегти на комп'ютері. Якщо зареєструватися, то можна заливати готові до свого сховища на сайті, зробити публічним або залишити лише для себе. Велика база готових гіфок, зрозумілих в основному американській публіці, але ж нам важливий інструмент для створення. Бажаєте унікальності, створюйте! Завантажуйте фото або картинки, використовуйте готове відео, робіть.

Редактор GifCam офлайн.

Якщо у вас не швидкий інтернет, і ви вважаєте за краще працювати у звичній середовищі windows, потрібно записати дії на екрані комп'ютера. Немає нічого простішого - крихітна, безкоштовна, багатофункціональна утиліта GifCam, що не вимагає установки. Завантажуємо, Розпаковуємо і користуємося.

• Після запуску з'явиться вікно, яке можна натягнути на будь-яку область екрана або захопити його весь.
• Тиснемо Rec, щоб почати запис, або Frame щоб зробити кадр.
• Програма чудово розпізнає схожі кадри та ефективно склеює їх, використовуючи зелене тло, зменшуючи вихідну вагу файлу.
• Можна змінювати тон, насиченість, виділяти кадр (Shift + Ctrl + Click), використовувати монохром, змінювати розмір, додавати текст у кадр та багато іншого.

Подробиці на сайті розробника blog.bahraniapps.com/gifcam.

Recordit

Ще один максимально простий і дуже швидкий творець GIF з екрану комп'ютера. Підтримує Windows та Mac? звичайно поступається функціоналом та редагуванням GifCam? але тим і цінний, швидкістю і зрозумілим управлінням. Тиснемо REC (запис) і отримуємо посилання на відео, яке потім вже можна завантажити з сайту. Мінімум налаштувань знаходяться на значку в треї. Відмінна штука для інструкцій та скрінкастів для